Question

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

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

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

我想为每个Gutenberg块添加一个额外的复选框，以在其周围切换一个额外的容器div。不只是一堂课。

我发现了一些可以为每个Gutenberg博客添加额外样式的东西：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',
    } );

} );

效果很好，为块提供了额外的类/样式。但是它并没有在块周围包裹任何东西。

是否可以选择在容器中添加类似容器切换（将div和.container类一起添加）的功能？

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 );

Answer 2

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

Answer 3

您可能必须使用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
);

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

3 个答案: