Conditionally Loading JS and CSS only when a Block is Used

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


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:

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 );



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 ou 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:

EditorsKit, Gutenberg Block Editor Toolkit, CakeWP/block-options To je plugin za customizaciju. Ima odličnu foru sa “Better Custom CSS Class(es)": Huge improvement on Additional CSS Class(es) option! EditorsKit provides better UI with classes suggestions while typing. Powered with custom PHP filter, theme developers can include custom Utility Classes for more customization options.

Responsibe controls on basic core blocks + Block Styles for WordPress Try at

I need a linkable wrapper based on dynamic data

date 07. Oct 2022 | modified 19. Jan 2023
filename: Wordpress » Gutenberg » Conditionally Loading Block Assets