Apply negative margins for alignfull children of blocks with custom padding set

[richtabor]

What?

As part of the layout exploration from #60308, I noticed that the negative margin applied to top-level fullwidth blocks of groups with custom padding was not being applied on the front-end. The result is overflowing content on the front-end of the site. I'm using this gist to test.

Why?

Currently if you place a fullwidth block inside another fullwidth block, the expectation is that it is also fullwidth—that's what's happening in the editor.

That works fine, until that parent block has custom padding applied to it. Within the editor, the treatment is applied to appropriately negate the custom padding, but the corresponding treatment on the front-end was omitted from fullwidth blocks.

How?

I moved it out of the logic that was previously filtering it to $content or $wide align blocks only.

Testing Instructions

1. Open a post or page.
2. Insert a group block.
3. Give it a background color (so you can see the padding better).
4. Set it to fullwidth.
5. Assign a padding value to it.
6. Add an image to the group block.
7. Set that image to fullwidth.
8. See that the image is fullwidth and there is no overflow scroll, in the editor or on the front-end.

Visuals

CleanShot.2024-04-12.at.16.26.39.mp4

---

This also resolves the inconsistency between the editor and front-end of fullwidth > fullwidth blocks within constrained layouts:

Before (editor/front-end)

After (editor/front-end)

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: richtabor <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: bph <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[bph]

Pinging the @WordPress/outreach group. @richtabor mentioned, he could us more eyes on this PR

[tellthemachines]

Oh well spotted, thanks for fixing this! Looks like the issue was there since #42085 😅

[webmandesign]

Is there any way a theme can filter this CSS?

I am applying automatic padding for blocks with background set in my theme, however the CSS in the theme has a higher specificity (and can not be lowered) than the Gutenberg produced CSS.

So, I'd like to filter this Gutenberg CSS and rise the specificity by changing "$selector > .alignfull" to "$selector > .alignfull.alignfull", for example. Is this possible somehow?