WordPress block code for creating a recipe card pattern.

wp-recipe-card-pattern.html

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"border":{"style":"solid","width":"2px"}},"borderColor":"black"} -->
<div class="wp-block-group has-border-color has-black-border-color" style="border-style:solid;border-width:2px"><!-- wp:image {"align":"center","id":10590,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="http://localhost/wp-content/uploads/2022/03/image-2-1024x605.png" alt="" class="wp-image-10590"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
<div class="wp-block-group" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:heading -->
<h2>Veggie Pizza</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A short recipe description goes here....</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"flex","allowOrientation":false,"justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">⏲️ <strong>Prep Time</strong><br>2 Hours</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">⏲️ <strong>Cook Time</strong><br>10 Min.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">🍴 <strong>Serves</strong><br>4</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">🍽️ <strong>Meal</strong><br>Any</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3} -->
<h3>Ingredients</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Ingredient A</li><li>Ingredient B</li><li>Ingredient C</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Directions</h3>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>Do this thing first...</li><li>Then, do this other thing...</li><li>And, finally, do this really major thing...</li></ol>
<!-- /wp:list --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}},"backgroundColor":"black","textColor":"white"} -->
<div class="wp-block-group has-white-color has-black-background-color has-text-color has-background" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="has-text-align-center">Like This Recipe?</h3>
<!-- /wp:heading -->

<!-- wp:outermost/social-sharing {"showLabels":true,"size":"has-normal-icon-size","className":"is-style-pill-shape","layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"blockGap":"1rem"}}} -->
<ul class="wp-block-outermost-social-sharing has-normal-icon-size has-visible-labels is-style-pill-shape"><!-- wp:outermost/social-sharing-link {"service":"twitter"} /-->

<!-- wp:outermost/social-sharing-link {"service":"facebook"} /-->

<!-- wp:outermost/social-sharing-link {"service":"pinterest"} /--></ul>
<!-- /wp:outermost/social-sharing --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Thank you Justin! This is super helpful. I'm creating a site with my wife's favorite recipes and was looking for a block that would incorporate all the elements needed that I could easily use as a template. Thanks so much!