-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Spacing Input Controls: padding/margin overlays out of sync, horizontal margin not being applied #63191
Comments
cc @aaronrobertshaw @glendaviesnz @andrewserong who I know have worked on this area of the project before |
Thanks for the ping! I'll just ping @noisysocks, too, since there was a change back in February (#59227) that could be related. |
Yeah these issues sound exactly like the ones I fixed in #59227. Running the latest trunk locally, I can't reproduce any of the overlay issues you've mentioned. Is there a step I'm missing? Or something about your environment? What browser are you using?
This one I can reproduce. It looks like the Here's the rule in the site editor: .editor-styles-wrapper .wp-container-core-group-is-layout-203 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 565px;
margin-left: auto !important;
margin-right: auto !important;
} And here's the rule in the post editor: .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 620px;
margin-left: auto !important;
margin-right: auto !important;
} It makes sense that the layout would add |
This has been the case since the introduction of layout supports. I don't think it is related to the CSS specificity changes. IIRC there has been a lot of discussion about this on various PRs that adopt margin support on blocks mostly because we don't offer "conditional" support yet. We're left with a situation where on a top-level block the left/right margins are overridden but if the block is nested within a block that doesn't define its own layout then the left/right margins are honoured. |
Using the latest trunk I tested across the usual browser suspects. The visualizer only appears correctly for me in Safari. It behaves as per this issue in Chrome, Firefox, and Edge.
|
spacing.input.controls.mp4
While interacting with spacing input controls for another task, I noticed a few unexpected behaviors:
Padding/margin colored overlays out of sync
The colored overlay shown around a block doesn't seem to reflect the value chosen in the control:
0
, the overlay still shows a large padding (see in the video at 34 seconds)Horizontal margin does not get applied
When applying horizontal margin, I moved the slider but nothing happened to the selected block (see video at 1 minute and 9 seconds)
The text was updated successfully, but these errors were encountered: