Root padding is missing for nested row block in the editor

[iamtakashi]

Description

The root padding is missing for a nested row block in the post and the site editor, and the content bumps on the edge of the screen.

Test markup

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Localhost</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Just another WordPress site</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Designed with WordPress</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

I expected the nested row block on the left to have the root padding, just like the paragraph block on the right. However, the padding is missing at the moment therefore, the content bumps on the edge of the screen.

This happens in the post and the site editor. The root padding was added correctly on the front of the site.

Step-by-step reproduction instructions

1. Go to the post editor
2. Paste the test content
3. See the missing paddings for the nested row block on the left
4. Publish the page and see the front of the site.

Screenshots, screen recording, code snippet

No response

Environment info

WP: 6.1.1
Gutenberg: trunk
Tested in TT3, but this is not a theme-specific issue, as I can reproduce it with other themes.

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

[gyurmey2]

The lack of consistency between the Post Editor/Site Editor and the frontend is a big problem. Are there any plans to fix this?

[gyurmey2]

This applies not only to the Group block, but also to the Column block.

Test markup:

<!-- wp:columns {"align":"full","style":{"color":{"background":"#8a3415"},"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"0","left":"0"}}}} -->

<div class="wp-block-columns alignfull has-background" style="background-color:#8a3415;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"width":"30%","textColor":"base","fontSize":"x-small"} -->
  <div class="wp-block-column has-base-color has-text-color has-x-small-font-size" style="flex-basis:30%"><!-- wp:heading {"level":5} -->
    <h5 class="wp-block-heading">Cupcake ipsum dolor sit amet shortbread biscuit dessert. Chocolate cotton candy cake I love jelly croissant chupa chups brownie tiramisu. Oat cake danish dragée I love dessert lollipop macaroon donut.</h5>
    <!-- /wp:heading --></div>
  <!-- /wp:column --> 
  
  <!-- wp:column {"backgroundColor":"primary"} -->
  <div class="wp-block-column has-primary-background-color has-background"><!-- wp:heading {"level":6} -->
    <h6 class="wp-block-heading">Cupcake ipsum dolor sit amet shortbread biscuit dessert. Chocolate cotton candy cake I love jelly croissant chupa chups brownie tiramisu. Oat cake danish dragée I love dessert lollipop macaroon donut.</h6>
    <!-- /wp:heading --></div>
  <!-- /wp:column --></div>
<!-- /wp:columns -->

Editor:

Frontend:

[miksansegundo]

I think the issue is only in the editor because the row inside the main row has the block-editor-block-list__block class, note that it has two white spaces, and the padding is applied using a rule that excludes classes containing two white spaces.

This rule:

If we group the paragraph on the right, the issue appears on the right as well because the same class is applied. See the screenshot.

[tellthemachines]

Yeah, it's the :not([class*="__"]) bit that's causing this. It was put in place to avoid padding being added to block inner markup that also has wp-block- classes such as wp-block-cover__inner-container in the Cover block, because we have no other way of targeting outer block wrappers than [class*="wp-block-"].

I'll have a think about this and see what we can do to fix it!