Recipe with grey background and image on the right
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 25/100
Research direction
Start by reading the referenced 80-gh-view-design issue, then compare its design details with the block markup and image shown here. The work appears complete when the grey-background recipe pattern renders with the text column on the left and image on the right, including the recipe sections and footer callout.
Written by the indexing model from the issue text.
Description
See 80-gh-view-design for details.

<!-- wp:group {"style":{"color":{"background":"#f8f8f8"}}} -->
<div class="wp-block-group has-background" style="background-color:#f8f8f8"><div class="wp-block-group__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"align":"left","level":3,"style":{"color":{"text":"#6d435a"}}} -->
<h3 class="has-text-align-left has-text-color" style="color:#6d435a"><strong><em>Guacamole</em></strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size">This guacamole recipe is a very popular one. It comes out perfect every time, and always gets raving reviews from my family and party guests.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><strong>Prep time:</strong> 10 minutes<br><strong>Cook time:</strong> 20 minutes<br><strong>Total time:</strong> 30 minutes<br><strong>Serving size:</strong> 1 tbsp<br><strong>Serves:</strong> 10</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":2680,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2020/10/mariana-medvedeva-nm1fz-scxne-unsplash.jpg?w=640" alt="" class="wp-image-2680"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:paragraph {"style":{"color":{"text":"#6d435a"}}} -->
<p class="has-text-color" style="color:#6d435a"><strong><span class="uppercase">Ingredients</span></strong></p>
<!-- /wp:paragraph -->
<!-- wp:list -->
<ul><li>4 avocados</li><li>2 tablespoons of pico de gallo</li><li>Juice of 1/2 lime</li><li>2 chopped Jalapeño OR 2 tablespoons of crushed red pepper OR 1 tablespoon of cayenne pepper</li><li>1 teaspoon of salt</li><li>4 teaspoons of olive oil</li><li>1 1/2 teaspoon of chopped garlic</li><li>1/2 teaspoon of ground black pepper</li><li>1 minced jalapeño OR 2 minced serrano chiles OR 2 tablespoon minced of any chile pepper like (adjust for spiciness)</li></ul>
<!-- /wp:list -->
<!-- wp:paragraph {"style":{"color":{"text":"#6d435a"}}} -->
<p class="has-text-color" style="color:#6d435a"><strong><span class="uppercase">Directions</span></strong></p>
<!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} -->
<ol><li>Pit the avocados.</li><li>Score avocado without cutting through the skin.</li><li>Scoop out one avocado with a large spoon and place in mixing bowl.</li><li>Add the lime juice and stir to evenly coat the avocados.</li><li>Stir in the Pico de Gallo, garlic, oil, jalapeño, salt, red pepper, and black pepper, mashing and tossing the avocado pieces until thoroughly mixed.</li><li>Then scoop out the other avocados and gently mix and toss in the larger pieces.</li><li>The guacamole is the right consistency when more large pieces than mashed parts remain.</li><li>Garnish with a sprig of cilantro.</li></ol>
<!-- /wp:list -->
<!-- wp:separator {"customColor":"#d0c6cb","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#d0c6cb;color:#d0c6cb"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"fontSize":"small","style":{"color":{"text":"#6d435a"}}} -->
<p class="has-text-color has-small-font-size" style="color:#6d435a"><strong><span class="uppercase">Notes</span></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">This article uses material from the Wikibooks article “<a href="https://en.wikibooks.org/wiki/Cookbook:Guacamole">Cookbook:Guacamole</a>“, which is released under the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0.</a></p>
<!-- /wp:paragraph -->
<!-- wp:separator {"customColor":"#d0c6cb","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#d0c6cb;color:#d0c6cb"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"fontSize":"small","style":{"color":{"text":"#6d435a"}}} -->
<p class="has-text-color has-small-font-size" style="color:#6d435a"><strong><span class="uppercase">Nutrition</span></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"fontSize":"small","style":{"color":{"text":"#abb2b5"}}} -->
<p class="has-text-color has-small-font-size" style="color:#abb2b5">Serving size: 1 tbsp | Calories: 40kcal | Carbohydrates: 5g | Protein: 2g | Fat: 2g</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->
<!-- wp:group {"textColor":"background","style":{"color":{"background":"#6d435a"}}} -->
<div class="wp-block-group has-background-color has-text-color has-background" style="background-color:#6d435a"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":5,"textColor":"background"} -->
<h5 class="has-background-color has-text-color"><strong>Did you make this recipe?</strong></h5>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Tag [InstagramUsername] on Instagram and hashtag it [#yourhashtag]</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->
- Dominant language
- No language data
- Stars
- 7
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from Automattic/blockpatterns
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
Automattic/blockpatterns#315 · 1 comment ·
-
Minimal About Me Open
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
Automattic/blockpatterns#314 · 3 comments ·
-
Difficulty 3/5 1-2 days Newbie friendliness 30/100
Automattic/blockpatterns#313 · 3 comments ·
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
Automattic/blockpatterns#312 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
Automattic/blockpatterns#311 · 2 comments ·
All issues in Automattic/blockpatterns
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
cds-snc/design-gc-conception#2758 ·
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 92/100
-
Request: SumUp Opennew icon permissions in review
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
simple-icons/simple-icons#15027 ·
-
area:auth FE mvp P3
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
klasolsson81/jobbliggaren#1788 ·
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 76/100