using useRootPaddingAwareAlignments containers are not displayed as expected on the Post Editor

[matiasbenedetto]

Description

if you activate Root Padding Aware Alignments feature ( settings.useRootPaddingAwareAlignments: true ) in your theme.json, the padding of the containers is not rendered as expected on the post editor.

Step-by-step reproduction instructions

1. Activate emptythheme theme
2. Add "settings.useRootPaddingAwareAlignments": true to theme's theme.json file
3. Disable block styles from empty theme to avoid some conflicting styles around groups:
   You can comment out this line add_theme_support( 'wp-block-styles' );from functions.php file
4. Add a few groups with content and background color to spot the difference. You can use this markup as reference:

<!-- wp:paragraph -->
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing! <a href="http://localhost:4759/?p=395" data-type="post" data-id="395" target="_blank" rel="noreferrer noopener">I'm a link</a></p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"default"},"backgroundColor":"vivid-cyan-blue"} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background"><!-- wp:paragraph {"textColor":"pale-pink"} -->
<p class="has-pale-pink-color has-text-color">Group with a paragraph inside</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"constrained"},"backgroundColor":"luminous-vivid-orange"} -->
<div class="wp-block-group has-luminous-vivid-orange-background-color has-background"><!-- wp:paragraph -->
<p>Group with a paragraph inside with "inner block use content width" option enabled</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Paragraph in a group without background color</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Paragraph in the root post content</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"},"backgroundColor":"black"} -->
<div class="wp-block-group has-black-background-color has-background"><!-- wp:paragraph {"textColor":"white"} -->
<p class="has-white-color has-text-color">Group without background containing a group with background containing a paragraph.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

5. Compare the editor view with the frontend.See the differences pointed out in the screenshot.

Screenshots, screen recording, code snippet

Environment info

• Gutenberg trunk

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