Justin Tadlock
Last summer, I was on a pattern-creating bender. In two months, I had designed just shy of 100 block patterns. Outside of work and necessary household duties, I spent every waking moment building things with the block editor for fun. I had complete creative freedom, no need to roll out 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 always catches up, but I built some neat patterns over the summer.
There was about a three-day stretch in mid-June where I focused solely on patterns for food bloggers and recipe sites. I distinctly remember my sister, who stayed over for the week, asking why I was on the computer instead of watching the movie on TV.
I angled my laptop in her direction and said, “Look at this. I’m building a way for food bloggers to insert recipe cards in their posts. You know, like that card 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?”
That may not be an exact quote, but it is close enough — this is my story, so I will tell it like I remember.
I had one of those pivotal moments during this stretch of building food-blogger patterns. If I can do this now, eventually, designers will be able to create and bundle any layout with themes, and users can insert them at the click of a button, I thought.
I was already on board the block bandwagon at that point. However, there are always those moments where things seem to come together. The lightbulb clicks on. The stars align. Whatever you want to call it.
Unfortunately, only a few patterns from the Summer of ’21 have seen anything beyond a folder on some obscure GitHub repository. For today’s entry into the Building with Blocks series, I pulled one out to share. It also provided an opportunity to rebuild it from scratch with newer block design tools.
For this Building with Blocks tutorial, I will walk you through each step for creating a simple recipe card. I recommend activating the Twenty Twenty-Two theme for the same results. However, I intentionally only used black and white for the text, background, and border colors so that it transfers across as many themes as possible.
When finished, your recipe card should look similar to the following:
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.
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.
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.
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.
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.
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.
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.
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.
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!
I wanted to use core 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 that I have seen around the web, this solution still lacks two features:
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.
For a print button, I do not have a recommended solution. It would not be particularly tough to do via code, and I would love to see a theme author take this pattern idea and run with it.
SHARE THIS:
LIKE THIS
I think this is a good example of where direct data entry into the block editor shouldn’t be used and highlights a key stumbling block of all page builders which less experienced users often fall into.
What if I had say 300 recipes all individually laid out, using in this instance a pattern, and I wanted to insert a new field, tweak the layout and add a button, maybe even add some sorting on the archive page as the library grows? If the data is stored in a structured format using something like custom fields it’d be easy, I could even conditionally change the layouts depending on if the new field was populated or not.
Using a pattern/page builder? Huge job. I know because I literally had to do just this for a client. It took 3 days to transpose the data alone. A poor initial decision cost the client a significant sum.
In the case of 100s or 1,000s of recipes, it’d be better to have a CPT managing those larger datasets. If you’re going that big, you should start thinking about your architecture before launching. However, the client could still directly enter the data into the block editor. It should just be stored as metadata. Then, you can build one or more blocks around that implementation for whatever you needed.
That implementation can hide the CPT and allow them to enter a Recipe block into their posts, which gets saved back to the CPT. Or, it can go in the opposite direction. They can enter data into a recipe CPT, which can be neatly laid out with the block editor, and place a Recipe block into their posts if they want. There are loads of ways of handling it.
For the purposes of this post, we can just have fun with building stuff.
For 300 recipes it would be nice to go with a recipe plugin imo.
Justin, it’s very nice of you that you want to encourage people to stick to core blocks, but this solution also lacks an essential feature for food bloggers: the Schema.org markup.
You’ve featured our Recipe Card Blocks plugin in the past, which does everything you have explained in this tutorial in seconds, and there is no need to copy/paste the block pattern for every new recipe. Also, I imagine it will be a little challenging to make changes to the design of all recipes at once.
You are looking at this how-to post as a solution rather than a learning experience on how to build with blocks. Switch your viewpoint for a moment and think about how some users might need help just learning the basics of the system. That’s what this post and series are about.
Or, swap out “recipe card” with “any arbitrary card-type layout” if that helps. “Recipe” is just an example that most readers are likely familiar with.
I really enjoyed this tutorial! It gave me a nudge to try my hand at the new pattern creator tool, as well as build a few block patterns for one of our informational websites. As a marketer, rather than a developer (except when absolutely necessary), I have found the block editor to be really intimidating and difficult to work with, given the limited documentation available, but this is a fantastic example of something I’d actually need/want to build, and it’s very practical for learning in general. Thanks for sharing this, and giving me the nudge to explore the block editor! 🙂
Awesome! That’s the goal with this series that we’re doing on WP Tavern. It’s all about giving folks a starting point to build their own things.
So, once you set up this pattern, you can save it and re-use it, correct? I haven’t done that yet. This would be useful for me to set up cards for DJ Mixes with embeds and links to share the block a mix is in.
I don’t necessarily need a CPT right now as the previous commenter might need. I like the concept here of just adding it when you need to. But sure…having a database is also useful to filter content, etc.
Thanks for showing how this is done. I’ll have to show Michael Twitty and see if he can figure out how to do this on his Afroculinaria blog.
So, once you set up this pattern, you can save it and re-use it, correct?
You could definitely do that. Right now, it would require registration via the register_block_pattern() function or visually through a third-party plugin. There are a few suggestions in this Twitter thread:
Yes you're right! So plugins we know of that offer a UI to manage Block Patterns:
• https://t.co/v89la7pucd (from @audrasjb)
• https://t.co/3xCPUIXV9T (from @justintadlock! now I remember)
• https://t.co/CgVezU2Y5K
Anyone else know of any others?
— Aurooba Ahmed (@aurooba) March 11, 2022
This is so helpful—Thank You!
Why wouldn’t you use WP Recipe Maker or WP Tasty for a recipe card? The meta data added by them is so important to SEO and the recipe cards look amazing as recipe blocks. 😋
Because this is not about the recipe card. It is about learning to use the block editor to build a layout.
I suppose the tutorial could’ve been much shorter if I just said to “install plugin X,” though. 😂
Thank you so much for not just showing us a recipe plug-in. It’s invaluable to have a simple to learn project with great instructions. Thank you, Justin!🥳
Thanks, Dawn. That’s the aim of this series, and I’m glad you found it useful. Too many folks are focused on the end result than the journey. My hope is that these tutorials teach techniques and little tricks more than anything.
Great tutorial that encourages me to play with some blocks that I never used such as “Group” and “Row”.
One small question: how did you do the icons for prep time etc.? Are those pictures?
They are just normal emojis, so I just typed them in.
TIL about the new Row block! I never knew about it.
This opens the door to some interesting possibilities for one of my real estate plugins.
The Row block (a variation on Group) is one of my favorites. It’s really useful for lining up text-type blocks like paragraphs or small images.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
Subscribe now to keep reading and get access to the full archive.
Continue reading
Digital Marketing & Design by Yellow Falcon