Fix design of color/gradient controls in editor panel #26255
Conversation
stokesman
changed the title
- switch label position to side on control for gradient type - use flex blocks to wrap type and angle controls
for CircularOptionPicker - restore default horizontal spacing as equal to vertical - improve accuracy of negative margin swatch wrapping correction - drop a purposeless rule for PanelColorGradientSettingsInner - create media query bound optimization for six swatches per line
stokesman
force-pushed
the
fix/color-gradient-panel-design
branch
from
c2d2a6d to
f23a398
Compare
stokesman
requested review from
ajitbohra,
chrisvanpatten,
ellatrix and
youknowriad
as code owners
|
CC @jasmussen and @ItsJonQ because of their work in #23802 |
There was a problem hiding this comment.
This is a good one.
Before:
After:
I was worried that the "Type" label would be vastly longer in german or other languages, though it appears that particular phrase hasn't yet been widely translated. So I manually found the longest version of "Type" that I could on Google Translate, and even in (what I hope is) Malay it works:
Well done. And thank you.
I would love for this to get a few more code-review eyes before merge, but from what I can tell, this is solid, including the code. Nice little win.
There was a problem hiding this comment.
🚀 from me! Great use of the Flex components @stokesman . That 5/4 combo is an interesting one! :)
|
Thanks for reviewing Joen and Jon! |
#23802 had a lot of good improvements and this follows up on that addressing three issues.
Since it was merged the default position of labels in
SelectControlchanged SelectControl: Fix labelPosition #25427, throwing the alignment off inCustomGradienPicker.The change to make the swatches align on the right side with their neighboring controls CustomGradientPicker: Update Type and Angle controls #23802 (comment) currently only works when there is no scrollbar on the settings sidebar and can be improved to work with or without scrollbars.
The "dial" of the
AnglePickerControlwas able to push out of alignment (to the right) when the settings sidebar has a scrollbar.All of the above can be noted in the "before" screen capture below.
After screen recording comparing settings sidebar with and without overflow
Before screen recording comparing settings sidebar with and without overflow
An aside is the
AnglePickerControlgets a default label which according to its readme it already had.How has this been tested?
Wordpress 5.5.1, Chrome 85
Resolutions from 280 to 1440.
Types of changes
Non-breaking design fixes
Accessibility fix
Checklist: