Consider allowing changing the default block style variation

[dgwyer]

Describe the bug
I'm trying to use registerBlockStyle() to register a custom block style variation for the core Button block and set it as the default style when a new Button block is inserted in the editor.

The result I'm currently getting is that the block style variation is available in block settings when the Button block is inserted, but it's not being set as the default.

To Reproduce
I'm adding the new block style variation via a Twenty Seventeen child theme using this code:
https://gist.github.com/dgwyer/fad8d4e5edfcd91cafc44b6a2b4a79d4

When the theme is active go to a page and add a Button block. The block style variation is available for selection but is not set as the default style.

Expected behavior
When the Button block is inserted into the editor the custom block style variation should be automatically set in block settings and in the inspector panel. Also the CSS class name should be automatically added to the Additional CSS Class text box in the inspector panel.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome v70

Additional context
I'm seeing the same behavior in Gutenberg v4.1.1 and v4.2.

[youknowriad]

That's probably because the block has already a default style variation. Why not just style the default variation in your stylesheet instead of adding a new one?

[dgwyer]

I'm testing out this feature as I'm currently writing a tutorial on block style variations.

According to the docs you can set the isDefault property to true to register the style variation to be active by default when a block is inserted.

This isn't currently happening as described by the docs. The isDefault attribute is effectively being ignored, hence the bug report.

Ideally you should be able to (re)set the default block style variation with the isDefault property even if one already exists in the block definition inside registerBlockType().

[Novalis80]

From the docs:

By adding isDefault: true, you can make registered style variation to be active by default when a block is inserted.

I am completely confused now. What is wrong, the implementation or the docs?

[samikeijonen]

I confirm that isDefault: true just doesn't do anything.

It also seems that we can't change the default block variation to square either. It doesn't make sense to change default CSS to square since the Style label is still Rounded. Well, that's what I'm doing at the moment but is there a way to fix this?

[gziolo]

With #11478 we clarified how isDefault works as of today:

By adding isDefault: true you can mark the registered style variation as the one that is recognized as active when no custom class name is provided. It also means that there will be no custom class name added to the HTML output for the style that is marked as default.

What else should be done to consider this issue resolved?

[Novalis80]

What else should be done to consider this issue resolved?

Hmm... confirm that it works according to the docs?

[samikeijonen]

I can test later on. But I still worry that Style label is still Rounded (current default from Core) even if I change the default via isDefault: true.

1. Set isDefault: true to button square style variant.
2. Add a new button.
3. Style label Rounded is still hightlighted, should be Square.

I'm going to test is that the case or not.

[youknowriad]

@samikeijonen That's not what isDefault is about. The docs have been updated to clarify its purpose.

[samikeijonen]

@youknowriad So basically it's another issue which I should open a new ticket?

[gziolo]

Yes, that would be the best approach to open a new issue which proposes changes you expect.