WordPress ACF Blocks与Webpack构建：render.php复制与渲染冲突问题

方案一：用replace-in-file-webpack-plugin自动移除build目录block.json的render属性 #

• 安装插件

npm install replace-in-file-webpack-plugin --save-dev

• 修改webpack配置文件（如果没有自定义配置，先从@wordpress/scripts导出默认配置再修改）
  在plugins数组中添加插件规则，匹配build目录下的所有block.json文件，自动移除其中的render属性：

const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');

module.exports = {
  // 保留@wordpress/scripts默认配置
  plugins: [
    // 已有插件
    new ReplaceInFileWebpackPlugin([
      {
        dir: 'build',
        test: /block\.json$/,
        rules: [
          {
            search: /"render": "file:\.\/render\.php",?\n?/,
            replace: ''
          }
        ]
      }
    ])
  ]
};

编译后，build目录的block.json会自动删除render字段，既保留了webpack复制render.php的功能，又不会干扰ACF的renderTemplate逻辑。

方案二：用WordPress过滤器强制ACF renderTemplate优先级 #

在主题的functions.php或自定义插件中添加以下代码，通过ACF的钩子覆盖block.json的render配置：

add_filter('acf/register_block_type_args', 'force_acf_render_template_priority', 10, 1);
function force_acf_render_template_priority($args) {
    // 仅对ACF块生效（判断是否存在renderTemplate属性）
    if (isset($args['renderTemplate'])) {
        // 移除block.json带来的render属性
        unset($args['render']);
        // 确保ACF的模板路径优先级最高
        $args['renderTemplate'] = $args['renderTemplate'];
    }
    return $args;
}

这个方法无需修改webpack配置，直接通过WordPress钩子调整优先级，适合不想折腾webpack配置的开发者。

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