如何在Gutenberg的InnerBlocks模板中向子块传递属性

问题排查与修复方案 #

1. 优先验证最常见的旧块缓存问题 #

你之前测试插入过的容器块会保留初始生成的子块数据，修改模板代码后必须删除编辑器中已存在的所有Multi-Column块，重新插入新块才能验证属性是否传递成功，旧块不会自动同步新模板的属性值，这是古腾堡块开发的常见踩坑点。

2. 修复子列块的属性持久化问题 #

你当前的列块save方法只输出了InnerBlocks内容，没有将columnwidth属性序列化到块的HTML注释中，会直接导致属性丢失：

• 如果你的列块是静态块，修改save方法：

save: ( props ) => {
    return (
        <div className={`col-${props.attributes.columnwidth}`}>
            <InnerBlocks.Content />
        </div>
    );
}

• 如果你的列块是动态块，需要在PHP注册块的时候也声明columnwidth属性，同时确保JS端的属性定义和PHP端完全一致。

3. 补充InnerBlocks模板锁定配置（可选但推荐） #

为了防止用户随意删除/添加列导致布局错乱，可以给主容器的InnerBlocks加templateLock参数：

<InnerBlocks
    templateLock="all" // 也可以用"insert"，允许移动内容不允许增删列
    allowedBlocks={ [ 'wabe/multi-column-column' ] }
    template={ [
        // 原模板代码保持不变
    ] }
/>

4. 调试验证方法 #

在列块的edit方法里加控制台打印，插入新块后查看输出即可确认属性是否传递成功：

edit: ( props ) => {
    console.log('列块属性：', props.attributes)
    return (
        <div>
            <p>Width: { props.attributes.columnwidth }</p>
            <InnerBlocks />
        </div>
    );
}

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