自定义Gutenberg区块样式加载于页脚后引发FOUC与CLS问题

问题原因解释（对应你的第2个问题） #

这个现象确实和动态区块的render_callback执行周期直接相关。WordPress对于动态区块的资源加载逻辑是：只有当区块实际渲染时（即render_callback触发时）才会入队关联的样式/脚本，而render_callback的执行时机通常在页面主体渲染阶段，晚于wp_head钩子的执行周期。这就导致动态区块的CSS会被追加到页脚，引发FOUC和CLS。

你之前尝试的几种方法失效的原因：

• 在init里直接入队CSS：会全局加载所有区块的样式，不管页面是否使用，不符合高效加载的需求；且如果后续WordPress在渲染动态区块时再次尝试入队同一样式，可能会被晚执行的逻辑覆盖加载位置。
• 使用register_block_type的style参数：动态区块下，WordPress会延迟样式入队到区块渲染时，同样错过wp_head时机。
• should_load_separate_core_block_assets过滤器：仅作用于WordPress核心区块，对自定义动态区块无效。

解决方案（对应你的第1、3个问题） #

要实现「仅加载当前页面使用的区块CSS+CSS在<head>中加载」的目标，可以通过提前检测页面是否包含目标区块，在wp_enqueue_scripts钩子中精准入队样式的方式实现，具体修改如下：

步骤1：修改区块注册逻辑，仅注册样式（不直接入队） #

function register_custom_blocks() {
    $blocks = [
        'block-1', 'block-2', 'block-3', // 你的区块slug
    ];

    foreach ($blocks as $block) {
        $style_path = __DIR__ . "/build/$block/style.css";
        
        if (file_exists($style_path)) {
            wp_register_style(
                "custom-$block-style",
                plugins_url("build/$block/style.css", __FILE__),
                [],
                filemtime($style_path),
                'all'
            );
            // 移除这里的wp_enqueue_style，只注册不加载
        }

        // 注册区块（如果你的区块是动态区块，确保render.php存在）
        register_block_type(__DIR__ . "/build/$block");
    }
}
add_action('init', 'register_custom_blocks');

步骤2：添加区块检测与样式入队逻辑 #

在wp_enqueue_scripts钩子中（设置优先级为1，确保在wp_head前执行），检测当前页面是否使用了目标区块，仅在存在时入队对应样式：

add_action('wp_enqueue_scripts', function() {
    $blocks = [
        'block-1' => 'custom-blocks/block-1',
        'block-2' => 'custom-blocks/block-2',
        'block-3' => 'custom-blocks/block-3',
        // 键：你的区块短slug；值：完整区块slug（命名空间+短slug）
    ];

    foreach ($blocks as $short_slug => $full_slug) {
        // 检测当前页面是否包含该区块
        if (has_block($full_slug)) {
            wp_enqueue_style("custom-$short_slug-style");
        }
    }
}, 1);

关键注意事项 #

• 完整区块slug：has_block函数需要传入完整的区块命名空间+slug，比如你的插件命名空间是custom-blocks，那么完整slug就是custom-blocks/block-1，必须准确匹配。
• 嵌套区块检测：如果区块是嵌套在其他区块内部，has_block依然可以检测到，无需额外处理。
• 性能优化：这种方式既保证了样式在<head>加载，避免布局偏移，又实现了按需加载，不会加载未使用的区块CSS。

备选方案：内联关键CSS（进一步优化FOUC） #

如果你的区块CSS中有影响首屏布局的关键样式，可以将这部分样式内联到<head>中，剩余样式异步加载：

add_action('wp_head', function() {
    $blocks = [
        'block-1' => 'custom-blocks/block-1',
    ];

    foreach ($blocks as $short_slug => $full_slug) {
        if (has_block($full_slug)) {
            $critical_css = file_get_contents(__DIR__ . "/build/$short_slug/critical.css");
            if ($critical_css) {
                echo "<style>$critical_css</style>";
            }
            // 异步加载剩余样式
            echo '<link rel="preload" href="' . plugins_url("build/$short_slug/style.css", __FILE__) . '" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">';
        }
    }
}, 10);

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