将容器 Div 添加到 WordPress 中的每个 Gutenberg-Block

Question

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

一些方块有一个 alignwide 和 alignfull 选项，可以在它们周围添加类似容器的东西。这些选项适用于封面图片或段落。

但是标题块（默认情况下）没有这样的选项。

而且我很想为每个古腾堡块添加一个额外的复选框，以在其周围切换一个额外的容器 div。不仅仅是 class.

我发现了一些可以为每个古腾堡博客添加额外风格的东西：https://www.billerickson.net/block-styles-in-gutenberg/

这是来自那里的代码：

wp.domReady( () => {

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

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

} );

效果很好，给方块加了个class/style。但它并没有在块周围包裹任何东西。

是否有任何选项可以将容器切换（添加 div 和 .container class）到块中？

Answer 1

可以使用 块过滤器 将包装器添加到核心块，但这并不是那么简单，我不建议对所有核心添加修改块。一个更简单和更灵活的解决方案是添加一个 自定义包装块 接受 InnerBlocks （来自 wp.editor）作为孩子（你甚至可以定义要接受的块）并设置对对齐选项的支持（在工具栏中）和块设置侧栏中的 anchor/id。包装器的 class 将根据您的块名称自动创建。然后，您可以仅在需要时使用您的自定义包装块，并将所有其他块放入其中（例如标题块）。

Answer 2

您可能不得不使用 blocks.getSaveElement 来包裹元素

https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getsaveelement

function modifyGetSaveContentExtraProps( element, blockType, attributes ) {
    return (
        <div className = 'heading-wrapper' >
            { element }
        </div>
    );
}


wp.hooks.addFilter(
    'blocks.getSaveElement',
    'slug/modify-get-save-content-extra-props',
    modifyGetSaveContentExtraProps
);

Answer 3

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

https://developer.wordpress.org/reference/hooks/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 );

将容器 Div 添加到 WordPress 中的每个 Gutenberg-Block

Add Container Div to every Gutenberg-Block in WordPress

wordpress

reactjs

wordpress-gutenberg

gutenberg-blocks