Podcast Hero with Background Image

Inizia esaminando le voci esistenti dei pattern di blocchi nel repository e confronta la loro struttura con il markup del blocco WordPress fornito in questa issue. Il lavoro è completato quando il pattern hero del podcast è stato aggiunto in modo coerente con il repository e viene visualizzato con l'immagine di sfondo, l'intestazione, l'artwork e i pulsanti Spotify e Apple mostrati.

<!-- 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 -->