CodeVoyager

Conditionally Loading JS and CSS only when a Block is Used

Edit Page

Conditionally Loading JS and CSS only when a Block is Used

Native block library

Important source of information is Block-styles loading enhancements Optimizing the loading of block styles in WordPress 5.8 • WordPress Help Blog

We are introduced to:

  • should_load_separate_core_block_assets
  • styles_inline_size_limit with the default limit od 20kb inline assets (default: 20000)
add_filter( 'should_load_separate_core_block_assets', '__return_true' );
filter( 'styles_inline_size_limit', '__return_zero' );

WordPress will not load block-library/style.css file which contains all the styles for every native block, but much smaller block-library/common.css file which only contains generic common styles. Styles for any specific block will only load if it’s in use on the current page.

In connection to that, Leveraging theme.json and per-block styles for more performant themes

x

Option to disable default block styles

It should be noted that page content is not the only area where blocks can be used. WordPress also has widget-area editor and users are able to add blocks inside a widget area. Checking the_content in that case won’t be enough. Read the following comment about that.

Parsing both the_content and widget_block before wp_enqueue_scripts seems like something worth exploring.

Using render_block

Inject the stylesheets in the content, right before the first instance of a block:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

add_filter( 'render_block', function( $html, $block ) {
    static $rendered_styles = [];
    if ( isset( $block['blockName'] ) && ! in_array( $block['blockName'], $rendered_styles, true) ) {
        $stylesheet = "assets/blocks/{$block['blockName']}.css";
        if ( file_exists( get_theme_file_path( $stylesheet ) ) ) {
            echo '<style>' . file_get_contents( get_theme_file_path( $stylesheet ) ) . '</style>';
            $rendered_styles[] = $block['blockName'];
        }
    }
    return $html;
}, 10, 2 );

custom-blocks-frontend-styles?

styles_inline_size_limit

Inlining small stylesheets can be disabled just by adding add_filter( ‘styles_inline_size_limit’, ‘__return_zero’ );

wp_deregister_style( 'wp-block-gallery' );
wp_register_style( 'wp-block-gallery', $src, ... );

Explained option to disable default block styles

What about JavaScript?

For core blocks, the scripts are loaded even when not using some block. The optimizations applied to CSS are not yet applied to JavaScript; that is a work in progress and will land at some point. Read here

Not really answers:

plugin development - How to only load css for used blocks on frontend - WordPress Development Stack Exchange

render_block technique

How to only print styles for Gutenberg Blocks used on a page – Ari Stathopoulos

Block-styles loading enhancements in WordPress 5.8 – Make WordPress Core

In a block theme, all blocks are parsed before the . What that means, is you can hook in render_block, and enqueue your script if the block exists. Equivalent to has_block for use in templates · Issue #38120 · WordPress/gutenberg

How to Conditionally Load JavaScript for Gutenberg Blocks — Rich Tabor

When creating new custom block, we can use the following techniques:

Responsibe controls on basic core blocks + Block Styles for WordPress Try at https://blockstylesdemo.instawp.link/

I need a linkable wrapper based on dynamic data

Exploring Per-Block Stylesheets in WordPress Block Themes

Vrlo interesantan plugin od omiljenog autora. Omogućava podešavanje kako loaduješ CSS za svaki core block, a mislim da čak možeš i da override-uje, ali pošto je dosta star, izgleda da ne gasi nikako loadovanje originalnih stilova pa opcije “Inline On Demand” i “Remove Styles” mislim da ne rade. Block Styles repo at aristath/block-styles

date 07. Oct 2022 | modified 29. Dec 2023
filename: Wordpress » Gutenberg » Conditionally Loading Block Assets
Article Content