3

Assuming I have no infinite scroll or anything else going on in my theme: Is there a way to enqueue my custom Gutenberg block styles and scripts so they are only (lazy) loaded in the front-end when the block is really used? Something like is_active_widget, just for blocks?

If I enqueue them inside a enqueue_block_assets function they're added to any site.

On github, I found this https://github.com/WordPress/gutenberg/issues/5445 , but it sounds like it's more on bundling than conditional load, so I still hope they didn't leave that optimization opportunity out - otherwise any other site will soon be junked with 20 additional scripts from numerous Gutenberg block plugins people install and only use once on a page (think of large image gallery block scripts for example).

Thanks & Regards!

2

Well, the styles and scripts you register in your php register_block_type call should only be loaded when the block is in use if i recall correctly.

If you want to load additional scripts or styles to be enqueued only if there is a block of type "my-awesome/block-type", you can use the has_block function in your wp_enqueue_scripts function like this:

add_action('wp_enqueue_scripts','enqueue_if_block_is_present');

function enqueue_if_block_is_present(){
  if(is_singular()){
     //We only want the script if it's a singular page
     $id = get_the_ID();
     if(has_block('my-awesome/block-type',$id)){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,$load_in_footer);
     }
  }
}

If you also want the script to be loaded on multiple views as well (like category archive or the blog page), you can hook into the the_content filter and enqueue the script there:

add_filter('the_content','enqueue_my_awesome_script_if_there_is_block');

function enqueue_my_awesome_script_if_there_is_block($content = ""){
  if(has_block('my-awesome/block-type')){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,true);
   //Be aware that for this to work, the load_in_footer MUST be set to true, as 
   //the scripts for the header are already echoed out at this point
     }
   return $content;
}

Happy Coding!

1

Thanks @kuchenundkakao for pointing me into the right direction. I'm still answering my own question as I want to give some more context for others that may stumble upon this.

So, there are several ways to load your custom blocks, mainly:

While registering the block in PHP (like described in the handbook) is the default method and future proof, the enqueue_block_assets variant can load multiple blocks without the need to split your blocks into seperate files and define them again in PHP. "create_guten_block" for example merges any number of blocks into three files by default (blocks.build.js, blocks.editor.build.css and block.style.build.css).

Both ways do not conditionally load styles (yet).

When using the create_guten_block method, enqueue_block_assets, and only having a single block defined (or set up to split the files per block), the conditional loading can be added using has_block:

    function my_awesome_blocks_cgb_block_assets() {
      if (is_singular()) {
        $id = get_the_ID();
        if (has_block('my-awesome/block-type', $id)) {
            wp_enqueue_style(
              'my-awesome_blocks-cgb-style-css',
              plugins_url( 'blocks/dist/blocks.style.build.css', __FILE__ ),
            );
        }
      }
    }
    add_action( 'enqueue_block_assets', 'my_awesome_blocks_cgb_block_assets' );

You can combine register and conditional loading by leaving out the style / script parts in the register and load the according fontend files with enqueue_block_assets as in the code above.

The future proof method will be using register_block_type, as the script and style fields of it will most likely be used if conditional loading is ever implemented natively (see comment here).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.