Podcast Hosts

[alaczek]

<!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:jetpack/layout-grid {"column1DesktopSpan":12,"column1TabletSpan":8,"column1MobileSpan":4,"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:spacer {"height":24} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"style":{"typography":{"fontSize":"53px","lineHeight":"1.1"}}} -->
<h2 style="font-size:53px;line-height:1.1">Meet <br>Our Hosts</h2>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":6,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":3,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:image {"id":3219,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-style-rounded"><img src="https://dotcompatterns.files.wordpress.com/2021/01/terrel.png?w=220" alt="" class="wp-image-3219"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"55%"} -->
<div class="wp-block-column" style="flex-basis:55%"><!-- wp:paragraph {"fontSize":"medium","style":{"typography":{"lineHeight":"1.3"}}} -->
<p class="has-medium-font-size" style="line-height:1.3"><strong>Terrell George</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.65"}}} -->
<p style="font-size:15px;line-height:1.65">Many podcast series provide an associated website with links and show notes, guest biographies, transcripts, additional resources, commentary, and even a community forum dedicated to discussing the show's content.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:image {"id":3218,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-style-rounded"><img src="https://dotcompatterns.files.wordpress.com/2021/01/kay.png?w=220" alt="" class="wp-image-3218"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"55%"} -->
<div class="wp-block-column" style="flex-basis:55%"><!-- wp:paragraph {"fontSize":"medium","style":{"typography":{"lineHeight":"1.3"}}} -->
<p class="has-medium-font-size" style="line-height:1.3"><strong>Kay Buford</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.65"}}} -->
<p style="font-size:15px;line-height:1.65">Many podcast series provide an associated website with links and show notes, guest biographies, transcripts, additional resources, commentary, and even a community forum dedicated to discussing the show's content.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":48} -->
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->

[ianstewart]

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

Empty paragraph here. And here …

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

[ianstewart]

Looks like Twenty Twenty One has some display issues here with this pattern …

[ianstewart]

The "meet our hosts" heading is aligned with the content columns on the front-end of the Blank Canvas theme.

But not in the screenshot for the the issue here.

Is that correct-able in the pattern itself?

Also, we should create theme issues for the editor styles here. Both Blank Canvas and Twenty Twenty One are not displaying this grouping in the editor styles. The discrepancies with the nested blocks here likely extend to other themes.

When WordPress/gutenberg#27661 closes we should come back and adjust the column widths for this pattern (and others) as they're pretty tight with this content. In the meantime, anything we can do with columns (perhaps small empty columns) to help the spacing there?

For example, the text from the first column here looks more associated with the second column.

[ianstewart]

Might be worth trying out adjusting the cropping here to get more equal weight, or sizing, between the subjects.

[alaczek]

I updated the code to remove empty paragraphs and align the heading with the content below. Turns out only one of the layout grids had end gutters enabled, which means it should have been broken everywhere (scratches head ).

Both Blank Canvas and Twenty Twenty One are not displaying this grouping in the editor styles.

Could you explain this one?

[alaczek]

For example, the text from the first column here looks more associated with the second column.

Ah, this might have been me being too eager and adjusting column width to 70% (was 55%) originally. I can switch it back to 55%, that should help.

[ianstewart]

Could you explain this one?

The alignment looked off in the editor — seems corrected now. There were some issues with Layout Grid that have now been resolved, it seems.

Let's get this one in the library.