The Beginner’s Guide to Building Gutenberg Blocks: Part 1

An Introduction to Gutenberg Development

In the coming months, the landscape of WordPress will fundamentally change. Gutenberg, the content editor of the future, will land in WordPress 5.0 sometime in early 2018. Are you ready?

Some say that Gutenberg will lead to a block gold rush of sorts, while others nervously await the project’s imminent release. Any way you look at it, there is an obvious opportunity to capitalize on.

In the world of business and software, if you’re not willing to learn and adapt, you’ll quickly lose relevance. So instead of picking up my pitchfork and raising steam about the new editor, I’ve been personally investing in Gutenberg block development and therefore the future of WordPress.

So here’s the first part of a series of posts aimed to get you up to speed with Gutenberg block development. I’ll discuss development resources, Gutenberg block architecture and how to launch your very own block.

Part 1:

Gutenberg Block Development Resources

Building Gutenberg blocks is a bit more difficult than what most WordPress developers are used to. The biggest hurdle most developers will face is a lack of modern JavaScript development knowledge.

Most WordPress developers are pretty comfortable with PHP and front-end development, though Gutenberg blocks are heavily JavaScript based.

So where do you start?

1. React for Beginners

The best place to get on your feet with modern JavaScript is signed up and take the React for Beginners course by Wes Bos.

This course introduces proper tooling, React, JSX, and all the bits and pieces to get you building Gutenberg blocks with modern JavaScript. React for Beginners is an absolute must-have in my book.

2. Gutenberg Courses

Once you’re familiar with React and modern JavaScript, the next step is to start learning the details of Gutenberg block development. Cue Zac Gordon and his brilliant new Gutenberg development course.

Gutenberg Courses is a brilliant course on Gutenberg development by Zac Gordon, who is a well-known professional educator on all fronts. This course will jump-start your Gutenberg block development skills in a very quick way.

3. The Gutenberg Handbook

The official Gutenberg Handbook is a decent resource for looking up terms and Gutenberg Block API specifics, though the handbook only provides the simplest examples. If you’re diving headstrong into Gutenberg block development, you’ll likely require more resources.

Thankfully, now that Gutenberg has been actively in development for a good while, some higher-level block development resources are surfacing.

4. More Gutenberg Development Resources

You will find official examples of Gutenberg blocks on this GitHub repository, as well as within the Gutenberg Boilerplate by Ahmad Awais. Ahmad also recently released create-guten-block, a zero-configuration developer toolkit for building WordPress Gutenberg block plugins – and it’s really neat.

And last, we have been releasing our GutenKit block concepts for Gutenberg on GitHub, which include all sorts of goodies.