wordpress - 将 Container Div 添加到 WordPress 中的每个 Gutenberg-Block

Question

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

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

但是标题 block (默认情况下)没有这样的选项。

而且我很乐意为每个古腾堡 block 添加一个额外的复选框，以在其周围切换一个额外的容器 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',
    } );

} );

效果很好，可以为 block 提供额外的类/样式。但它不会在 block 周围包裹任何东西。

是否有任何选项可以将诸如容器切换之类的东西(添加 .container 类的 div)添加到 block 中？

Answer 1

如果现在有人也需要这个(比如我)，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 );