WordPress Tab-Menu区块保存重载后props为空问题求助

核心问题分析 #

你的问题根源在于父区块的save函数没有正确存储InnerBlocks及子区块的属性信息，导致页面重载后，编辑器无法从保存的内容中还原子区块数据，进而触发区块类型验证错误。WordPress区块的save函数负责生成静态HTML，必须包含所有需要还原区块状态的关键数据，不能依赖编辑时的动态计算（比如编辑时获取子区块属性生成标签按钮的逻辑，不能直接搬到save里）。

具体解决方案 #

1. 确保父区块正确保存InnerBlocks #

父区块的save函数必须明确渲染InnerBlocks.Content，这是WordPress存储子区块数据的核心方式。示例代码如下：

save: (props) => {
    return (
        <div className="tab">
            {/* 必须保留InnerBlocks.Content，用于存储子区块数据 */}
            <InnerBlocks.Content />
        </div>
    );
}

2. 动态生成标签按钮的逻辑移到前端渲染（而非save函数） #

因为标签按钮是基于子区块的tabName属性动态生成的，不能在save阶段硬编码（因为子区块可能随时修改），正确的做法是：

• 在父区块的edit函数中，编辑时动态生成标签按钮（你当前的逻辑没问题）
• 在前端（区块的前端渲染脚本）中，页面加载时通过读取子区块的tabName属性生成标签按钮

示例前端渲染脚本（需注册到区块的script属性中）：

document.addEventListener('DOMContentLoaded', function() {
    const tabContainers = document.querySelectorAll('.tab');
    tabContainers.forEach(container => {
        const tabItems = container.querySelectorAll('.tab-menu-items');
        const tabNav = document.createElement('div');
        tabNav.className = 'tab-nav';
        
        tabItems.forEach((item, index) => {
            const tabName = item.dataset.tabName; // 假设子区块save时将tabName存在data属性中
            const button = document.createElement('button');
            button.textContent = tabName;
            button.dataset.tabIndex = index;
            tabNav.appendChild(button);
        });
        
        // 将标签菜单插入到容器顶部
        container.insertBefore(tabNav, container.firstChild);
    });
});

3. 子区块save函数存储tabName属性到HTML #

子区块的save函数需要把tabName属性以data-*的形式写入HTML，这样前端脚本才能读取到：

save: (props) => {
    const { attributes } = props;
    return (
        <div className="tab-menu-items" data-tab-name={attributes.tabName}>
            {/* 子区块内容 */}
            <InnerBlocks.Content />
        </div>
    );
}

4. 临时调试方案（禁用区块验证） #

如果上述调整后仍有验证问题，可以临时关闭区块验证来调试，在父区块注册时添加：

registerBlockType('your-namespace/tab-menu', {
    // ...其他配置
    supports: {
        html: false, // 禁用HTML编辑，避免手动修改破坏结构
    },
    // 临时关闭验证
    __experimentalSkipSerialization: true,
});

注意：这只是临时方案，最终还是要确保save函数生成的HTML和编辑器期望的一致。

关键注意事项 #

• 区块的save函数必须是纯函数，只能基于props的attributes和innerBlocks生成HTML，不能依赖外部状态或动态计算
• 所有需要在前端展示的动态内容（比如标签菜单），都应该在前端渲染脚本中生成，而不是在save函数中硬编码
• 子区块的属性必须通过HTML属性（如data-*）存储，这样父区块的前端脚本才能读取到

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