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

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 obvious opportunity to capitalize on.

In the world of business and software, if you’re not willing to learn and adapt, you’ll quickly loose 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 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 sign 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 absolutely jump-start your Gutenberg block development skills in a very quick way.

3. The Gutenberg Handbook

Gutenberg on WordPress.org

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, a number of 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 own GutenKit block concepts for Gutenberg on GitHub, which include all sorts of goodies.


Subscribe to get Part 2 ?

This article is the first in our "The Beginner's Guide to Building Gutenberg Blocks" series. Subscribe to receive the next articles straight to your inbox. No spam, just solid content. Promise.

The Beginner's Guide to Building Gutenberg Blocks, A Series

Don't miss out on this Gutenberg block development series! Subscribe to get each post in this series hot off the press. 🎉