GradientPicker: Show custom picker before swatches #43577
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@jasmussen Now might be a good time to clean up these margins so they're logical and consistent with ColorPalette. Do you prefer a uniform value everywhere (16px?), or more space between the Type/Angle picker and the first swatch group?
|
4 tasks
|
Size Change: +2.52 kB (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
|
Nice one! Before, the gradient picker sat a bit randomly: Now it sits at the top:
This is consistent with where the custom color picker sits: On a separate note, it appears that "theme gradients" do not reflect in the gradient control at all. This is also an issue in trunk:
Not something to fix here, but are you aware of a ticket for this? Otherwise, happy to create one.
No time like the present! I put together the following visualization of how I see our spacings as they are establishing themselves across our various interfaces:
As a rule of thumb, I would think we follow those guidelines across most interfaces, including popovers. However there will likely be additional rulesets and exceptions in various places. Does that make sense? I'd love a sanity check from @WordPress/gutenberg-design 🙏 |
|
Thanks @jasmussen! I tightened the row gaps to a consistent 16px, and filed an issue for the theme gradient bug (#43715).
Column gaps are all over the place at the moment 😐 Recently in Typography tools we actually tightened them to 8px to match Pablo's Figma mockups. I'll leave them be for this particular PR, and maybe we can establish some solid guidelines as part of #43423. |
|
Thanks for the energy. I'm seeing this:
That is — I'm not seeing the 16px margin outside the tabbar as you have present in your screenshot. That's good, though: there shouldn't be additional margin above/left/right of the tabbar. Where did you take your screenshot? |
Hmm, I'm not sure what you mean by "16px margin outside the tabbar" 🤔 Here is a larger screen recording for more context: CleanShot.2022-08-31.at.21.06.42.mp4 |
|
My mistake, I was insufficiently caffeinated this morning. That video looks good! |
19 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of #43014
What?
Show the custom gradient picker before the swatches.
Why?
So they are more consistent with the ColorPicker for solid colors.
How?
The back compat behavior for
__nextHasNoMargin=falseis:clearable=falseTesting Instructions
npm run storybook:devand see the GradientPicker stories.npm run devand see the GradientPicker in the block inspector or Global Styles.Screenshots or screencast
CleanShot.2022-08-24.at.21.09.04.mp4