Dublin Library

The Publishing Project

New Gutenberg Features: Conditionally loading block assets

  • 1 min. read

 

One issue that I always found problematic with Gutenberg blocks is that it loads all assets all the time regardless of whether we use them in our projects or not.

As of WordPress 5.8, we can work around this to only load the blocks that are used.

We define our block as normal. When creating a block we can define separate scripts and stiles for the front and back end using code like the one below:

<?php
register_block_type( 'rivendellweb/test-block',
  array(
    'editor_script' => 'rivendellweb-test-block-script',
    'editor_style'  => 'rivendellweb-test-block-editor-style',
    'style'         => 'rivendellweb-test-block-style',
    'script'        => 'rivendellweb-test-block-frontend'
  )
);

If you then also specify a filter that will only load the blocks assets when the block is actually used:

<?php
add_filter( 'should_load_separate_core_block_assets', '__return_true' );

For more reference, see: Conditionally Load Block Assets, Part 3 and Block-styles loading enhancements in WordPress 5.8

Edit on Github