Global padding: ".wp-block-block" class references in CSS selectors force padding to 0 in nested Group blocks

[alexandrebuffet]

Description

WordPress 6.6 and Gutenberg plugin in latest version have global padding CSS selectors including references to a .wp-block-block class, in .has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) for example.

I don't think .wp-block-block is a class used either in the editor or in the front-end. Wouldn't that be a mistake? It seems to me that it should refer to the .wp-block-group class instead.

As a result of what appears to be an error, nested "Group" blocks have their internal margins reset to 0.

I detail the procedure to reproduce the bug below.

Step-by-step reproduction instructions

1. Create a page on a WP with 6.6 Beta 2 and Twenty Twenty-Four block theme.
2. Add a Group in full-width with no "Inner blocks use content width" option.
3. Add another Group inside the first one with "Inner blocks use content width" option.
4. Add paragraph or content in it.
5. Save and view the page, you'll see the inline style applied to the inner group with wrong selector. Left and right padding values are reset to 0 when they shouldn't be. It's the global padding values that apply and should not be reset.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.6 Beta 2
• Gutenberg latest

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

[fabiorubioglio]

Hi,
i have another question related to this issue.

it seems that the CSS rule:

.has-global-padding :where(.has-global-padding:not(.wp-block-block)) {
padding-right: 0;
padding-left: 0;
}

was changed to

.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) {
padding-right: 0;
padding-left: 0;
}

As a result, Left and Right padding values of nested Group blocks with "Inner blocks use content width" option, and Align Wide or Full width, are no longer reset to 0. The width of the inner content is no longer the same.
Is that correct?

Step-by-step reproduction instructions

• Create a page on a WP with 6.6 Beta 2 and Twenty Twenty-Four block theme.
• Add a Group with "Inner blocks use content width" option and "Wide width" align.
• Add Columns block inside with "Wide width" align.
• Add content in the Columns
• Save and view the page: the width of the Columns block is smaller than before.

[aaronrobertshaw]

I don't think .wp-block-block is a class used either in the editor or in the front-end. Wouldn't that be a mistake? It seems to me that it should refer to the .wp-block-group class instead.

There is actually a block, called "block" internally, which would correctly result in the classname .wp-block-block. It is the block used for synced patterns, previously known as reusable blocks.

I'm not up to date on how global or root padding is supposed to work at the moment so others might be better placed to comment there.

[tellthemachines]

I can confirm that the use of wp-block-block is intentional to target the pattern wrapper.

The change to global padding logic happened in #60715; we might need @richtabor to confirm whether this effect was intended or not.

[alexandrebuffet]

Thanks for the clarification @aaronrobertshaw @tellthemachines, so the selector is fine.

But then there's still a difference between WP 6.5.4 and WP 6.6 beta 3 (with #60715 merged).

You can test this pattern in a page on a WordPress with the TT4 block theme (page template has a Post Content block with the "Inner blocks use content width" option enabled) :

<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"backgroundColor":"accent-3","layout":{"type":"default"}} -->
<section class="wp-block-group alignfull has-accent-3-background-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">Group (alignfull)<br>&gt; Group (inner content)</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla ipsum ac dui bibendum faucibus. Integer id leo blandit, imperdiet massa vel, varius urna. Morbi vehicula venenatis eros non sagittis. Donec tempor dui eget lacinia pulvinar. In rutrum, purus non imperdiet elementum, orci est tincidunt elit, id semper orci ex in dui. Praesent libero turpis, malesuada nec tortor vel, viverra placerat mauris. Mauris vel ligula luctus, aliquet neque commodo, vulputate justo.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Aliquam id sodales purus. In sodales malesuada pharetra. Maecenas ac massa eget nibh porttitor accumsan. Aliquam eu ante at dolor scelerisque sodales. Vivamus in eleifend diam. Nam sollicitudin maximus leo, sed feugiat ipsum. Integer facilisis nulla non ipsum condimentum mattis. Maecenas nec nulla ullamcorper, faucibus orci quis, egestas quam.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Nullam et bibendum lorem. Aliquam non blandit nisl, sed lobortis massa. Duis egestas tincidunt ante finibus rutrum. Nunc ex sem, pharetra sit amet ipsum quis, lacinia hendrerit velit. Nunc accumsan rhoncus leo, vel tempor nunc pharetra non. Nunc ut magna elit. Aliquam ac massa id tortor imperdiet consequat vel at arcu. Donec viverra congue blandit. Praesent pellentesque dolor non nulla viverra, eget malesuada ligula dapibus. Nullam sollicitudin nibh vel sem suscipit aliquam. Fusce sed nisl et felis mollis faucibus vel nec sem. Nullam ligula nunc, elementum at viverra at, semper vitae tellus. Suspendisse mattis congue elit, ut dignissim dui elementum sit amet.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

On WP 6.5.4, inner group got padding thanks to this rule:

.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]), p, h1, h2, h3, h4, h5, h6, ul, ol) {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}

On WP 6.6 beta 3, inner group got padding reset thanks to this rule:

.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) {
  padding-right: 0;
  padding-left: 0;
}

This change is likely to break content integration when sites are updated to the latest version of WP. For some sites, this will mean updating a large amount of content to correct block settings.

[richtabor]

I tested this and here's what I've found:

Both instances of the editor (6.5 vs. 6.6) do not apply padding to the pattern:

6.5 does apply padding, but only to the front-end (6.6 remains 1:1 between the editor and the front-end):

[tellthemachines]

On WP 6.5.4, inner group got padding thanks to this rule:

I believe this was a bug. You'll notice that adding an Image block to the inner Group and setting it to full width, the Image won't in fact be full width in the front end:

and as @richtabor mentioned above, that padding didn't appear in the editor either.

I'm looking into possible fixes for this but it's proving hard to change anything in these rules without other unwanted side-effects 😅

[fabiorubioglio]

Hi there,
what about nested group blocks with Wide Align and option "Inner blocks use content width"?
As you can see in the screenshot, WordPress 6.6 changes the width of Group 2 within Group 1. Is that correct?

[tellthemachines]

@fabiorubioglio I believe it is intended, because a rule was added that explicitly excludes wide aligned blocks from having their padding removed.