Client-Side Intermediate

Register Custom Block Variation

Extends the core Group block to create a pre-configured "Hero Section" available directly in the inserter.

index.js

Code snippet here

Result in Editor

Variations

Hero Section

Group block variation

Editor Canvas

The "Hero Section" now appears as a distinct option in the inserter.

How to Implement

Create the JavaScript file

Create a file named block-variations.js in your theme or plugin assets folder.

/wp-content/themes/my-theme/assets/js/block-variations.js

Enqueue the Script

Add this to your functions.php to load the script in the editor only.

add_action( 'enqueue_block_editor_assets', function() {
  wp_enqueue_script(
    'my-block-variations',
    get_theme_file_uri( '/assets/js/block-variations.js' ),
    [ 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ],
    filemtime( get_theme_file_path( '/assets/js/block-variations.js' ) )
  );
} );

Common Issues

Variation not showing in inserter?

Ensure your script dependency wp-blocks is included in the enqueue function. The script must load after the core blocks are registered.

Icons not appearing?

WordPress icons require the wp-element package if you are using JSX, or standard Dashicons strings if using vanilla JS.

Did this snippet work for you?

Help other developers by verifying this solution.