Skip to content
A Gutenberg recipe plugin. Also a snarky training course to learn to develop solutions for WordPress Gutenberg.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Non-Trivial Gutenberg

— or "How I learned to stop worrying about and love the Block."

I want to start with a confession: While I've known about Gutenberg and the coolness it's bringing to WordPress, I've been ignoring the whole thing. With other dev platforms, large React projects and a team of people to manage, Gutenberg changing the 100-some-odd sites we manage was just one of those things I wasn't focused on.

But, eventually my WordPress PFY convinced me that I needed to take this Gutenberg thing seriously. So I sat down, tapped a vein and spent a week or so mainlining tutorials, trying to wrap my brain around the changes.

After a few days of building the same static block or another rich text based block with a single attribute, I came to the conclusion that there simply weren't many guides out there that actually built anything and I had no intention of paying someone $200+ dollars when their course outline didn't convince me they were going to teach me more than the free training.

Which brings us to his little repository.

What follows is my snarky attempt at making sense of the new editor, it's documentation, and building an almost-useful plugin.

Warning: Not safe for… well, anyone

Let me be honest here for a moment: I'm old, grouchy, and more than a little sarcastic and have an adolescent sense of humor. So you can probably imagine that anything I write will reflect that.

So if the occasional f-bomb offends you or poop jokes constipate you; If snark makes you grumpy and/or pop culture references bring out your inner raging fan-troll:

This is not the tutorial for you.

Seriously, it's okay if you don't like this tutorial, there are others. No hard feelings, friend. I return you to Google, our lord and savior, and wish you the best of intentions.

DEV WARNING: In Active Development

I'm still in the process of writing this little course so it'll be pretty difficult to "follow along" until I get the thing done. I'll remove this warning once the course is complete.

What you need to know 

This tutorial assumes that you have a passing familiarity with modern Javascript. You don't have to be an expert but I won't be taking time explaining why I used const instead of var and I won't explain what an arrow function is. I will be mentioning ES* features that I think are useful, nonstandard or are frequently used in the Gutenberg repo.

I assume you know enough PHP to copy and paste without summoning eldritch horrors disguised within 500-errors. I also believe it's a safe bet that you've created at least a simple PHP-based WordPress plugin.

I'm assuming you've at least know that React is a thing you should know. This course will go a lot easier for you if you've built at least a few functional components and will go smoothly if you can create a class-based component.

If any of these things sound foreign to you, again don't sweat it, there are a ton of walkthroughs that can help you level up before you tackle this one.

— or hell, try it anyway. You might surprise yourself with your l33tn355.

What I'm covering

By the time you're sick of reading my angst-filled drivel, we will have:

  • Created a basic plugin scaffold using create-guten-block and cleaned up the boiler plate.
  • Created a static block and a multi-component dynamic block.
  • Used some of the less-obvious bits of Gutenberg, including some of their patterns for developing blocks, JavaScript actions and stolen a few bits that are useful.
  • Explored and used Gutenberg's higher-order components to augment our own.
  • Built a few higher-order components to handle bits that don't make sense in components themselves.
  • Groaned more than a few times at the extremely lame toilet humor.

How this tutorial works

Each branch of the project is a specific chapter in the tutorial along with the starting state for that chapter and the instruction written in the It's a fairly safe bet that the starting state for each chapter will be the ending state for the previous chapter.

The master branch is the complete plugin that's WordPress-ready. If you want the plugin and not the tutorial, feel free to download it and go to town.

The idea is you can use this tutorial how you want:

  • Know nothing about WordPress or Gutenberg? Clone the Chapter 1 branch and follow along from beginning to end.
  • Some parts too basic for you? Read the beginning chapters so you know where I'm headed and clone the chapter where it gets interesting.
  • You a WordPress and React Guru? Just clone the master branch and read the source.

The Demo Plugin: RCP - Recipes for WordPress

When working out new frameworks and such, I like to start off with a project that contains behavior I reasonably understand. Rather risk the wrath of the React community, I have elected not to inflict yet-another-to-do-list app on them. You're welcome.

I'm a big fan of both the code and the recipes over at ChefSteps. It seemed like a fun little challenge to replicate how the steps in their recipes contain the ingredients and appear to be combined in the main ingredients list.

The example recipe (not borrowed from ChefSteps) demonstrates the behavior I want the plugin to achieve:

((Placeholder: Recipe front-end))

  1. Authors populate the ingredients in the recipe's steps, providing the description for each step in the standard paragraph block.
  2. The ingredients should be segmented into 'amount' and 'ingredient name'. The plugin will require 'grams' as the unit so we can provide the users controls to change the units and the scale the recipe. Also, measuring by volume is for posers.
  3. An ingredients block will display the full ingredients list, as well as add a title and fields for listing the equipment, timing and yield of the recipe.
  4. The summary block should update the ingredients automatically.

Before you begin

Before you move over to the first chapter, you'll need some software installed:

  • Local by Flywheel: Look, I'm lazy and don't feel like screwing around with setting up Apache or Nginx. Flywheel has created a pretty cool piece of software for WordPress development with Local. It will create a local WordPress server for you with all the bells and whistles. All you have to do is click a few buttons.
  • NodeJS: If you're doing modern JavaScript development, you already have this installed. If this is your first time playing with this stuff, download and install the LTS version.
  • A code editor: This is all up to you. Visual Studio Code, Sublime, or Atom are all fine choices. If you happen to be made of money, consider investing in a JetBrains product like WebStorm which is what I'll be using.

Ready Freddie?

Okay, if you're still with me, head over to the Chapter 1 branch and let's start exploring this crazy little thing called Gutenberg.

You can’t perform that action at this time.