Full-width groups have no side paddings

[YanCol]

On a page, when I insert a full-width group with content inside, the content touches the viewport's edges on mobile/tablet. I would expect the full-width group to be padded with the root padding values defined by the theme.json/user.

Step-by-step reproduction instructions

1. Create a new page.
2. Copy and paste the following content:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"primary","textColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-contrast-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">Content inside full with group</h2>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue eget dui nec porttitor. Aenean et facilisis nibh. Ut eu viverra purus, quis dictum sem.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Vestibulum massa justo, ullamcorper ut felis et, fermentum ullamcorper augue. Ut lobortis egestas volutpat. Sed ultricies sapien at odio condimentum porta. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"align":"wide","layout":{"type":"flex"}} -->
<div class="wp-block-buttons alignwide"><!-- wp:button {"backgroundColor":"contrast","textColor":"base"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-base-color has-contrast-background-color has-text-color has-background wp-element-button">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

3. Save the page and view it on the front end.
4. Resize the viewport and observe that the content isn't "protected" by side paddings.

[richtabor]

This may be related — I've been through hoops trying to get padding to work as expected. https://github.com/WordPress/gutenberg/issues/43095

This is def related: https://github.com/WordPress/gutenberg/issues/44404

[robrobsn]

@YanCol Thank you for creating the issue. I was still waiting for a reply on https://github.com/WordPress/gutenberg/issues/44404 @richtabor Thank you for tagging my original issue, wouldn't have found this one otherwise. 👍

My idea for the patch below is a more simple/classic approach of applying the padding to the container instead of to the children. Only direct .alignfull child blocks get a negative margin to be full width. This way you no longer need to apply padding to 'regular' child blocks.

--

Rule 1: Direct .alignfull child blocks of .has-global-padding containers get a negative margin to be full width again and re-apply the root padding.

• This way the .alignfull containers can be nested and will always appear full width while other child blocks will have the visual root padding applied.

Rule 2: If the direct .alignfull child block is not .is-layout-constrained container the padding is removed

• For alignfull images, videos and similar blocks to have no padding and appear full width

Rule 3: Removing the currently applied padding the child blocks since the padding has already been applied to the container in Rule 1.

• This rule should be removed from Gutenberg instead of being overwritten with this patch.

--

I have not looked into __inner-container blocks ( not sure if there are many left, potentially the cover block ? ).

--

My current patch, which works well for me with TT3 and FSE in general, so far: 🤞

/*Rule 1*/
.has-global-padding > .alignfull {
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
	margin-left: calc(var(--wp--style--root--padding-left) * -1);
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}

/*Rule 2*/
.has-global-padding > .alignfull:where(:not(.is-layout-constrained)) {
	padding-left: 0;
	padding-right: 0;
}

/*Rule 3*/
.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]), p, h1, h2, h3, h4, h5, h6, ul, ol) {
	padding-left: 0;
	padding-right: 0;
}

Hope this helps! Appreciate your feedback on this. 👋

[mikachan]

Closing as the theme has been merged into the WordPress Core SVN repository and is no longer maintained on GitHub.