Gutenberg - add full width background on a nested wide width group

Question

I'm trying to add a full-width background on a wide-width group in Gutenberg.

Steps I made :

1. create a full-width group with my background color
2. create a group inside my full-width group

Issue : I cannot wet the with on the nested group (in step 2)

How can I achieve that ?

Thanks !

Answer 1

Yes, a Group within a Full Width Group can have a set content width and a background color set, eg:

<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
<div class="wp-block-group alignfull has-secondary-background-color has-background"><!-- wp:heading -->
<h2>Full Width Group</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Some content in the full width group</p>
<!-- /wp:paragraph -->

<!-- wp:group {"backgroundColor":"tertiary","layout":{"inherit":false,"contentSize":"400px"}} -->
<div class="wp-block-group has-tertiary-background-color has-background"><!-- wp:heading {"level":3} -->
<h3>Inner Group</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Content in the inner group with a set width of 400px</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Resulting layout:

Also check that your inner groups layout has inherit set to false and set the contentSize to your required size (supports px, %, em, rem, vw, vh). If the width is still not applied, check for any custom CSS or conflicting rules from your theme that could be overriding the width.