The Simplest Way to Build a Gutenberg Block

TL;DR: The “Content Blocks: Advanced” repository has an example of the absolute minimal code you need to build a custom block, and progress from there.

When I’m trying to learn a really deep and complicated topic — something that takes days or weeks to grasp the basics, and years to master — one thing that I find really helpful is the concept of the progressive disclosure of complexity.

A system designed with that in mind lets you make tangible progress with the least amount of time, effort, and friction. And then you’re gradually introduced to more complexity as you have a need for it.

Morten Rand-Hendriksen did a great job applying that concept to building custom Gutenberg blocks in his presentation at WordCamp Vancouver 2019. The video isn’t on yet, but there’s a GitHub repository with the code examples.

The 01_01 branch is the simplest version of a custom block that you could possible build, and only contains the barest, most essential things. It probably wouldn’t be convenient to build blocks that way, but understanding what’s essential is, well… essential to the process of learning :)

Once you grasp that, then you can move on to the next thing, whether that’s how to add a certain feature, or make your workflow more convenient with a build tool, etc.

The slides are also available:

One thought on “The Simplest Way to Build a Gutenberg Block

Leave a Reply

Your email address will not be published. Required fields are marked *