Categories
Gutenberg

Gutenberg Block Assets – How to Enqueue them the right way

I’ve recently started learning how to create custom Gutenberg blocks and this was my very first question. How do I enqueue my Gutenberg block assets?

I’ve recently started learning how to create custom Gutenberg blocks and this was my very first question. How do I enqueue my Gutenberg block assets?

Luckily we have two options.

Enqueueing our Gutenberg block assets with the filters

All classes I took were telling students to use the actions to enqueue their bundles but that may not be what you want to do.

Using the filters means that if you have many blocks you can bundle your JS/CSS in one file using your favorite bundler and enqueue it in one go.

The pro of doing this is that your site will only make one HTTP request for a bigger file.
The con is that your bundled files will load on all pages. Yes, even pages that do not have your block or pages that are not even using Gutenberg at all.

add_action( 'enqueue_block_editor_assets', 'fc_enqueue_block_editor_assets' );
function fc_enqueue_block_editor_assets() {
  // Enqueue assets for the editor.
  wp_enqueue_script( 'fc-sample-block-editor-js', get_template_directory_uri() . '/dist/js/editor.js', array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-data', 'wp-components' ), filemtime( get_template_directory() . '/dist/js/editor.js' ) );
  wp_enqueue_style( 'fc-sample-block-editor-css', get_template_directory_uri() . '/dist/css/editor.css', array(), filemtime( get_template_directory() . '/dist/css/editor.css' ) );
}

add_action( 'enqueue_block_assets', 'fc_enqueue_block_assets' );
function fc_enqueue_block_assets() {
  /**
   * This is optional. Files enqueued here will
   * load both on the front-end and on the editor.
   */
  wp_register_script( 'fc-sample-block-js', get_template_directory_uri() . '/dist/js/main.js', array( 'jquery' ), filemtime( get_template_directory() . '/dist/js/main.js' ), true );
  wp_register_style( 'fc-sample-block-css', get_template_directory_uri() . '/dist/css/main.css', array(), filemtime( get_template_directory() . '/dist/css/main.css' ) );
  
  wp_enqueue_style( 'fc-sample-block-css' );
  
  if ( ! is_admin() ) { // You may choose not to load your front-end JS in the editor like this.
    wp_enqueue_script( 'fc-sample-block-js' );
  }
}

Enqueueing our Gutenberg block assets with the register_block_type() function

The Block Editor Handbook tells us to use register_block_type() instead. This appears to be the future-proof way of doing it. With this function, you hook into init and register all your assets using wp_register_script() and wp_register_style() as usual. You then call the register_block_type() function and pass your handles to it.

add_action( 'init', 'fc_register_blocks' );
function fc_register_blocks() {
  wp_register_script( 'fc-sample-block-editor-js', get_template_directory_uri() . '/dist/js/editor.js', array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-data', 'wp-components' ), filemtime( get_template_directory() . '/dist/js/editor.js' ) );
  wp_register_script( 'fc-sample-block-js', get_template_directory_uri() . '/dist/js/main.js', array( 'jquery' ), filemtime( get_template_directory() . '/dist/js/main.js' ), true );
  wp_register_style( 'fc-sample-block-editor-css', get_template_directory_uri() . '/dist/css/editor.css', array(), filemtime( get_template_directory() . '/dist/css/editor.css' ) );
  wp_register_style( 'fc-sample-block-css', get_template_directory_uri() . '/dist/css/main.css', array(), filemtime( get_template_directory() . '/dist/css/main.css' ) );
  $args = array(
    'editor_script' => 'fc-sample-block-editor-js',
    'editor_style'  => 'fc-sample-block-editor-css',
    'style'         => 'fc-sample-block-css'
  );
  
  if ( ! is_admin() ) { // You may choose not to load your front-end JS in the editor like this.
    $args['script'] = 'fc-sample-block-js';
  }
  
  register_block_type( 'fc/sample-block', $args );
}

You may think that this will only load the assets if your block is present on the page but that is not the case. It behaves the same way as the other actions. The difference is that you are now loading separate bundles. Creating many HTTP requests for smaller files versus one bigger file.

So which one should I use?

It depends on your setup. Does your server support HTTP/2 yet? Can you enable it?

If you can then I would have individual files for each block and use register_block_type().

If your server does not support HTTP/2 then going the enqueue_block_assets way may be better. If we are going to load the files on all pages anyway then at least we save our users from making many HTTP requests.

By Fernando Claussen

Fernando Claussen is a WordPress developer who brings his front-end background to help businesses thrive. He began his development career in a small agency in Brazil working with the finest companies in Brazil that ranged from small shops to hotel chains. Fernando is especially known for his contributions to the Trew Knowledge team and the GDPR WordPress plugin.

Leave a Reply