ACF Blocks多InnerBlocks重复：如何实现块的唯一性？

问题核心原因 #

你当前的写法错误地在Tabs块的自定义字段循环中重复渲染同一个InnerBlocks组件，所有循环实例共享同一套存储数据，导致所有Tab的内容完全重复。ACF块的InnerBlocks本身是用于管理子块层级的，不需要额外通过自定义字段$tabs来循环生成Tab容器。

正确实现方案 #

1. 重构Tabs容器块代码 #

移除自定义字段循环，直接让Tabs块的InnerBlocks仅允许添加Tab子块，由Gutenberg编辑器自动管理子块的添加/删除，每个Tab子块会自动拥有独立的存储：

<div class="tab-content-container">
    <InnerBlocks 
        allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'acf/co-tab' ) ) );?>"
        template="<?php echo esc_attr( wp_json_encode( array( array('acf/co-tab') ) ) );?>"
        templateLock="all" <!-- 可选，锁定模板结构，只允许添加/删除Tab块 -->
    />
</div>

2. 保留Tab子块代码（仅需微调父块配置） #

确保Tab块的InnerBlocks允许任意块，并正确指定父块为Tabs：

<div id="<?php echo $id ?>" class="<?php echo $className ?>">
    <InnerBlocks 
        parent="<?php echo esc_attr( wp_json_encode( array( 'acf/co-tabs' ) ) );?>"
        allowedBlocks="<?php echo esc_attr( wp_json_encode( array() ) );?>" <!-- 空数组表示允许所有块 -->
    />
</div>

3. 关键配置说明 #

• Tabs块注册时需确保启用JSX支持：在acf_register_block_type的supports参数中添加'jsx' => true，确保InnerBlocks能正确渲染和存储子块数据。
• 移除Tabs块中自定义的$tabs字段：所有Tab子块由InnerBlocks直接管理，无需额外自定义字段存储。

原理说明 #

Gutenberg的InnerBlocks组件会自动为每个子块分配独立的clientId，并将子块的内容数据和父块绑定存储。之前的循环写法绕过了这个机制，强制渲染多个相同的InnerBlocks实例，导致数据共享重复。

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