Skip to content

[core/group] - Nested group block gets margin-left: 0 if parent group has no alignment #70547

@webexpr-dhenriet

Description

@webexpr-dhenriet

Description

When placing a group block inside another group block, the nested group receives an inline style of margin-left: 0 if the parent group block has no align class (such as alignleft, alignright, or alignfull).

This behavior appears unintended and disrupts expected layout behavior, especially when using the .is-layout-constrained layout class.

Step-by-step reproduction instructions

  1. Insert a group block into a page.
  2. Do not apply any alignment to the outer group (leave it at default).
  3. Inside the outer group, insert another group block.
  4. Inspect the nested group block in the browser dev tools.
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"pink-50","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group alignfull has-pink-50-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"blockGap":"1.5rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|pink-700"}}}},"textColor":"pink-700","fontSize":"h4"} -->
<p class="has-pink-700-color has-text-color has-link-color has-h-4-font-size"><strong>Lorem ipsum</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right","verticalAlignment":"stretch"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-btn-pink-radius-15"} -->
<div class="wp-block-button is-style-btn-pink-radius-15"><a class="wp-block-button__link wp-element-button" href="#"><strong>Lorem ipsum</strong> 1</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-btn-pink-radius-15"} -->
<div class="wp-block-button is-style-btn-pink-radius-15"><a class="wp-block-button__link wp-element-button" href="#"><strong>Lorem ipsum</strong> 2</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

Image

Expected Behavior

  • The nested group block should inherit normal layout behavior.
  • margin-left should not be overridden unless required for a specific alignment context.

Actual Behavior

  • The nested froup block receives style="margin-left: 0" inline.
  • This inline style overrides margin-left: auto from .is-layout-constrained, breaking horizontal centering and layout expectations.
  • If the parent froup has an alignment (alignfull, alignwide, etc.), this override does not occur.

Additional Notes

  • This affects layout in themes using .is-layout-constrained to center blocks within a content container.
  • The forced margin-left: 0 removes auto centering, leading to unexpected block alignment.
  • Issue is not visible if parent group has an alignment class, which avoids the problematic style injection.

I know it's possible to manually set the width inside a group block, but do you really think a client knows the exact width of the container? They shouldn't have to enter it manually — that's exactly why I defined the container width using contentSize. I believe anything entered manually is likely to be either larger or smaller than the container width.

Environment info

  • WP 6.8.1
  • without Gutenberg plugin
  • windows 11,
  • chrome

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] GroupAffects the Group Block (and row, stack and grid variants)[Feature] LayoutLayout block support, its UI controls, and style output.[Status] Needs More InfoFollow-up required in order to be actionable.[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions