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

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

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 youready?

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.

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?

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-havein my book.

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 Coursesis 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.

Gutenberg on

The official Gutenberg Handbookis 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.

You will find official examples of Gutenberg blocks on this GitHub repository, as well as within the Gutenberg Boilerplateby 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 CoBlocks blocks for Gutenberg on GitHub, which include all sorts of goodies.