Podcast Hero with Background Image

[alaczek]

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2021/01/jonathan-velasquez-c1zn57gfdb0-unsplash-1.png","id":3206,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://dotcompatterns.files.wordpress.com/2021/01/jonathan-velasquez-c1zn57gfdb0-unsplash-1.png)"><div class="wp-block-cover__inner-container"><!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":6,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":8,"className":"column1-desktop-grid__span-6 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-6 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":"44px","lineHeight":"1.35"}}} -->
<h2 style="font-size:44px;line-height:1.35">Feeling lost? You don’t know which way to go? We’re here to help.</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:image {"align":"full","id":3202,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://dotcompatterns.files.wordpress.com/2021/01/at-the-fork-cover.png?w=378" alt="" class="wp-image-3202"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"className":"margin-bottom-none"} -->
<p class="margin-bottom-none">Listen on:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color">Spotify</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color">Apple</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:cover -->

[ianstewart]

These ones look quite rough in the editor in Blank Canvas and Twenty Twenty One.

[ianstewart]

Thoughts on how to better align this section?

It starts to fall apart in Blank Canvas and Twenty Twenty One.

[alaczek]

I think the issues with the preview are due to the inserter placeholders? It also depends on which block is selected - for example, things look the worst when editing the "Listen on" Paragraph block. In general, the blocks in that pattern jump around quite a bit when selecting different items, but I don't believe there's anything we can do to prevent that. :(

As for the front.. buttons in both themes have too much padding imo (at least it feels that way in this situation), but maybe we could reduce the margin between the buttons and "Listen on" by adding one of our special classes?

This Blank Canvas with margin set to half:

[ianstewart]

reduce the margin between the buttons and "Listen on" by adding one of our special classes

This does help it a bit — though I think you're right about the general button padding in blank canvas. (Looking forward to that being a global style control.)

Is the podcast image cover an image that has rounded corners or is it using image border radius from Gutenberg?

[alaczek]

It's the same as #137 - the source image is rounded, the support is not there yet (and the feature only just landed in Gutenberg 9.9).

So do we want to launch this now?

[ianstewart]

Let's wait on this one until we can refine it a bit more as a pattern.