ACF Blocks多区块重复加载同一样式表的解决方案咨询

针对ACF Pro 6区块重复加载全局style.css的问题，有以下几种可行方案，既能避免重复加载，又能保留Gutenberg后台的样式效果：

方案1：全局注册样式，移除block.json中的style字段 #

直接在主题的functions.php中注册全局样式，同时为编辑器加载该样式，然后删除所有block.json里的style字段：

function enqueue_global_block_styles() {
    // 注册全局样式，使用唯一handle确保不会重复加载
    $global_style_handle = 'global-block-styles';
    $global_style_uri = get_stylesheet_directory_uri() . '/style.css';
    $style_version = wp_get_theme()->get('Version');

    // 前台加载全局样式
    wp_enqueue_style($global_style_handle, $global_style_uri, array(), $style_version);
    
    // 为Gutenberg编辑器加载样式
    add_editor_style($global_style_uri);
}
// 前台钩子
add_action('wp_enqueue_scripts', 'enqueue_global_block_styles');
// 后台编辑器钩子
add_action('admin_enqueue_scripts', 'enqueue_global_block_styles');

原理：WordPress会根据样式的handle自动去重，只要注册时使用同一个handle，无论调用多少次只会加载一次。通过add_editor_style确保编辑器后台也能加载到样式。

方案2：用ACF钩子统一过滤区块参数，避免重复加载 #

如果已经给多个区块的block.json设置了style字段，不想逐个修改，可以用ACF的钩子统一移除该字段，再全局加载样式：

// 过滤所有ACF区块的注册参数，移除style字段
function filter_acf_block_style_setting($args, $block) {
    unset($args['style']);
    return $args;
}
add_filter('acf/register_block_type_args', 'filter_acf_block_style_setting', 10, 2);

// 全局加载样式
function load_global_block_styles() {
    $style_handle = 'global-block-styles';
    $style_uri = get_stylesheet_directory_uri() . '/style.css';
    $style_version = wp_get_theme()->get('Version');

    // 前台加载
    wp_enqueue_style($style_handle, $style_uri, array(), $style_version);
    
    // 后台编辑器加载
    if (is_admin()) {
        wp_enqueue_style($style_handle, $style_uri, array(), $style_version);
    }
}
add_action('wp_enqueue_scripts', 'load_global_block_styles');
add_action('admin_enqueue_scripts', 'load_global_block_styles');

优势：无需修改已有的block.json文件，通过钩子批量处理所有区块的样式设置。

方案3：拆分前台与编辑器样式，按需加载 #

如果需要区分前台和编辑器的样式（比如部分样式仅在编辑器预览中需要），可以拆分出单独的编辑器样式文件：

1. 用Tailwind配置生成两个样式文件：style.css（前台样式）和editor.css（编辑器专属样式）。
2. 在functions.php中仅前台加载主样式：

function enqueue_frontend_main_styles() {
    wp_enqueue_style('frontend-main-styles', get_stylesheet_directory_uri() . '/style.css', array(), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'enqueue_frontend_main_styles');

3. 在每个区块的block.json中仅指定编辑器样式：

{
  "name": "acf/hero-block",
  "title": "Hero Block",
  "category": "layout",
  "icon": "cover-image",
  "editorStyle": "file:./editor.css",
  "acf": {
    "mode": "preview",
    "renderTemplate": "blocks/hero-block.php"
  }
}

原理：WordPress会自动对相同路径的editor.css去重，不会重复加载；前台仅加载主样式，避免冗余。

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