WordPress Gutenberg：自定义嵌套容器布局区块开发技术求助

核心思路 #

要实现可嵌套的容器区块，核心是让编辑器支持容器节点的层级嵌套，同时允许在子容器内插入任意内置内容块。下面以常见的区块编辑器架构（类似Gutenberg）为例，给出具体实现步骤：

1. 注册可嵌套的容器区块 #

首先定义容器区块类型，标记它为可容纳子节点的父容器：

// 注册主容器区块
wp.blocks.registerBlockType('custom/nested-container', {
    title: '嵌套容器',
    icon: 'layout',
    category: 'layout',
    attributes: {
        // 可自定义容器样式属性，比如背景色、内边距
        backgroundColor: {
            type: 'string',
            default: '#ffffff'
        }
    },
    // 关键配置：允许嵌套及容纳子区块
    supports: {
        align: true,
        html: false,
        multiple: true,
        nested: true // 开启嵌套能力
    },
    edit: function(props) {
        const { attributes, setAttributes, className } = props;
        const { backgroundColor } = attributes;

        // 编辑器内渲染：提供子区块插入入口
        return wp.element.createElement(
            wp.blockEditor.BlockList,
            {
                className: `${className} custom-container`,
                style: { backgroundColor },
                allowedBlocks: true // 允许所有区块，也可指定特定类型
            },
            props.children
        );
    },
    save: function(props) {
        const { attributes, className } = props;
        const { backgroundColor } = attributes;

        // 保存时生成嵌套HTML结构
        return wp.element.createElement(
            'div',
            {
                className: `${className} custom-container`,
                style: { backgroundColor }
            },
            props.children
        );
    }
});

2. 添加子容器的快捷插入按钮 #

给容器区块的工具栏添加“插入子容器”按钮，方便用户快速创建嵌套结构：

// 给容器区块添加自定义工具栏按钮
wp.hooks.addFilter(
    'editor.BlockControls',
    'custom/nested-container-controls',
    function(BlockControls, props) {
        // 仅对自定义容器区块显示按钮
        if (props.name !== 'custom/nested-container') {
            return BlockControls;
        }

        return wp.element.createElement(
            wp.element.Fragment,
            null,
            BlockControls,
            wp.element.createElement(
                wp.blockEditor.BlockControls,
                { group: 'block' },
                wp.element.createElement(
                    wp.components.Button,
                    {
                        onClick: () => {
                            // 在当前容器内插入新的子容器
                            wp.data.dispatch('core/block-editor').insertBlock(
                                wp.blocks.createBlock('custom/nested-container'),
                                undefined,
                                props.clientId,
                                true // 标记为子区块插入
                            );
                        },
                        icon: 'plus-alt',
                        label: '添加子容器'
                    }
                )
            )
        );
    }
);

3. 限制嵌套层级（可选） #

如果需要控制最大嵌套深度（比如最多3层），可以添加校验逻辑：

// 限制容器最大嵌套深度为3
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'custom/restrict-nested-depth',
    function(settings, name) {
        if (name === 'custom/nested-container') {
            settings.validate = function(attributes, innerBlocks) {
                // 计算当前区块的嵌套深度
                const getDepth = (blockId) => {
                    const parent = wp.data.select('core/block-editor').getBlockParent(blockId);
                    return parent ? 1 + getDepth(parent) : 0;
                };
                const currentDepth = getDepth(wp.data.select('core/block-editor').getSelectedBlockClientId());
                if (currentDepth >= 3) {
                    return new wp.blocks.BlockValidationError(
                        'custom/nested-container',
                        '容器最多只能嵌套3层'
                    );
                }
                return true;
            };
        }
        return settings;
    }
);

4. 层级样式区分 #

通过CSS给不同层级的容器添加差异化样式，方便用户识别结构：

.custom-container {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

/* 第一层子容器样式 */
.custom-container .custom-container {
    padding-left: 30px;
    border-color: #ddd;
    background-color: #f9f9f9;
}

/* 第二层子容器样式 */
.custom-container .custom-container .custom-container {
    padding-left: 40px;
    border-color: #ccc;
    background-color: #f5f5f5;
}

关键说明 #

• 上述代码基于WordPress Gutenberg架构，如果你用的是其他编辑器（如Slate、ProseMirror），核心逻辑一致：定义可嵌套节点类型、实现子节点插入逻辑、处理层级校验。
• 确保编辑器本身支持区块嵌套特性，这是实现该结构的基础。
• 保存后的HTML会自动保留嵌套层级，前端直接渲染即可。

内容的提问来源于stack exchange，提问作者george