-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Closed
Labels
[Block] GroupAffects the Group Block (and row, stack and grid variants)Affects the Group Block (and row, stack and grid variants)[Feature] LayoutLayout block support, its UI controls, and style output.Layout block support, its UI controls, and style output.[Status] Needs More InfoFollow-up required in order to be actionable.Follow-up required in order to be actionable.[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Description
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
- Insert a group block into a page.
- Do not apply any alignment to the outer group (leave it at default).
- Inside the outer group, insert another group block.
- 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
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
Labels
[Block] GroupAffects the Group Block (and row, stack and grid variants)Affects the Group Block (and row, stack and grid variants)[Feature] LayoutLayout block support, its UI controls, and style output.Layout block support, its UI controls, and style output.[Status] Needs More InfoFollow-up required in order to be actionable.Follow-up required in order to be actionable.[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
