-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
SpacingSizesControl: Fix white dot on thumb #48574
Conversation
Size Change: -31 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
This tested well for me. @mirka, @ciampo although we are trying to avoid these fixed classnames in components, but for this component we already have If we need to avoid adding this classname we could instead use: .components-range-control__wrapper.is-marked > :nth-last-child(2) {
z-index: 3;
} but that seems just as flakey, and not as easy to track down this mod as a search for a classname. What do you think? |
Yes, unsanctioned style overrides are fragile no matter what the implementation is. I agree that a classname is the lesser of all evils because they're at least searchable 👍 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚢
Thank you for the review, @glendaviesnz, @mirka! |
* SpacingSizesControl: Fix white dot on thumb * Update changelog
I just cherry-picked this PR to the wp/6.2 branch. |
What?
This PR fixes the white dot that appears on the handle in the
SpacingSizesControl
component.Why?
The following style is applied to this handle in order to place it in front of the track separator:
gutenberg/packages/block-editor/src/components/spacing-sizes-control/style.scss
Lines 129 to 131 in 3faa015
This style is applied when the Gutenberg project is running in dev mode. This is because when in dev mode, the class name will be generated automatically by the autoLabel option of
@emotion/babel-plugin
. However, when bundled with the WordPress core or when the Gutenberg plugin is built, this class name is not generated and the style is not hit.How?
I applied the class name explicitly so that it would not depend on the built environment. Ideally, In the babel configuration file, I think it would be better to explicitly set the autoLabel option to
never
instead of the defaultdev-only
.Testing Instructions
spacing
.Screenshots
Before
After