Over the holidays, I put together a “Recipe Block” plugin for Gutenberg. You can download a ready-to-use zip of the plugin on the github releases page; or you can download & build the developer version by cloning it from github. There are developer installation instructions in the github page.
I was solving my own problem, really– I have a private site where I collect recipes & notes (things like, “dough was too dry, add more water next time”). I used ACF for separating out the ingredients and some other meta, but when WP 5.0 came out I wanted to be using the new editor. Luckily, Mel had a design laying around, so I built this.
When you activate it, the block gives you a template to fill out, with a recipe title, image, some meta info, and the two lists for Ingredients and Directions. Each section can be moved, or removed. You can also add a subset of general blocks to this “parent”, like a gallery, separator, video, etc.
Initially the list sections were hard-coded as a single list with a fixed name, but once I tried to use it on my site, I realized this was a big shortcoming. What if you have multiple sets of ingredients, like a dough and filling?
Now you can add multiple “Recipe Ingredients” or “Recipe Directions” blocks, and customize the heading text. I wanted to keep things semantic too, so I also added the ability to change the heading level.
If you make a mistake in adding “Ingredients” or “Directions” and you meant to add the other, you can also transform back-and-forth between them.
It was pretty great to be able to spin up a block like this in just a few days, and almost everything worked like I expected it to (just one thing that has since been fixed). I’ll admit that finding documentation was part knowing how the github repo works, part reading code, and much less using the docs site, but every time I ended up there it was useful. Not using it first was probably force of habit more than anything.
Anyway, happy to get feedback on the block (via github), and I have a few “cool things I’ve learned” posts planned (which is why I didn’t get into code here). Stay tuned 🥐 🍲 🥘 🍪 😁
No comments.