如何控制block.json中CSS在头部、JS在底部加载？

要实现你需要的CSS头部加载、JS底部加载需求，且仅针对这个特定的ACF产品滑块区块（不影响默认区块行为），可以通过WordPress的钩子系统调整资源入队逻辑，具体方案如下：

1. 将CSS调整至头部加载 #

WordPress默认会把通过block.json注册的区块样式加载到页脚，我们可以先取消该区块的默认样式入队，再手动在头部重新注册并加载：

方式1：硬编码路径（简单直接） #

添加以下代码到主题的functions.php文件：

add_action('wp_enqueue_scripts', function() {
    // 目标区块样式的自动生成句柄：block-前缀 + 区块名称的短横线形式
    $style_handle = 'block-acf-product-slider';
    
    // 取消默认入队的样式
    wp_dequeue_style($style_handle);
    wp_deregister_style($style_handle);

    // 重新注册并在头部入队样式
    wp_register_style(
        $style_handle,
        get_template_directory_uri() . '/path/to/your/block/css/product-slider.min.css', // 替换为你的实际文件路径
        array(),
        wp_get_theme()->get('Version') // 可选：添加版本号用于缓存刷新
    );
    wp_enqueue_style($style_handle);
}, 11); // 优先级设为11，确保在默认区块样式入队之后执行

方式2：通过区块元数据获取路径（更灵活） #

如果不想硬编码路径，可以通过get_block_metadata()读取block.json的配置：

add_action('wp_enqueue_scripts', function() {
    // 替换为你的block.json文件实际路径
    $block_meta = get_block_metadata(get_template_directory() . '/path/to/your/block/block.json');
    if (!$block_meta) return;

    $style_handle = 'block-' . str_replace('/', '-', $block_meta['name']);
    wp_dequeue_style($style_handle);
    wp_deregister_style($style_handle);

    wp_register_style(
        $style_handle,
        $block_meta['style'][0], // 直接从元数据中获取样式文件URI
        array(),
        wp_get_theme()->get('Version')
    );
    wp_enqueue_style($style_handle);
}, 11);

2. 将JS调整至底部加载 #

针对block.json中定义的脚本，我们可以通过两种方式将其移至页脚：

方式1：修改脚本加载属性（推荐） #

通过script_loader_tag钩子给目标脚本添加defer属性，确保脚本在页脚加载并延迟执行：

add_filter('script_loader_tag', function($tag, $handle) {
    // 匹配你需要调整的脚本句柄（对应block.json中的script数组项）
    $target_handles = array('product-slider.js', 'slick.min.js-js');
    if (in_array($handle, $target_handles)) {
        return str_replace('src', 'defer src', $tag);
    }
    return $tag;
}, 10, 2);

方式2：重新入队脚本到页脚 #

如果需要完全控制脚本的入队时机，可以先取消默认入队，再重新注册并指定页脚加载：

add_action('wp_enqueue_scripts', function() {
    $target_scripts = array('product-slider.js', 'slick.min.js-js');
    foreach ($target_scripts as $handle) {
        wp_dequeue_script($handle);
        wp_deregister_script($handle);

        // 重新注册脚本，最后一个参数设为true表示在页脚加载
        wp_register_script(
            $handle,
            get_template_directory_uri() . '/path/to/your/block/js/' . $handle, // 替换为实际文件路径
            array('jquery'), // 保持原依赖
            wp_get_theme()->get('Version'),
            true
        );
        wp_enqueue_script($handle);
    }
}, 11);

3. 禁用CSS内联输出 #

如果你的区块CSS被自动内联，可以通过以下钩子强制使用外部样式文件：

add_filter('block_type_metadata_settings', function($settings, $metadata) {
    // 仅针对当前区块生效
    if ($metadata['name'] === 'acf/product-slider') {
        $settings['style'] = $metadata['style'];
    }
    return $settings;
}, 10, 2);

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