Performance Matters

We define a method to automate the enqueuing of stylesheets for specific Gutenberg blocks in WordPress. By using the render_block filter, we can conditionally enqueue styles based on the type of block being rendered.

You can find the code in the /wp-content/themes/refact-starter/inc/style-hooks.php file.

Usage

/**
 * Add custom block styles
 */
function refact_custom_block_styles() {
  $theme_version = defined( 'THEME_VERSION' ) ? THEME_VERSION : '1.0.0';

  // Array of block names and corresponding CSS file names
  $block_styles = array(
    'core/button' => 'button.css',

    // Add more block styles here
    // 'block/name' => 'filename.css',
  );

  foreach ( $block_styles as $block_name => $style_file ) {
    $args = array(
      'handle'  => 'refact-starter-' . str_replace( '/', '-', $block_name ),
      'src'     => get_theme_file_uri( "assets/styles/blocks/$style_file" ),
      'ver'     => $theme_version,
      'path'    => get_theme_file_path( "assets/styles/blocks/$style_file" ),
    );
    wp_enqueue_block_style( $block_name, $args );
  }
}
add_filter( 'after_setup_theme', 'refact_custom_block_styles' );

As illustrated in the code above, we check if the core/button block exists on the page and then enqueue the button.css file. You can add more conditions for different blocks by following the same pattern.