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

GradientPicker value gets cut off in block editor sidebar Popovers #45781

Closed
chad1008 opened this issue Nov 15, 2022 · 1 comment · Fixed by #49046
Closed

GradientPicker value gets cut off in block editor sidebar Popovers #45781

chad1008 opened this issue Nov 15, 2022 · 1 comment · Fixed by #49046
Assignees
Labels
[Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended

Comments

@chad1008
Copy link
Contributor

Description

When using an AnglePickerControl to adjust a value like the angle of a gradient, the value displayed for the current angle gets cut off if it's more than two digits long, when you'd expect the entire numerical value to remain visible.

This isn't reproducible in Storybook when viewing GraidentPicker directly - it appears to be a result of the padding applied by the clock editors color selection component.

Step-by-step reproduction instructions

  1. Create a new post or page
  2. Create a new paragraph block
  3. In the block settings, edit the background color
  4. Select the Gradient tab
  5. Use the GradientPicker control to change the angle to any value with three digits

Screenshots, screen recording, code snippet

Screen Shot 2022-11-14 at 14 34 35

Environment info

WP 6.2-alpha-54791
GB 14.5.0
Chrome 107.0.5304.110

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@chad1008 chad1008 added [Type] Bug An existing feature does not function as intended [Package] Block editor /packages/block-editor labels Nov 15, 2022
@mirka
Copy link
Member

mirka commented Nov 17, 2022

Good catch! I think the direction we'll go is to first update the swatches to be the new 20px size (#43014), and then increase the popover width to accommodate 8 swatches in a row. This should allow more space so the AnglePickerControl fits 3 digits without overflowing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
4 participants