Gutenberg: Add option to remove Border Radius on Button

[monika-12]

Enhancement Overview

I am editing the content and want to add the button without border radius but there is no option to remove border radius so there should be option to remove border radius.

Steps to Reproduce (for bugs)

1. Insert Button Block
2. No option to remove border radius

Expected Behavior

There should be option to remove border radius.

Screenshots / Video

[youknowriad]

This looks like theme territory for me, can't you add this styling to your theme instead?

[monika-12]

If user have no idea about theme styling then this block is not usable for him. I think default border radius is not so good option. Let's think over it what will be the better solution for it.

[ghost]

I'm just helping out a designer to get their themes gutenberg-ready, so here is what she says:

Markup and classes used by this button are gutenberg-specifc, so no "old" theme will see it's button styling applied. Styling a button is not trivial.

The currently used layout with full-color background and rounded corners will break the visual appearance of many themes, escpecially the 'minimalistic' ones.

Her suggestion with 3 options:

a) use transparent background with border (color same as text, default) vs use full color background
b) use rounded corner or not (default)
c) use hover effect (reverse background/border options on hover, default) or not.

The default color should be the themes link color.

[karmatosed]

I would close this for now as up the theme.

[coreyworrell]

How can that field be removed in the Editor? I know theme can override CSS style, but how can one disable the field so that an editor cannot set the radius in the first place?

[jamiemitchell]

How can that field be removed in the Editor? I know theme can override CSS style, but how can one disable the field so that an editor cannot set the radius in the first place?

Agreed, a filter to disable these little editor settings like the border radius slider, background color pallet on buttons and many others would be highly beneficial.

[dougwollison]

Nearly all the sites I build have strict style guides with, among other things, specific button styles. Usually they consist of only a few styles, like a square cornered one and a semi/fully rounded one. Letting the client set a custom border radius on any button will mess with our design. I could simply add a border-radius:0 !important rule to my stylesheet, but that may confuse/frustrate the client when they try manipulating a setting they think they can use and see it doesnt work.

At the absolute minimum, I should be able to target and display:none that particular panel. Ideally there should be a way to declare that buttons don't support a border radius, either as one of those disable-* theme supports like with disable-custom-font-sizes, or something in JS like unregistering a block style.

The only other solution I can think of right now is to literally roll my own copy of the Button (and Buttons) blocks without these panels in the edit render.

@karmatosed I agree this should be up to the theme to remove but there needs to be a way to actually remove the interface and not just the effect.

[chrisvanpatten]

Can you try using unregister_block_style and register_block_style to remove the default style and register a new one in its place?

[dougwollison]

Can you try using unregister_block_style and register_block_style to remove the default style and register a new one in its place?

Oh sorry, I just realized how old this thread is. The border radius is no longer a block style but a setting on the button block, as a slider from 0 to 50px.

I guess this should be opened up as a new issue.

[cjaredm]

Doug made an issue here, if any of you are looking for it. https://github.com/WordPress/gutenberg/issues/19796