Help Request: Block Styles Are Loaded After Footer – Causing FOUC and CLS #66512

ZoomREI · 2024-10-27T12:57:32Z

ZoomREI
Oct 27, 2024

Hi everyone,

I'm facing an issue with my custom Gutenberg block plugin, and I could really use your expertise.

I am developing a plugin that registers multiple blocks. All of them are dynamic blocks that use render.php. Each block has its own CSS file, and I want the styles to load efficiently in the to avoid Flash of Unstyled Content (FOUC) and Cumulative Layout Shift (CLS). Strangely, only the CSS for blocks that are not present on the page are being correctly loaded in the <head>. The CSS for blocks that are used on the page are being appended after the footer, causing noticeable layout shifts during page load and I suspect also affect my loading speed negatively. I assume it has something to do with the render_callback cycle or something related.

Initially, I figured that WordPress might be loading CSS in the footer because it doesn’t know which blocks are used until the content is rendered. Therefore, I tried several approaches to force the CSS to load earlier:

Enqueuing CSS in wp_enqueue_scripts: I manually registered and enqueued all block styles during the wp_enqueue_scripts action to force them into the . This did not work—the styles were still appended after the footer.
Using register_block_type with style Parameter: I registered each block with its associated CSS file using the 'style' parameter in register_block_type. However, the same issue persisted—styles for blocks on the page still ended up after the footer.
Setting should_load_separate_core_block_assets Filter to true: I enabled this filter to ensure WordPress loads styles selectively, but the problem remains. It seems like the dynamic rendering of blocks might still be interfering with the timing of the CSS enqueuing.

What I Need Help With:

Is there a way to ensure the CSS for blocks present on the page is loaded in the instead of the footer, without disrupting the block rendering lifecycle?
Could this behavior be linked to how dynamic blocks or render callbacks interact with the block assets loading process?
Is there a known solution or pattern for this issue that ensures both efficient CSS loading and correct rendering of dynamic blocks?

Below is a sanitized version of my plugin’s PHP file.

<?php

/**
 * Plugin Name:       Custom Blocks
 * Description:       Custom Gutenberg blocks plugin.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * License:           GPL-2.0-or-later
 * Text Domain:       custom-blocks
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

function register_custom_blocks() {
    $blocks = [
        'block-1', 'block-2', 'block-3', // Example block slugs.
    ];

    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("custom-$block-style");
        }

        register_block_type(__DIR__ . "/build/$block");
    }
}
add_action('init', 'register_custom_blocks');

add_action('wp_enqueue_scripts', function () {
    wp_register_script('custom-inline', '', [], false, false);
    $loadScripts = file_get_contents(__DIR__ . '/utils/loadScript.js');
    
    if ($loadScripts !== false) {
        wp_add_inline_script('custom-inline', $loadScripts);
    }
    wp_enqueue_script('custom-inline');
}, 0);

add_filter('should_load_separate_core_block_assets', '__return_true');

Thank you very much in advance for any help or guidance. I look forward to hearing your thoughts and suggestions! 🙏🏼

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Help Request: Block Styles Are Loaded After Footer – Causing FOUC and CLS #66512

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Help Request: Block Styles Are Loaded After Footer – Causing FOUC and CLS #66512

ZoomREI Oct 27, 2024

Replies: 0 comments

ZoomREI
Oct 27, 2024