Varia, Seedlet: Full-width items inside of groups with a background color do not extend to the screen edges.

[kjellr]

In Seedlet and Varia (and their child themes), full-width child blocks placed inside of a full-width Group block do not extend to the screen edges when the Group block has a background color. This does not match the editor, and (as is my understanding) is not the intended behavior.

Steps to replicate

1. Add a group block, assign it a background color.
2. Add a full width block inside.
3. Preview the page.
4. Note that on the front end, the full-width child block does not extend to the page edges.

Screenshots

Seedlet:

Varia:

Expected

The expected behavior is what happens in Twenty Twenty-One: Full width blocks inside full-width Group blocks always extend to the full screen edges. There are exceptions put in place for text-based blocks to ensure that they do not bump up against the screen edges.

cc @alaczek

[alaczek]

The same thing is happening in Spearhead.

I just wanted to emphasize that the exception for text-based blocks is very important for our layouts and patterns. It's not implemented in Twenty Twenty One and I was wondering if it would be possible to have it in the .com version of the theme?

[kjellr]

@alaczek can you share some sample block markup? In the Twenty Twenty-One screenshot above, the text doesn't bump up against the edges, even though it's in full-width Column or Layout Grid blocks.

[alaczek]

Sure thing!

Here's the latest posts section from Riley starter design

<!-- wp:group {"align":"full","style":{"color":{"background":"#f7f7f7"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#f7f7f7"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":24} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":12,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":1,"className":"column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"style":{"typography":{"fontSize":"53px","lineHeight":"1.1"}}} -->
<h2 style="font-size:53px;line-height:1.1">Latest<br>Episodes</h2>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":12,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":1,"className":"column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:a8c/blog-posts {"showDate":false,"showAuthor":false,"postLayout":"grid","align":"full"} /--></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:group -->

It looks like this in TT1:

Spearhead:

In this code example, end gutters in the Layout Grid block are disabled. When I enabled them, the content was not bumping against the browser anymore (in TT1). So maybe there is no issue there after all. Sorry if all of this is confusing!

[eduardozulian]

Also happening with Exford. Reproduced after a report in 33098548-hc

A full-width cover block inside a full-width group block produced the following: