Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kwight opened this issue Sep 26, 2019 · 15 comments
Closed

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

kwight opened this issue Sep 26, 2019 · 15 comments
Labels
[Block] Buttons Affects the Buttons Block Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@kwight
Copy link

kwight commented Sep 26, 2019

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
Screen Shot 2019-09-25 at 6 51 20 PM

@karmatosed karmatosed added the [Type] Bug An existing feature does not function as intended label Sep 26, 2019
@karmatosed
Copy link
Member

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
Copy link
Member

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

image

@karmatosed karmatosed added the Needs Design Feedback Needs general design feedback. label Sep 26, 2019
@mapk
Copy link
Contributor

mapk commented Apr 7, 2020

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

Screen Shot 2020-04-07 at 9 05 56 AM

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

@mapk mapk added Needs Testing Needs further testing to be confirmed. and removed Needs Design Feedback Needs general design feedback. labels Apr 7, 2020
@paaljoachim
Copy link
Contributor

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.

Screen Shot 2020-04-07 at 18 08 56

@karmatosed
Copy link
Member

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

@youknowriad youknowriad reopened this Apr 9, 2020
@youknowriad
Copy link
Contributor

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.

@youknowriad youknowriad added [Block] Buttons Affects the Buttons Block and removed Needs Testing Needs further testing to be confirmed. labels Apr 9, 2020
@mapk
Copy link
Contributor

mapk commented Apr 14, 2020

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

@mapk
Copy link
Contributor

mapk commented Jul 27, 2020

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

radius1

Twenty Twenty theme

radius2

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

@paaljoachim
Copy link
Contributor

paaljoachim commented Jul 28, 2020

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?

@mapk mapk added the Needs Dev Ready for, and needs developer efforts label Jul 29, 2020
@stokesman
Copy link
Contributor

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 talldan changed the title Button Block: Initial border radius value is missing. Button Block: Initial value doesn't reflect actual border radius Nov 24, 2020
@talldan
Copy link
Contributor

talldan commented Nov 24, 2020

I've closed #27218 as a duplicate and re-titled this to reflect the recent conversation on the issue.

@paaljoachim
Copy link
Contributor

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
Copy link
Contributor

gwwar commented Apr 8, 2021

I tested this in Gutenberg trunk and I'm still seeing this issue:
Screen Shot 2021-04-08 at 12 00 11 PM

@stokesman
Copy link
Contributor

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.

@stokesman stokesman removed their assignment May 4, 2021
@paaljoachim
Copy link
Contributor

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:

Buttons-block-border-radius-starts-blank.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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants