Implementing onSplit/onMerge in dynamic Gutenberg Custom Blocks

Question

Based on the use case that lead you to this, the answer is:

You don’t, that’s what block styles and variations are for.

Your entire block could be eliminated and replaced with this:

wp.blocks.registerBlockStyle(
    'core/paragraph',
    {
        name: 'bc-synopsis',
        label: 'Back Cover Synopsis',
    }
);

.is-style-bc-synopsis {
    // styling etc...
}

Benefits:

You can change your styling across the entire site at any time via CSS/SCSS
Gutenberg will provide BC Synopsis as an option for transforms/insertions, and even show previews in some cases
When the block editor UI gets updated your stuff will automatically migrate without breaking
This gives you options for tight integration with global styling, the stylebook UI, and theme.json
If you change themes or migrate the site, or the code that registers the style is removed accidentally, everything falls back gracefully to a standard paragraph styling so nothing is broken and data loss is avoided

Here’s one of the current style pickers in WP 6.4, there are more places in the UI to show this:

Variations

You also have the option of a block variation. This is when a block can have a variant with its own name, description, and icon, but preserves all the functionality of the original, while still showing in the block inserter as if it were an independent block.

For example this is how the core embed block works, there is no Youtube block or Facebook embed block, they’re all variations of core/embed and it’s the values of the attributes that determine which variation WP shows.

Registering a variant is very similar:

wp.blocks.registerBlockVariation(
    'core/paragraph',
    {
        name: 'bc-synopsis',
        title: 'Back Cover Synopsis',
    }
);

A General Note On Building Blocks

It’s tempting to build a brand new block for everything, this gets expensive and cumbersome but it’s unnecessary.

Most of these things can be decomposed into block patterns and block styles, you don’t need a hero image block when a cover block style and a heading block will work just as well and a block pattern makes it easy to insert.

Take this synopsis block as an example, as core improves things and adds new features you’re going to have to go back and update the block to enable these or things will feel super weird. Core is talking about adding collaborative editing in the near future, imagine your block doesn’t support part of the GUI without a code update? Consider how none of that matters if you used a block pattern or a block style and it all just worked for free.

There are situations where making a new block makes sense, but this isn’t one of them, not everything needs to be a new block.

Variations

A General Note On Building Blocks

Further Reading

Related Posts: