WordPress 6.1.1中InnerBlocks templateLock="all"属性失效问题求助

问题背景 #

自定义区块通过InnerBlocks创建3列模板，设置templateLock="all"以锁定模板内内容的移动、删除和添加操作，该功能在WordPress 6.0.3及以下版本正常运行。升级至6.1.1后，新插入的列区块被隐藏，编辑器中无法选中。

原InnerBlocks代码 #

<window.wp.blockEditor.InnerBlocks
    template={new Array(3).fill(['core/column', {}])}
    templateLock="all"
/>

生成的区块内容 #

<!-- wp:attest/grid-columns {"numColumnsStr":"3"} -->
<div class="grid grid--columns-3"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:attest/grid-columns -->

问题原因 #

WordPress 6.1+版本对InnerBlocks的templateLock逻辑进行了调整，当使用templateLock="all"时，编辑器会对锁定的空区块（如空column）的交互样式做优化处理，导致其隐藏且无法被选中。

可行解决方案 #

方案1：给列区块添加默认占位内容 #

在列模板中嵌入默认的占位区块，让空列拥有可交互的内容区域，同时保持模板锁定：

<window.wp.blockEditor.InnerBlocks
    template={new Array(3).fill([
        'core/column',
        {},
        [['core/paragraph', { placeholder: '在此添加内容...' }]]
    ])}
    templateLock="all"
/>

方案2：调整templateLock属性并限制允许的区块 #

若无需完全锁定所有操作，仅需防止列的删除和移动，可改用templateLock="insert"，同时通过allowedBlocks指定列内允许添加的区块类型：

<window.wp.blockEditor.InnerBlocks
    template={new Array(3).fill(['core/column', {}])}
    templateLock="insert"
    allowedBlocks={['core/paragraph', 'core/image', 'core/list']} // 根据需求自行调整允许的区块
/>

方案3：自定义编辑器样式强制显示空列 #

如果必须保留templateLock="all"且列需为空状态，可添加自定义编辑器CSS来强制显示空列的占位样式：

.wp-block-column:empty {
    min-height: 60px;
    border: 1px dashed #ccc;
    background-color: rgba(0, 0, 0, 0.02);
}

在区块的编辑器脚本中注入该样式：

wp.data.dispatch('core/editor').removeEditorStyles('your-block-editor-styles');
wp.data.dispatch('core/editor').addEditorStyles('path/to/your-editor-styles.css');

效果验证 #

应用上述任一方案后，空列区块会显示可选中的占位样式，同时保留模板锁定逻辑：用户可在列内添加允许的内容，但无法删除或移动列本身。

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