Recipe with grey background and image on the right

Open
#120 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
25/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
html, wordpress
Domain
design, frontend

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.

image

<!-- 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.&nbsp; 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blockpatterns

All issues in Automattic/blockpatterns

Similar issues

More Design issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.