Root padding missing on nested alignfull blocks

[robrobsn]

Description

Follow-up for #43095 Might be relevant for #44336

When useRootPaddingAwareAlignments is set tot true in the theme.json, the double padding for nested .has-global blocks has been fixed 🙌 but the root padding is now missing for nested .alignfull blocks.

The main issue is that the padding of .alignfull blocks inside .has-global-padding blocks is missing because it is either not set or overwritten to zero.

Adding the following rule after the existing ones fixes the issue for me:

.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);
}

Step-by-step reproduction instructions

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

<!-- wp:heading -->
<h2>regular</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">wide</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">full</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"},"align":"wide","backgroundColor":"pale-pink"} -->
<div class="wp-block-group alignwide has-pale-pink-background-color has-background"><!-- wp:heading -->
<h2>regular in wide</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"constrained"},"align":"full","backgroundColor":"pale-pink"} -->
<div class="wp-block-group alignfull has-pale-pink-background-color has-background"><!-- wp:heading -->
<h2>regular in full</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">wide in full</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">full in full</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"},"align":"full","backgroundColor":"vivid-red"} -->
<div class="wp-block-group alignfull has-vivid-red-background-color has-background"><!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">wide in full in full</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"constrained"},"align":"full","backgroundColor":"vivid-red"} -->
<div class="wp-block-group alignfull has-vivid-red-background-color has-background"><!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">full in full in full</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

3. Save the page and view it on the frontend
4. Observe that that the 'full' heading as well as all blocks inside the pink full group have no visual gap on the left side event though a root padding has been set in the theme json.

Screenshots, screen recording, code snippet

TT3 before:

---

TT3 after patch:

If this fix turns out to be working as expected some of the old CSS rules can be removed or refactored.

Hope this helps! Root padding is definitely a tricky one.

Environment info

WordPress 6.0.2 Gutenberg 14.1.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes