Button Block: Initial value doesn't reflect actual border radius

[kwight]

Describe the bug It feels odd to see the button border radius slider without an initial value, or to have a modified value disappear when hitting the Reset button. Is there any reason why we wouldn't want the 5 value displayed?

To reproduce Steps to reproduce the behavior:

1. Add a button block.
2. Open the sidebar and Border Settings.
3. Notice the empty value for the slider.

Expected behavior I'd expect to see the initial value of 5.

Screenshots

[karmatosed]

I know there were reasons for not showing this but for me, it feels like a bug now and something to fix. I also feel this in reviewing.

[karmatosed]

Related, I would love to show defaults of all, for example the height on cover image:

[mapk]

I just tested this with the new Buttons block. The radius showed 0 so I think we're good.

In today's triage meeting in Slack, it appears this may need more testing.

[paaljoachim]

In a local test site running Twenty Twenty using Gutenberg version 7.8.1 in Chrome.

I see this just after adding a Buttons Block.

[karmatosed]

Let's close this as seems it's now resolved.

[youknowriad]

I'm opening this as now, the border radius is shown as "0" no matter the actual block radius applied by default by the theme (without editor styles the button is rounded and in 2019 for instance, it has a small radius applied).

I personally prefer having the value "unset"/"empty" over having a "0" value.

[mapk]

Good catch. Ideally the radius value reflects the button's radius from the gitgo.

[mapk]

This appears to still be happening except the RangeControl for the Buttons block now defaults to 5 without any regard to what the actual button border radius is.

Gutenberg-starter-theme

Twenty Twenty theme

@youknowriad, how soon can we get some dev time on this one?

[paaljoachim]

The default Border radius should start with a value of 0 or empty value showing a square button. As one begins to move the slider or adds a number the button reflects the change.

Should we add the "Needs Dev" label?

[stokesman]

I've looked into this and the only solution I've thought up was to use the DOM to detect the default #25720. If anyone cares to give that branch a spin or comment on the approach, that'd be rad.

Otherwise, I guess that the border-radius value may potentially be defined in theme.json but I'm still learning about that. Also seems like this issue is more about having a current/backward compatible solution.

[talldan]

I've closed https://github.com/WordPress/gutenberg/issues/27218 as a duplicate and re-titled this to reflect the recent conversation on the issue.

[paaljoachim]

A Gutenberg plugin support forum comment: https://wordpress.org/support/topic/button-link-blocks-broken/

"The Border setting>Border radius control is not loading with the value of 0. When I add a new button block, the setting is at 5. It should be at 0 because the block added to the page has a border radius of 0.

When I change the value using the bar, and the radius visibly changes. When I hit reset the radius changes back to a value of 5 but the shape of the radius reflects a radius with a value of 0."

[gwwar]

I tested this in Gutenberg trunk and I'm still seeing this issue:

[stokesman]

I'd made #29193 for this but now that the Button block’s border radius UI is provided by the block supports hook, it's no longer applicable. It could, I think, be redone to work even now but the alternative resolution for this #29210 is simpler and a definite improvement over what we have now (though it is apparently how things were when this issue was opened).

If we want to implement the intent of this issue, I think it would be best done with some changes to other APIs to help support it. Allow/recommend that themes register a default value and unit for button border radius. Also if the theme (or other plugins) register style variations for the buttons block those too should include their border radius value and unit. Otherwise (as in my PR) the radius has to be detected with getComputedStyle which can work quite well but has some limitations (mainly that the value will always come back in pixels), and to cover all edge cases there's a need to redetect after any resizes.

Really my hope would be that global styles will alleviate any desire for this control to do more.

[paaljoachim]

Retesting using Gutenberg plugin version 11.0.0 Twenty Twenty One (with a white background) WP 5.8 RC-2

This is what I see:

https://user-images.githubusercontent.com/5323259/125124246-15f7ba80-e0f8-11eb-9baf-ae60de72aaa8.mp4

The radius begins at blank as in no value. To me it looks like this issue has been solved.

I will go ahead and close the issue. We can of course reopen if I am mistaken.