基于ACF开发WordPress Gutenberg自定义动态列块遇多InnerBlocks失效求助

核心报错根源 #

• Gutenberg 对块的绑定逻辑有严格限制：单个块定义内仅允许存在一个<InnerBlocks />组件，它是编辑器内容和块存储数据的唯一绑定锚点。在PHP循环中多次输出InnerBlocks会导致锚点冲突，编辑器完全无法识别交互入口，所有输入的内容都无法正常存储。
• 参考官方核心列块的设计逻辑：父级列块本身只持有一个全局的InnerBlocks插入点，所有独立的单栏子块都通过这一个入口挂载；子块自身负责渲染列容器，父块只负责输出外层栅格包裹结构、约束允许插入的子块类型。
• 你拆分独立单栏块的整体方向是正确的，之前运行失败的两个直接原因：
  • 仍然在父块的PHP循环内嵌套InnerBlocks，触发了锚点冲突规则
  • 模板配置里的块名拼写错误，将acf/theme-column错写为acf/biore-column，导致自动生成单栏块的逻辑完全失效

修正后的可落地实现 #

第一步：注册独立单栏容器块 #

单栏块作为纯容器组件，自身不做多余的配置，只负责渲染列容器，内部允许放置任意内容块：

add_action('acf/init', function() {
    acf_register_block_type([
        'name' => 'theme-column',
        'title' => __('Column', 'mytheme'),
        'category' => 'theme-blocks',
        'icon' => 'columns',
        'render_callback' => function() {
            ?>
            <div class="col">
                <InnerBlocks allowedBlocks="<?php echo esc_attr(wp_json_encode([])); ?>" />
            </div>
            <?php
        },
        'supports' => [
            'align' => false,
            'mode' => false,
            'jsx' => true,
        ],
        'enqueue_assets' => function() {
            wp_enqueue_style('theme-main');
        },
    ]);
});

第二步：重构多列父块的渲染逻辑 #

完全移除父块循环内的InnerBlocks代码，替换为全局唯一的InnerBlocks锚点，根据用户设置的列数自动生成对应数量的单栏块模板：

add_action('acf/init', function() {
    acf_register_block_type([
        'name' => 'theme-columns',
        'title' => __('Columns', 'mytheme'),
        'category' => 'theme-blocks',
        'icon' => 'grid-view',
        'render_callback' => function($block, $content, $is_preview) {
            // 获取用户通过ACF设置的列数
            $column_count = get_field('columns-count') ?: 2;
            // 生成对应数量的单栏块模板，保证块名和实际注册的块标识完全匹配
            $template = [];
            for ($i = 0; $i < $column_count; $i++) {
                $template[] = ['acf/theme-column', []];
            }
            ?>
            <div class="row row-cols-1 row-cols-md-3 row-cols-xl-5 justify-content-center py-4">
                <!-- 整个父块仅保留这一个InnerBlocks锚点 -->
                <InnerBlocks 
                    allowedBlocks="<?php echo esc_attr(wp_json_encode(['acf/theme-column'])); ?>"
                    template="<?php echo esc_attr(wp_json_encode($template)); ?>"
                    templateLock="all"
                />
            </div>
            <?php
        },
        'supports' => [
            'align' => true,
            'mode' => false,
            'jsx' => true,
        ],
        'enqueue_assets' => function() {
            wp_enqueue_style('bootstrap');
            wp_enqueue_style('theme-main');
        },
    ]);
});

关键设计说明 #

• 原方案中循环输出的col容器，现在移动到单栏块自身的渲染逻辑中，不再由父块提前生成
• 父块的职责被简化为三点：
  • 输出外层Bootstrap栅格的row包裹容器
  • 配置允许插入的子块类型，严格限制只能嵌入独立单栏块
  • 根据用户设置的列数自动生成初始模板，不需要用户手动逐次添加单栏块
• 配合templateLock="all"配置，可以禁止用户拖拽调整单栏块的顺序，避免栅格结构混乱
• 如果需要实现「修改侧边栏列数时自动增减单栏块数量」的动态效果，仅需借助Gutenberg原生块API添加少量JS钩子，在ACF字段值变化时调用块操作接口增删对应的单栏块实例，不需要从零开发自定义块组件。

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