Add: Border radius feature to button and update button styles.

[jorgefilipecosta]

Description

Closes: #16481

This PR refactors the button styles two contain two styles:
- Fill (default)
- Outline
It removes the squared style.
We add a new feature that allows changing the border-radius of a button.
We add a migration logic that migrates blocks with squared style into Fill style blocks with border-radius 0.

How has this been tested?

I checked the border-radius functionality works as expected.
I tested both styles work as expected.
I pasted the following code containing button blocks created with Gutenberg 6.4 into the code editor:

<!-- wp:button {"customBackgroundColor":"#a14b0e","customTextColor":"#13b87b"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="background-color:#a14b0e;color:#13b87b">xcxcx</a></div>
<!-- /wp:button -->

<!-- wp:button {"customBackgroundColor":"#c8651e","customTextColor":"#21b47e","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background" style="background-color:#c8651e;color:#21b47e">xcxcx</a></div>
<!-- /wp:button -->

<!-- wp:button {"customBackgroundColor":"#aa5a20","customTextColor":"#1b9b6c","className":"is-style-squared"} -->
<div class="wp-block-button is-style-squared"><a class="wp-block-button__link has-text-color has-background" style="background-color:#aa5a20;color:#1b9b6c">xcxcx</a></div>
<!-- /wp:button -->

I verified there was no invalid blocks warning and the editor converted the squared style block (last one) into a Fill style block with a border-radius of 0.

[karmatosed]

This works for me as per the issue's agreed direction.

One thought I have would be that as an iteration to consider the order of the panel. For example on a smaller size screen (13 macbook), I can't see without scrolling the border radius. I wonder if putting the following order would be better:

• Style
• Border radius
• Colors

That said, this isn't a blocker but more a suggested iteration.

[talldan]

It'd be great if a fixture could be added for this new deprecation:
https://github.com/WordPress/gutenberg/tree/master/packages/e2e-tests/fixtures/blocks

[talldan]

Actually, I was wondering if a deprecation is required. It seems as though the existing test fixture didn't fail.

[jorgefilipecosta]

Hi @talldan, you are right the existing test fixture did not fail that was the reason we used the isEligible mechanism, but deprecation ensures we migrate the previous style to a new style with a border-radius 0.

[jorgefilipecosta]

A fixture was added as suggested 👍

[youknowriad]

Nice one here, good job @jorgefilipecosta

[courtneylt]

Is there any way to disable "Border Settings" at a code level? I do not want my users to have the ability to alter the border radius of buttons; I want them to be restricted to the styles that I provide.

[JoshuaDoshua]

@courtneylt I think that would be the case for most theme developers. We put a great deal of work into keeping the WordPress admin "unbreakable" with regards to the style guide we provide and options like these make it difficult to work with Gutenberg

[aandrewjoyce]

Wondering if there's any update on at least setting a default border radius, or disabling user-control features like font, border radius, etc. A CSS custom property (e.g. --gutenberg-default-button-radius would at least allow theme developers to set something sensible)

[jorgefilipecosta]

Yes, I agree themes should have a way to set a sensible default value. As part of the global styles theme.json work I think that will soon be possible.