将Container Div添加到WordPress中的每个Gutenberg块

我正在使用Gutenberg编辑器和引导CSS框架。 默认情况下，古腾堡块周围没有容器或类似的东西

某些块具有alignwide和alignfull选项，可以在其周围添加容器之类的内容。这些选项适用于封面图像或段落

但标题栏默认没有这样的选项

我想在每个Gutenberg块中添加一个额外的复选框，以便在它周围切换一个额外的container div。不仅仅是一门课

我发现有些东西可以为古腾堡的每个博客增添一种额外的风格：

下面是代码：

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'default',
        label: 'Default',
        isDefault: true,
    } );

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'alt',
        label: 'Alternate',
    } );

} );

它工作得很好，可以为块提供额外的类/样式。 但它并没有把什么东西包起来

---

是否有添加容器切换之类的选项将div与.container类一起添加到块？

可以通过使用块过滤器将包装器添加到核心块，但这并不是那么简单，我不建议对所有核心块添加修改。一个更简单、更灵活的解决方案是添加一个自定义包装块，该包装块接受wp.editor中的InnerBlocks作为子对象。您甚至可以定义要接受的块，并在工具栏中设置对对齐选项的支持，以及在块设置侧栏中设置锚定/id。包装器的类将根据块名自动创建。

---

然后，您可以仅在需要时使用自定义包装块，并在其中每隔一个块放置一个标题块，例如

可以使用块过滤器将包装器添加到核心块，但这并不是那么简单，我不建议对所有核心块添加修改。一个更简单、更灵活的解决方案是添加一个自定义包装块，该包装块接受wp.editor中的InnerBlocks作为子对象。您甚至可以定义要接受的块，并在工具栏中设置对对齐选项的支持，以及在块设置侧栏中设置锚定/id。包装器的类将根据块名自动创建。

---

然后，您可以仅在需要时使用自定义包装块，并在其中每隔一个块放置一个标题块，例如

您可能需要使用blocks.getSaveElement来包装元素

---

您可能需要使用blocks.getSaveElement来包装元素

---

如果像我这样的人现在也需要这个，WordPress已经有了另一个更容易实现的过滤器，叫做render_block

这里有一个例子

    function wporg_block_wrapper( $block_content, $block ) {
        if ( $block['blockName'] === 'core/paragraph' ) {
            $content = '<div class="wp-block-paragraph">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        } elseif ( $block['blockName'] === 'core/heading' ) {
            $content = '<div class="wp-block-heading">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        }
        return $block_content;
    }

    add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );

---

如果像我这样的人现在也需要这个，WordPress已经有了另一个更容易实现的过滤器，叫做render_block

这里有一个例子

    function wporg_block_wrapper( $block_content, $block ) {
        if ( $block['blockName'] === 'core/paragraph' ) {
            $content = '<div class="wp-block-paragraph">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        } elseif ( $block['blockName'] === 'core/heading' ) {
            $content = '<div class="wp-block-heading">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        }
        return $block_content;
    }

    add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );

---

它在前端工作，但在编辑器中仍显示默认呈现。这是因为您正在使用钩子“blocks.getSaveElement”编辑save函数。现在可能有一个编辑编辑函数的函数。它在前端工作，但在编辑器中仍显示默认渲染。这是因为您正在使用钩子“blocks.getSaveElement”编辑保存函数。也许现在有一个函数可以编辑编辑函数。