ACF InnerBlocks破坏CSS Grid，如何为WordPress Gutenberg的allowedBlocks添加类？

问题场景 #

创建包含allowedBlocks的ACF InnerBlock时，子区块会被自动包裹在wp-block div容器中，这个容器没有继承网格所需的col3类，直接破坏了原有网格布局。

预期的网格结构代码 #

<div class="grid-wrapper innerblock">
    
    <div class="grid-item allowedblock col3 "></div>
    <div class="grid-item allowedblock col3 "></div>
    <div class="grid-item allowedblock col3 "></div>
    <div class="grid-item allowedblock col3 "></div>

</div>

后台实际生成的破坏布局代码 #

<div class="grid-wrapper block-editor-block-list__layout" data-is-drop-zone="true">
    
    <div class="wp-block"> <!-- 缺少col3类!! -->  
        <div class="grid-item allowedblock col3 "></div>
    </div>

    <div class="wp-block"> <!-- 缺少col3类!! --> 
        <div class="grid-item allowedblock col3 "></div>
    </div>

    <div class="wp-block"> <!-- 缺少col3类!! -->
        <div class="grid-item allowedblock col3 "></div>
    </div>

    <div class="wp-block"> <!-- 缺少col3类!! -->
        <div class="grid-item allowedblock col3 "></div>
    </div>

</div>

尝试过但无效的代码 #

<div class="block-wrapper">

    <?php 
         $template = array( 
        array( "acf/card", array( "className" => "col1-6 col2-8 col3-4" ) ) 
         );

    ?>
        
    <InnerBlocks 
        class=" grid-wrapper" 
        allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'acf/card') ) ); ?> "
        template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>"
    />

</div>

解决方案 #

方法1：通过编辑器过滤器给wp-block容器添加类（推荐） #

在主题的functions.php或自定义插件中添加以下JS代码，针对指定父区块下的子区块，自动给外层wp-block容器添加网格类：

wp.hooks.addFilter(
    'editor.BlockListBlock',
    'your-theme/assign-grid-class',
    function( blockElement, block ) {
        // 替换成你的父区块名称（比如acf/grid-container）
        if ( block.parent && block.parent[0] === 'acf/grid-wrapper' ) {
            blockElement.attributes.class = ( blockElement.attributes.class || '' ) + ' col3';
        }
        return blockElement;
    }
);

方法2：配置InnerBlocks模板并开启子区块类支持 #

1. 先确保你的ACF子区块（如acf/card）在区块设置的「高级」选项中开启「自定义CSS类」支持；
2. 修改父区块的PHP代码，锁定模板并确保类属性被正确传递：

<div class="block-wrapper">
    <?php 
        $template = array( 
            array( "acf/card", array( 
                "className" => "col1-6 col2-8 col3-4"
            ) ) 
        );
    ?>
        
    <InnerBlocks 
        class="grid-wrapper" 
        allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'acf/card') ) ); ?>"
        template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>"
        templateLock="all"
        defaultBlock="<?php echo esc_attr( wp_json_encode( array( 'acf/card', array( 'className' => 'col3' ) ) ) ); ?>"
    />
</div>

方法3：CSS兜底方案 #

如果上述方法无法生效，直接通过CSS选择器为父区块下的wp-block容器应用网格样式：

.grid-wrapper.block-editor-block-list__layout > .wp-block {
    width: 25%;
    /* 其他col3类的样式属性，比如margin、padding等 */
}

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