Three Latest Podcast Episodes

[alaczek]

Here's a screenshot from starter site running Spearhead:

<!-- 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,"showImage":false,"showAuthor":false,"postLayout":"grid","align":"full"} /--></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:group -->

[ianstewart]

It appears as if we have some issues with Twenty Twenty One and layout grids in groups.

And perhaps an all-themes issue here for editor styles.

[ianstewart]

• When Decouple Query/Post Block Experiment from Site Editor Experiment WordPress/gutenberg#26316 is closed we'll want to loop around here to replace the blog posts block as these column widths are a bit too tight in our posts block.
• Is it possible to get the spacing more equal around the group? I think we need padding control live Add support for Padding Control in Gutenberg themes#2449

[alaczek]

Ah yes, it looks like TT1 is setting a negative margin on a full-width Group Block with background specifically. I'm going to try to find out if this was on purpose.

What kind of issue would you raise for editor styles here?

[alaczek]

I updated the code and got rid of the spacer (using group padding instead). The issue with TT1 remains, but I think it looks ok in other themes:

Seedlet:

Spearhead:

Mayland

TT1

It's worth noting that if I enable end gutters on the Layout Grid block, it does have the spacing at the ends (smaller than in other themes that seem to be handling this differently). On the starter site it is set up without the end gutters tho, and I'm not sure of the significance of this. But if we enabled end gutters, this pattern looks acceptable in TT1 as well.

<!-- wp:group {"align":"full","style":{"color":{"background":"#f7f7f7"},"spacing":{"padding":{"top":"100px","bottom":"60px","left":"48px","right":"48px"}}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#f7f7f7;padding-top:100px;padding-right:48px;padding-bottom:60px;padding-left:48px"><div class="wp-block-group__inner-container"><!-- 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,"showImage":false,"showAuthor":false,"postLayout":"grid","align":"full"} /--></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:group -->

[ianstewart]

I'm really looking forward to something layout-grid-like in core. :)

Let's proceed with this one. (Also, making sure that the updates are made on the starter site if they haven't been yet.)

[alaczek]

I added the end gutters and explicitly set text color. Publishing 🚀

<!-- wp:group {"align":"full","style":{"color":{"background":"#f7f7f7","text":"#121212"},"spacing":{"padding":{"top":"100px","bottom":"60px","left":"48px","right":"48px"}}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#f7f7f7;color:#121212;padding-top:100px;padding-right:48px;padding-bottom:60px;padding-left:48px"><!-- wp:jetpack/layout-grid {"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: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 {"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: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,"showImage":false,"showAuthor":false,"postLayout":"grid","align":"full"} /--></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div>
<!-- /wp:group -->