This is the second in a twelve-part series of block features we’re ending with in 2022. The Twelve Blocks of Christmas allows visitors of B+P to copy the code of each pattern below into their own WordPress site.
This is a block pattern for a single page podcast. It’s a bit broken in mobile, so working on a fix.
Update 12/13/22: Fixed by transitioning rows into columns. Renders better on mobile now.
Tuesday, December 13th, 2022
Episode 2: Patterns
This is the second sample block in the Blocks + Patterns block advent calendar. All month long, we’ll be sharing valuable patterns you can use to build your site in WordPress.
This second pattern is a design for podcasts. (I took some inspiration for this from the Radiolab podcasts.) The introduction features a date of the podcast (it’s static here but you can replace “December 13th” with the post date block in WordPress.
I also set the image on the right to be static. But with the new featured image block in WordPress, you can set that as the image to the right of the episode name and it will dynamically update with the image you set every time.
The text is placeholder for an introduction to your Podcast episode. You can replace what I have here.
I’m going to attempt another build of this block tomorrow using columns instead of groups.
Get the Code
<!-- wp:paragraph -->
<p><em>This is the second in a twelve-part series of block features we're ending with in 2022. The Twelve Blocks of Christmas allows visitors of B+P to copy the code of each pattern below into their own WordPress site.</em><br><br>This is a block pattern for a single page podcast. It's a bit broken in mobile, so working on a fix.<br><br><strong>Update 12/13</strong>/<strong>22</strong>: Fixed by transitioning rows into columns. Renders better on mobile now.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}}},"backgroundColor":"textondark","className":"is-style-hovershadow","layout":{"type":"default"}} -->
<div class="wp-block-group is-style-hovershadow has-textondark-background-color has-background" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns {"className":"tw-justify-center"} -->
<div class="wp-block-columns tw-justify-center"><!-- wp:column {"verticalAlignment":"center","width":"33%","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:33%"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit"},"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"lightgrey","className":"is-style-default","fontSize":"xsmall"} -->
<p class="is-style-default has-lightgrey-color has-text-color has-xsmall-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">Tuesday, December 13th, 2022</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"className":"is-style-default","fontSize":"big","fontFamily":"lora"} -->
<h2 class="wp-block-heading is-style-default has-lora-font-family has-big-font-size" id="episode-2-patterns">Episode 2: Patterns</h2>
<!-- /wp:heading -->
<!-- wp:group {"layout":{"type":"constrained","contentSize":"200px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:audio {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<figure class="wp-block-audio" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><audio controls src="https://archive.org/download/final_fantasy_vii_soundtrack/40-Costa%20del%20Sol.mp3"></audio></figure>
<!-- /wp:audio --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"0","margin":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-buttons" style="margin-top:0;margin-bottom:0"></div>
<!-- /wp:buttons -->
<!-- wp:social-links {"iconBackgroundColor":"textonbutton","iconBackgroundColorValue":"#010101","size":"has-small-icon-size"} -->
<ul class="wp-block-social-links has-small-icon-size has-icon-background-color"><!-- wp:social-link {"url":"https://yourspotifyaccount.com","service":"spotify"} /-->
<!-- wp:social-link {"url":"yourpatreonaddress.com","service":"patreon"} /-->
<!-- wp:social-link {"url":"yourpodcastlink.com","service":"chain"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66%","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained","contentSize":"300px"}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:66%"><!-- wp:image {"id":161,"width":451,"height":254,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"14px","width":"0px","style":"none"},"color":{"duotone":"unset"}},"className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized has-custom-border is-style-default"><img src="https://blocksandpatterns.com/wp-content/uploads/2022/12/2-1024x576.jpg" alt="" class="wp-image-161" style="border-style:none;border-width:0px;border-radius:14px" width="451" height="254"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9rem"}},"textColor":"inputtext"} -->
<p class="has-inputtext-color has-text-color" style="font-size:0.9rem">This is the second sample block in the Blocks + Patterns block advent calendar. All month long, we'll be sharing valuable patterns you can use to build your site in WordPress.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9rem"}},"textColor":"inputtext"} -->
<p class="has-inputtext-color has-text-color" style="font-size:0.9rem">This second pattern is a design for podcasts. (I took some inspiration for this from the Radiolab podcasts.) The introduction features a date of the podcast (it's static here but you can replace "December 13th" with the post date block in WordPress.<br><br>I also set the image on the right to be static. But with the new featured image block in WordPress, you can set that as the image to the right of the episode name and it will dynamically update with the image you set every time.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9rem"}},"textColor":"inputtext"} -->
<p class="has-inputtext-color has-text-color" style="font-size:0.9rem">The text is placeholder for an introduction to your Podcast episode. You can replace what I have here.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9rem"}},"textColor":"inputtext"} -->
<p class="has-inputtext-color has-text-color" style="font-size:0.9rem">I'm going to attempt another build of this block tomorrow using columns instead of groups.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:spacer {"height":"22px"} -->
<div style="height:22px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->