A new series I’m hoping to write this year, full of cool things you can do in the block editor or in JS in general. Some of this has been written about before, but I’ll also point out the use in projects I’m working on. 👩🏼💻
When writing the Recipe Block, I wanted to set out a “recipe post” framework, but not lock people into a fixed format. If you use it, you’ll see that inserting the block inserts a few blocks, including an image, title, ingredients, etc. But maybe you don’t have photos, or you want to add a video. If you try to insert a new block inside the “Recipe” container, you’ll see a restricted set of blocks, mostly things that would make sense – text, video, gallery… but not another Recipe block, or Latest Comments, etc.
This is thanks to a combination of the <InnerBlocks /> component, with the template & allowedBlocks props.
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.
Over the past year +, I’ve been working in-depth with React at Automattic. I’ve also been trying to bring everything I’m learning there into WordPress themeing (since that’s a hobby of mine). Last year I posted about a simple theme, Anadama, which used the REST API plugin. With the REST API slated to be released with WordPress 4.7, I’ve been working on more theme tools for using React with the API.