Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Invalid CSS for nested fullwidth layouts with zeroed-out custom padding #63432

Closed
richtabor opened this issue Jul 11, 2024 · 0 comments · Fixed by #63436
Closed

Invalid CSS for nested fullwidth layouts with zeroed-out custom padding #63432

richtabor opened this issue Jul 11, 2024 · 0 comments · Fixed by #63436
Assignees
@richtabor
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@richtabor
Copy link
Member

An invalid CSS issue occurs when applying a padding rule of 0 to a full width group block, inside a full width group.

This creates an unwanted horizontal scroll, as the nested fullwidth value is not properly negated.

This is a result of resolving #60716, which ensured that the editor and front-end both negative margin for when custom padding is set. That works fine when a unit is also applied to a padding value, but when you set the padding to 0, the calc() function requires a unit—otherwise the CSS is invalid and the padding value is not applied, which results in horizontal scroll.

Visual

CleanShot.2024-07-11.at.09.20.11.mp4
@richtabor richtabor added [Type] Bug An existing feature does not function as intended [Feature] Layout Layout block support, its UI controls, and style output. labels Jul 11, 2024
@richtabor richtabor added this to the Gutenberg 18.8 milestone Jul 11, 2024
@richtabor richtabor moved this to 🐛 Punted to 6.6.1 in WordPress 6.6 Editor Tasks Jul 11, 2024
@richtabor richtabor mentioned this issue Jul 11, 2024
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 11, 2024
@andrewserong andrewserong removed this from the Gutenberg 18.8 milestone Jul 15, 2024
@andrewserong andrewserong mentioned this issue Jul 16, 2024
Closed
@github-project-automation github-project-automation bot moved this from 🐛 Punted to 6.6.1 to ✅ Done in WordPress 6.6 Editor Tasks Jul 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@richtabor richtabor

Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
No open projects
WordPress 6.6 Editor Tasks
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix invalid css for nested fullwidth layouts with zero padding applied WordPress/gutenberg
2 participants
@richtabor @andrewserong