Better block style registration : organize and create styles by category

[LeoSeyers]

What problem does this address?

As a custom theme developer, I'd like to give editors a finer control on how they control margins to give them a great tailor-made editor experiences.

Many time lately I've asked to add additional option controls for margins and I've done it in two different ways :
– By registering block style (wp.blocks.registerBlockStyle) : e.g I can register a 'no-margin' or 'lg-margin' preset and add styles accordingly both in the editor and the frontend. This becomes tricky when they want a more granular controls for both top and bottom margins (but potentially side margins, padding, you name it).
In addition to that, I struggle to control the style preview and would prefer to disable the style image preview rather than having something irrelevant (= decreasing cognitive load). Also styles are already registered for other things which can quickly become messy if you have a lot of them so that would help to organize them by category.
– By adding custom classes : this is a bulletproof approach but not an ideal experience for editors

What is your proposed solution?

Currently I love how we can extend native Gutenberg appearance with registerBlockStyle method, it is simple and effective to controls how the blocks look with the help of CSS classes.

Now, let's say with we want to extend our Columns block with upper and lower margins options (let's say 4 presets : xs, sm, md, lg) + multiple gutter options, that would be nice if you could do something like this :

  wp.blocks.registerBlockStyleCategory( 'core/columns', {
    name: 'upper-margin',
    label: 'Upper Margin',
    preview: false, // disable image preview if neeeded
    display: 'select'  // switch style layout to a select list to better organize space
  } );

  wp.blocks.registerBlockStyle( 'core/columns', {
    name: 'sm',
    label: 'Small margin',
    category: 'upper-margin', // set style to category
  } );

If editor were to choose this style, a is-style-upper-margin-sm would be added to the block.

[talldan]

@LeoSeyers Thanks for reporting this. There's an existing discussion about the same thing - #14598. I would definitely recommend adding the details above as a comment there.

It seems like there's also a bit of overlap between the proposals for the theme.json / global styles features and this, especially when it comes to controlling aspects of a block like margin. I think block styles were intended more changing the visual appearance of a block at a higher level rather than individual css properties. So it might be that there are other editor features in the works that might also interest you.

Some high level issues worth reading (although they're quite long):

• 🖍 A Block Style System #9534
• Continuation of Block Style Variations #7551