Recipe with background

Inizia con l’issue referenziata 80-gh-view-design, quindi confronta il suo screenshot con il markup del blocco WordPress incorporato e il contenuto della ricetta. L’issue non indica alcun file, test o criterio di accettazione preciso, quindi è necessario chiarire il trattamento dello sfondo previsto e la definition of done prima dell’implementazione.

See 80-gh-view-design for background.

<!-- wp:group {"style":{"color":{"background":"#fafafa"}}} -->
<div class="wp-block-group has-background" style="background-color:#fafafa"><div class="wp-block-group__inner-container"><!-- wp:image {"align":"center","id":2675,"sizeSlug":"thumbnail","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-thumbnail"><img src="https://dotcompatterns.files.wordpress.com/2020/10/cayla1-w6ftfbpcs9i-unsplash.jpg?w=150" alt="" class="wp-image-2675"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"align":"center","level":3} -->
<h3 class="has-text-align-center"><em><strong>Pumpkin Soup</strong></em></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">Wonderful, warming pumpkin soup with hints of ginger and coconut. </p>
<!-- /wp:paragraph -->

<!-- wp:columns {"className":"padding-bottom-none padding-top-none","style":{"color":{"background":"#ffffff"}}} -->
<div class="wp-block-columns padding-bottom-none padding-top-none has-background" style="background-color:#ffffff"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"center","fontSize":"small","style":{"color":{"background":"#ffffff"}}} -->
<p class="has-text-align-center has-background has-small-font-size" style="background-color:#ffffff"><strong>Prep time</strong><br>10 minutes</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"center","fontSize":"small","style":{"color":{"background":"#ffffff"}}} -->
<p class="has-text-align-center has-background has-small-font-size" style="background-color:#ffffff"><strong>Cook time<br></strong>30 minutes</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"center","fontSize":"small","style":{"color":{"background":"#ffffff"}}} -->
<p class="has-text-align-center has-background has-small-font-size" style="background-color:#ffffff"><strong>Total time</strong><br>40 minutes</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><strong><span class="uppercase">Ingredients</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>half a small pumpkin or butternunt squash, peeled and diced</li><li>1 small yellow onion, diced</li><li>2 tbsp of butter or olive oil</li><li>1-inch piece of fresh ginger, grated</li><li>1 can of coconut milk (400ml)</li><li>1 l veggie stock</li><li>1/2&nbsp;tsp&nbsp;smoked paprika</li><li>1/4 tsp cinnamon</li><li>salt to taste</li><li>for serving: fresh cilantro, toasted sunflower or pumpkin seeds</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><strong><span class="uppercase">Directions</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Add the onion and ginger to a medium sauce pot with the butter. Sauté slowly over medium heat until the onion is soft and translucent (about 3 minutes).</li><li>Add the diced pumpkin, smoked paprika, cinnamon, and stock. Stir to combine the ingredients, then allow the soup to come up to a simmer.</li><li>Add coconut milk and simmer the soup for about 10 minutes. Taste and add salt as needed.</li><li>Serve the soup with your choice of toppings. Add crusty bread for extra deliciousness.</li></ol>
<!-- /wp:list -->

<!-- wp:separator {"customColor":"#c2cacd","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#c2cacd;color:#c2cacd"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"className":"margin-bottom-half","fontSize":"small"} -->
<p class="margin-bottom-half has-small-font-size"><strong><span class="uppercase">Notes</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"margin-top-half","fontSize":"small"} -->
<p class="margin-top-half has-small-font-size">Coconut milk can be swapped for another full-fat plant milk, like almond or soy.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->