Load Toad Networks                     
Load Toad Networks - Website Design | IT Support | Digital Marketing | Website Hosting

Building a Recipe Card via the WordPress Block Editor

Building a Recipe Card via the WordPress Block Editor

Share It:

While I encourage trying out each step for yourself, feel free to copy the pattern HTML from Gist and paste it directly into the editor.

When finished, your recipe card should look similar to the following:

A recipe card with an image of a pizza at the top.  Following that is a title, description, ingredients list, directions list, and social sharing section.

For this Building with Blocks tutorial, We will walk through each step for creating a simple recipe card. This recipe card was created in the Twenty Twenty-Two theme, and only black and white were used for the text, background, and border colors so that it transfers across as many themes as possible.

Building a Recipe Card

The final step of this walkthrough requires the Social Sharing Block plugin by Nick Diego. If you prefer to stick with the core WordPress blocks, you can omit the last section.

Step 1: Card Group

WordPress block editor with a Group block inserted.  It has a 2px black border.
Inserting Group block with border.

Let us kick this walkthrough off with something simple. There is no need to complicate matters this early.

Open a new post or page in your WordPress admin and add a Group block. In the block options panel on the right, look for the “Dimensions” section and set the “Block spacing” option to 0. This is necessary to get the card design we are after. Then, add a border of your choosing.

Note: you can add a background color for the entire card during this step. However, if you do, WordPress will add some default padding. So, you will also need to set the “Padding” option to 0.

Step 2: Card Image Header

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

This is the first moment where you can really make a decision about your card. The two most obvious choices for a recipe card image are the Image and Cover blocks. I chose an Image and placed it into the Group block from Step #1.

The veggie 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 inside of it.

Step 3: Card Content Group

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

Let us continue keeping things simple for now. We need to group the “contents” of the recipe card together. Again, add a new Group block.

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

Step 4: Card Title and Description

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

Inside the Group block from Step #3, insert a Heading block. Use this for the title of your dish. Then, insert a Paragraph immediately after for a description.

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

Step 5: Card Meta

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

Thus far, everything should have been relatively straightforward. The previous four steps did not do anything complicated with the layout. This 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 feel a bit janky in small spaces.

Add a new Row block inside the Group block you have been working in. I selected the “Space between items” option for the “Justification” control. This makes sure that everything is evenly spaced, but the choice is yours.

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

The trick to making the rest of this easy is to get the first Paragraph block styled just like you want, duplicate it three times, and customize the text.

Step 6: Card Ingredients and Directions

A recipe card in the WordPress editor.  Shown is the metadata, followed by ingredients and directions lists.
Inserting Heading + List blocks for recipe ingredients and directions.

The hard part is out of the way. I promise. This next step is as simple as adding Heading and List blocks for an Ingredients section and doing the same for a Directions section. These should still be placed in the same Group that the previous blocks were in.

For the Heading blocks, I set the level to H3. The only other settings change I made was to select the “Convert to ordered list” button in the toolbar for the list under Directions.

Step 7: Card Social Sharing

Recipe card in the WordPress editor.  Shown ins the directions list, followed by a social sharing section.
Inserting a new Group and Social Sharing icons.

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

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 extra breathing room.

For the “Like This Recipe?” text, add a Heading block with the H3 level. Then, insert the Social Sharing block below it. Feel free to play with the design. I used centered justification and enabled the “Show labels” option.

That is a wrap!

Notes and Other Thoughts

I wanted to use core WordPress blocks for everything in this recipe card. The social sharing section was the obvious roadblock. The much faster option was to go with the third-party plugin.

Compared to many modern recipe cards that I have seen around the web, this solution still lacks two features:

  • Task-style checkboxes or radio inputs for crossing out ingredients or steps.
  • A “print this recipe” button.

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

Related Posts

Share It

Previous Happy Clients

Can't Figure Out Installing Your Full Website? Need Custom Design Help?

Let Us Help You