How to Create a Recipe Card Through WordPress Block Editor – WP Tavern

0

Last summer I was on a pattern making bender. In two months, I had designed just under 100 block models. Outside of necessary work and chores, I spent every moment building things with the block editor for fun. I had complete creative freedom, no need to deploy a commercial product, and no one to please but myself.

As an artist, I was living the dream. There was no pressure to do anything other than create whatever came to mind. Of course, I crashed after a while. The real world is still catching up, but I built some neat models over the summer.

There was a period of about three days in mid-June where I focused solely on templates for food bloggers and recipe sites. I vividly remember my sister, who stayed all week, wondering why I was on the computer instead of watching the movie on TV.

I tilted my laptop in his direction and said, “Look at this. I’m building a way for food bloggers to insert recipe cards into their posts. You know, like that map you see after scrolling through 2,000+ words of someone’s life story when you’re just trying to find a recipe? Pretty cool, right? »

This may not be an exact quote, but it’s pretty close – this is my story, so i will tell it as i remember it.

I had one of those pivotal moments during this time creating food blogger templates. If I can do it now, designers will eventually be able to create and bundle any layout with themes, and users will be able to insert them with a click.I was thinking.

I was already on the block bandwagon at that time. However, there are always times when things seem to come together. The light bulb snaps on. The stars align. Whatever you want to call it.

Unfortunately, only a few models of the Summer 21 have seen anything beyond a folder on some obscure GitHub repository. For today’s entry in the Building with Blocks series, I’ve pulled one out to share. It also made it possible to rebuild it from scratch with new block design tools.

Build a recipe card

For this Building with Blocks tutorial, I’ll walk you through each step of creating a simple recipe card. I recommend activating the Twenty Twenty-Two theme for the same results. However, I intentionally used only black and white for the text, background, and border colors so that it would carry over to as many themes as possible.

When you’re done, your recipe card should look like this:

Although I encourage you to try each step for yourself, feel free to copy the HTML template from Gist and paste it directly into the editor.

The final step in this walkthrough requires Nick Diego’s Social Sharing Block plugin. If you prefer to stick to the main WordPress blocks, you can omit the last section.

Step 1: group of cards

WordPress block editor with an inserted Group block.  It has a 2 pixel black border.
Inserting a group block with border.

Let’s start this walkthrough with something simple. There is no need to complicate things so early.

Open a new post or page in your WordPress admin and add a Group block. In the block options panel on the right, find the “Dimensions” section and set the “Block Spacing” option to 0. This is necessary to get the map design we are looking for. Next, add a border of your choice.

To note: you can add a background color for the whole map in this step. However, if you do, WordPress will add padding by default. So you will also need to set the “Padding” option to 0.

Step 2: Map Image Header

WordPress block editor with an Image block placed inside a Group block.
Insertion of the Image block for the header of the card.

This is the first time you can really make a decision about your card. The two most obvious choices for a recipe card image are Image and Cover Blocks. I chose an image and placed it in the Group block from step 1.

The vegetarian pizza image is by Jennifer Bourn and is available in the WordPress Photo directory.

If you decide to add a cover block, you can add the recipe title and description from step 4 to it.

Step 3: Map Content Group

A recipe card in the block editor.  At the top is an image of a pizza.  Below is a padded group block.
Insertion of the Group block with padding after the Image block.

Let’s keep things simple for now. We need to group the “content” of the recipe card. Again, add a new Group block.

The only change you need for this block is to add some space around it. In the sidebar block options panel, set the “Fill” option to 2rem or your preferred value.

Step 4: Map title and description

A recipe card with an image of pizza, followed by a Title and Paragraph block in the block editor.
Inserting Title and Paragraph blocks.

In the Group block from step 3, insert a Title block. Use it for the title of your dish. Then, insert a paragraph immediately after for a description.

This is more of a freeform step, so go crazy with as much or as little detail as you want to add.

Step 5: Map Meta

A recipe card in the WordPress editor.  It contains an image of pizza, followed by a title, description, and metadata.
Inserted line block for recipe meta.

So far, everything should have been relatively simple. The previous four steps didn’t do anything complicated with the layout. This is about to change.

You need to create a four-column section showing cooking times and other recipe metadata for this step. The best solution in WordPress for this is the Row block. If you want, you can try it with Columns. Both experiences can seem a bit janky in small spaces.

Add a new Line block inside the Group block you worked in. I selected the “Space Between Elements” option for the “Justification” control. This ensures everything is evenly spaced, but the choice is yours.

Next, click the “+” icon in the row and add a paragraph block inside. For my first Paragraph block, I first added the text “Prep Time”. Then I hit Shift + Enter on my keyboard to create a line break and added “2 hours”. For fun, I jumped in an emoji.

The trick to make the rest easier is to get the first Paragraph block styled the way you want, duplicate it three times and customize the text.

Step 6: Ingredients and Map Instructions

A recipe card in the WordPress editor.  Metadata is displayed, followed by ingredient lists and directions.
Inserting Title + List blocks for recipe ingredients and instructions.

The hardest part is out of the way. I promise. This next step is as easy as adding header and list blocks for an Ingredients section and doing the same for a Directions section. These should always be placed in the same group as the previous blocks.

For title blocks, I set the level to H3. The only other settings change I made was selecting the “Convert to Ordered List” button in the list toolbar under Directions.

Step 7: Social Map Sharing

Recipe card in the WordPress editor.  Shown in the directions listing, followed by a social sharing section.
Inserting a new group and social sharing icons.

You can’t have a modern recipe card without a social section, law? You will need the Social Sharing Block plugin installed for this. Or, you can stop now with your card filled.

For this section, insert a new group after (not inside) the group used to house the recipe content. Change the text color to white and add a dark background color. You can also tinker with the padding (I set it to 2rem) or use a spacer block if you want more room to breathe.

For the “Like this recipe?” text, add a Title block with the H3 level. Next, insert the social sharing block below. Feel free to play with the design. I used centered justification and enabled the “Show Labels” option.

It’s a wrap!

Notes and other thoughts

I wanted to use basic WordPress blocks for everything in this recipe card. The social sharing section was the obvious roadblock, so I needed to rely on a third-party plugin.

Compared to many modern recipe cards I’ve seen on the web, this solution still lacks two features:

  • Task-style checkboxes or radio entries to cross out ingredients or steps.
  • A “print this recipe” button.

For the to-do list, the Todo Block plugin by David Towoju works as a great alternative to the List block. It’s lightweight and will allow site visitors to cross out items as they work on the recipe.

For a print button, I don’t have a recommended solution. It wouldn’t be particularly difficult to do via code, and I’d love to see a theme author take this template idea and execute it.

Share.

Comments are closed.