CSS class incorrectly applied to empty containers affecting layout.
The `is-layout-constrained` class is incorrectly applied to empty container blocks, causing frontend layout issues. This affects blocks like the cover block where background styling is applied to child elements. The fix requires modifying the class application logic to exclude empty containers.
The is-layout-constrained class is applied to any container block that has no children. It breaks WYSIWYG principle as frontend will differ from editor because any child element will now receive css:
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: var(--wp--style--global--content-size);
margin-left: auto !important;
margin-right: auto !important;
}
Common problem is that the block has background styled on a child element rather than the block's main element, like cover block. That leads to background not following the align property as it should on the frontend when it is empty. Cover block is fairly simple, but this behavior can be a more serious problem when creating more complex container blocks.
I'm guessing that this is a bug that has gone under the radar because it is an edge case and empty containers are uncommon. Cover block also aggressively tries to add a paragraph as a child which further masks the issue.
Add cover block. Give it a color background. Set it to full width. Open document overview. Remove the paragraph from the cover block. Save.
The result on the frontend should be cover block's background not stretching side to side as it should, because the block has gotten is-layout-constrained class.
No response
WP 6.9.1 Gutenberg 22.6.0
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!