Colors: Fix color button border radii #55207
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
ciampo
added
[Type] Bug
|
Size Change: +38 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in ec58571. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6480927691
|
There was a problem hiding this comment.
Thanks for the alternative approach here @ciampo 👍
It tests pretty well in general but fails to address the issue for me in Firefox, unless you toggle on the layout.css.has-selector flag via about:config.
✅ Chrome
✅ Safari
✅ Edge
✅ Opera
🔴 Firefox
I've proposed some tweaks that have the solution working across all browsers for me and are arguably easier to grok for newcomers to the code.
Let me know what you think
Comment on lines
+187
to
+188
| shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder, | ||
| ! shouldApplyPlaceholderStyles && className, |
There was a problem hiding this comment.
Nice solution! 👍
This was the key I was missing in #55071 to avoid the internal class name.
packages/block-editor/src/components/colors-gradients/style.scss
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/colors-gradients/style.scss
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/colors-gradients/style.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Nice attention to detail here, and good discussion, folks!
I quite like Aaron's suggestion of &:nth-last-child(1 of &) { and avoiding :has() where possible, and this PR is testing nicely for me with that change added in locally. Though it's probably not too big an issue if there are gentle / not particularly obvious fallbacks for FF, if we can avoid introducing :has() then hopefully we can help avoid folks accidentally using it in situations where the fallback wouldn't be quite so subtle.
Separately, I can't wait until FF supports it properly! 😄
packages/block-editor/src/components/colors-gradients/style.scss
Outdated
Show resolved
Hide resolved
ciampo
force-pushed
the
fix/color-panel-item-radii
branch
from
a5505d3 to
85f1db9
Compare
|
Thank you both for your suggestions! I've replaced the CSS selectors with the ones suggested by @aaronrobertshaw . Things are looking good on my end, so hopefully we should be able to merge this one soon!
That should be very soon (in the next release, I think!) So only a matter of time until we can start using it in the project 🤞 |
aaronrobertshaw
approved these changes
Oct 11, 2023
There was a problem hiding this comment.
Things are looking good on my end, so hopefully we should be able to merge this one soon!
LGTM as well.
The border radii are applied correctly in Chrome, Safari, Firefox, Edge, and Opera for me.
Thanks for iterating here @ciampo 👍
|
While working with the design tools today, I spotted a weird layout issue with the color panel that appears to have been introduced through this PR. Screen.Recording.2023-11-23.at.6.56.26.pm.mp4Unfortunately, I ran out of time to find a proper solution to this, so I've created an issue: #56470 |
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.
Fixes #55051
Alternative approach to #55071
What?
Applies the intended border radii to the last color item regardless of whether additional controls have been injected into the colors panel.
Why?
The details matter.
How?
There are 2 main aspects to this solution:
ToolsPanelItemcomponent has been slightly tweaked, and it now applies the givenclassnameonly when the item is not being rendered as a placeholderfirstandlastclassnames, this PR leverages a combination of the subsequent sibling selector (~),:has()and:not()to limit the first/last item logic to only the items that need to receive the border radius tweaks.NOTE: The
has()selector has decent support, but at the time of writing it's not yet supported by all evergreen browsers (I'm looking at you, Firefox). While Firefox should include support in the next release, i decided to maintain the older (suboptimal) solution as a fallback for when:has()is not supported.Testing Instructions
Testing Instructions for Keyboard
Changes are visual only.
Screenshots or screencast