Not possible to undo a block style

[swissspidy]

Is your feature request related to a problem? Please describe.

If a block only has a single block style, it's not possible to remove that block style after you've selected it. You always need to add some sort of "default" style as well.

For example, I added a new "Pretitle" style for paragraphs like so:

registerBlockStyle( 'core/paragraph', {
	name: 'pretitle',
	label: 'Pretitle',
} );

When I now write some text, everything works as usual. Once I choose the "Pretitle" stye, it will be styled a bit differently. But after that, there's no way for me to undo this selection.

I tried things like clicking on the selected style again in the hopes that this would remove the style again, but with no lock.

That means I need to register a default style that I can switch back to:

registerBlockStyle( 'core/paragraph', {
	name: 'default',
	label: 'Default',
} );

This second style would not be styled by me or anything because it should keep the default styles of the editor/theme.

Describe the solution you'd like

If I add a style variant to a block which hasn't had one before, a default style option could be added automatically in the background.

Alternatively there could be a "Reset style" button or something that would restore the default block style.

[youknowriad]

Thanks for raising this and yes this is exactly what the "isDefault" flag is for. You basically register a custom style with isDefault: true to "name" the default style, it won't apply any className.

If I add a style variant to a block which hasn't had one before, a default style option could be added automatically in the background.

I agree this could be improved and I like this solution.

[swissspidy]

I agree this could be improved and I like this solution.

Added a PR in #12519.

[annestk]

Temporary workaround for anyone experiencing this issue: Removing is-style-something from the input field at Block Settings > Advanced > Additional CSS Class will reset the block style

[nickfmc]

Also worth noting you can only use 1 class name when registering a style for the default to clear. if you use the below code you will get is-style-my-button

wp.blocks.registerBlockStyle("core/button", {
        name: "my-button",
        label: "myButton"
      }); 

However if you used the below code even though your classes would be applied as is-style-my-button and u-block , the next time you click on a style it would append another is-style-my-button to the classes. so you end up with ( is-style-my-button u-block is-style-my-button) Not sure if you should be able to register a style with multiple classes to me it seams to make sense for a lot of people.

wp.blocks.registerBlockStyle("core/button", {
        name: "my-button u-block",
        label: "myButton"
      });