Add 'squared-outlined' button style to Button block

[ramizmanked]

Is your feature request related to a problem? Please describe.
We are not able to create squared-outlined button style using Button block

Describe the solution you'd like
One should able to generate squared-outlined style button. I tried adding "is-style-squared is-style-outline" to the 'Additional CSS Class' field in Gutenberg sidebar and I'm able to see squared-outlined style button (see the screenshot below).

[ramizmanked]

Hi @mtias

Thanks for the review and moving this PR to Future: 5.1 milestone.

Attaching updated screenshot of latest WordPress version so the design team will have better idea.

[brentswisher]

I started working on this and ran into a small issue I could use some feedback on.

I added the new style, which uses the class .is-style-squared-outline, and updated the corresponding css to style it as desired. This works great in all the default themes except TwentyNineteen which uses :not(.is-style-outline) to set the background color, resulting in overriding the outline portion of this

I see two options:

1. Leave the class as is and update the TwentyNineteen Theme to get rid of the :not() logic
2. Update the editor to add both of the existing classes .is-style-squared and is-style-outline which would prevent it from breaking in TwentyNineteen

My preference is option 1, becasue I think :not(<some specific class>) is a pretty fragile way to write that css, so it would be better to clean it up anyways. I just wasn't sure about the logistics of tying this fix to something that needs to be updated first in a theme.

Should I just make an issue in trac with a fix to TwentyNineteen and leave a note here not to merge until that change is in as well?

My changes so far can be seen at https://github.com/brentswisher/gutenberg/tree/add/button-squared-outline-style if you need.

Edit: Fix formatting

[joyously]

Seems like square should be the default and rounded should be a class with border-radius. And styling the border-radius should be independent of the background-color. So to get round and outline, it would be class="rounded outlined" or whatever the names are. Same for class="square outlined" or just class="outlined".

[melchoyce]

I’m of two minds:

1. Cool, let’s do it!
2. Maybe instead, the style should be whether the button is filled out outlined, and border radius should be a setting in the sidebar.

[mapk]

I like the idea of moving border-radius to a setting in the Inspector. But with this setting move, there should also be a way to adjust it as a global setting so I don't have to edit the border-radius for every button on my site.

Definitely out of scope of this issue. So I think a way forward with this is to add an outlined square button to the mix as suggested here and create a new issue/PR for moving border-radius into a setting.

[karmatosed]

As this has sat for a while, would considering border radius as an option and reduce all buttons, be just as rapid a path? I note that this issue #16481 now exists and therefore closing this, focusing on that would be my recommendation.