您应该将块分组到一个容器块中，该容器块允许您选择其背景颜色。

我将给你几个选项，按可访问性排序。

分组块WordPress 5.3+, 这里有Group 块，用于分组块并选择背景色。查看Toms的答案以获取一些屏幕截图。

WordPress没有背景色块，但有一个名为Cover, 您可以从中选择背景图像和背景色覆盖。覆盖可以具有100%不透明度，隐藏背景图像并仅显示颜色作为背景。此块的问题在于，它只允许您在其中使用段落和标题。

插件可以安装一个自定义块来执行您正在搜索的内容。有一个插件，可以添加一个作为容器使用的背景块。它叫WP Munich Blocks – Gutenberg Blocks for WordPress.

构建自己的块

您可以使用Create Gutenberg Block, 有助于创建块的开发人员工具包。这可能看起来有点复杂，但可能有人在寻找这种解决方案。

这将是一种方式。请记住，这是一个非常简单的示例，但我认为它在编辑器中运行得很好。您需要根据需要编辑前端外观，从CSS到布局。

    const { __ } = wp.i18n; // Import __() from wp.i18n
    const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
    const { InspectorControls, InnerBlocks  } = wp.editor;
    const { ColorPicker } = wp.components;

    registerBlockType( \'special/background-color\', {
        // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        title: __( \'Background Color\' ), // Block title.
        icon: \'media-document\', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
        category: \'common\', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
        keywords: [
            __( \'Background\' ),
            __( \'Color\' ),
            __( \'Container\' ),
        ],
        attributes: {
            color: {
                type: \'string\',
                source: \'attribute\',
                attribute: \'style\',
            },
        },
        // The "edit" property must be a valid function.
        edit: function( props ) {
            const { attributes, setAttributes, className, isSelected } = props;

            const style = {
                backgroundColor: attributes.color,
                border: \'solid 1px\',
                padding: \'10px\',
            };

            return (
                <div style={style} className={className + \' background-color-container-block\'}>
                    <InnerBlocks />
                    <InspectorControls>
                        <ColorPicker
                        color={ attributes.color }
                        onChangeComplete={ ( value ) => setAttributes( {color: value.hex} ) }
                        />
                    </InspectorControls>
                </div>
            );
        },
        // The "save" property must be specified and must be a valid function.
        save: function( { attributes } ) {
            const style = {
                backgroundColor: attributes.color,
            };

            return (
                <div style={style} className={\'background-color-container-block\'}>
                    <InnerBlocks.Content />
                </div>
            );
        },
    } );

我们在这里做的是注册一个id块special/background-color 和名称Background Color （如果愿意，可以更改这些选项）。

在里面attributes, 我们定义此块使用的数据，以及与帖子内容一起保存的数据。在这种情况下，我们只使用属性color, 存储容器背景色的。

这个edit 函数控制块在编辑器上的工作方式。在本例中，我们使用background-color 随着color 属性这个color 使用ColorPicker 组成部分当颜色改变时，我们使用以下命令更新存储新值的视图setAttributes. `

这个InnerBlocks 组件是让我们在容器中具有嵌套块的组件。

这个save 函数保存内容并控制块在前端的外观。在这里，我们仅使用background-color 等于保存在中的颜色attributes. 在其中，我们使用InnerBlocks.Content