How To Learn Gutenberg Development

With the WordPress 5.0 release date fast approaching, the developer community is looking for instructions on how to learn Gutenberg development.

I’ve been using Gutenberg on production projects since version 2.5.0, or April 2018. To prepare for my first Gutenberg project, I’ve used the exact steps I’ll outline below. Other colleagues at Human Made have followed a similar path, so this is a proven approach for learning to develop Gutenberg blocks.

Step 1: Creating content with Gutenberg

This step may sound obvious, but as developers, we use WordPress differently than editorial users. Much of the writing we do is not done in WordPress, and we therefore lack the necessary experience of how writers use the tool.

Designing custom editing experiences is a key part of client projects. In order to implement the best solution for an editorial problem, you need to familiarise yourself with Gutenberg’s design philosophy, both in theory, and in practice.

So start doing more of your writing with WordPress. This will give you a better feeling for the user flow of Gutenberg, and get you familiar with its user interface.

A useful tool is the Block Unit Test for Gutenberg plugin, which creates a page with all default blocks. It provides a good overview, and is a great place to start exploring from.

Make sure that you play around with each block, to see what options are available, what possible use cases there could be, etc.

Step 2: Add theme styles for the default blocks

A second step is to adapt the CSS styles of an existing WordPress theme for Gutenberg. This is a good way to get started with development tasks using existing skills. Just pick a random theme, install the Block Unit Test plugin, and get busy coding.

Gutenberg includes default styles for each block, so start with looking at these styles. Investigate how you can override or remove these default styles, and experiment with different approaches.

Gutenberg also offers a number of optional theme features. Add support for these features to the theme, and implement the necessary styling to make them fit with the theme’s design.

Additionally, look into writing an editor stylesheet for Gutenberg. Try and replicate the front end design as good as possible in the editor. This is a good opportunity to familiarise yourself with the markup and class structure of the blocks in the back end, which differs from the front end.

Zac Gordon offers a Gutenberg Theme Development Course, for those that want to dive deeper into theme related Gutenberg subjects. If you are primarily a theme developer, or struggle to figure out things in your own, this is a good investment.

Step 3: Learn ECMAScript 6

Until this point, we have only interacted with the blocks that Gutenberg offers out of the box. Now we’ll take the first step towards building our own Gutenberg blocks.

Gutenberg is written in ECMAScript 6, or ES6 for short. To add to the confusion, ECMAScript 6 is also known as ECMAScript 2015 or ES2015. All these terms designate a specification of the JavaScript language.

It’s worth spending some time on ES6 because it introduces a whole set of new language features. These make it possible to write more concise and elegant JavaScript. A lot of these features are not yet supported in browsers, requiring ES6 to be transpiled (transformed) into ES5 during a build step.

While it is possible to write Gutenberg blocks directly in ES5, I strongly recommend avoiding this. Once you get used to ES6, going back to writing JavaScript using the “old” syntax will be a pain. Plus over time, ES6 support will be implemented in all browsers, making it the default version for writing JavaScript executed on the client side.

PonyFoo has a good overview of all the syntax changes and features in ES6, as well as a series of articles detailing certain aspects. Another good source is Wes Bos’ article series on ES6. These articles should be sufficient to give you a solid base for using ES6.

If you prefer to learn via video, Wes Bos has an extensive video course called ES6 for Everyone. This course goes way beyond what you would need to be familiar with Gutenberg.

ES6 for Everyone banner.

But depending on how you learn, it’s worth the investment, as it guides you through the learning process. This makes for a less steep learning curve compared to reading loosely related articles, and figuring out your own exercises.

Step 4: Learn React

Gutenberg is build with React, a JavaScript library for building user interfaces. React is part of several third party JavaScript libraries used by Gutenberg.

To make things more complicated, Gutenberg adds its own abstraction layer over React. This means that the way to interact with this library is slightly different in Gutenberg blocks compared to plain React projects. But React knowledge makes Gutenberg’s code base a lot less opaque.

There is a certain logic to writing React components, and a number of recurring patterns in React code. Being familiar with these before adding the particulars of Gutenberg will make the learning curve less steep.

The best way to learn React is Wes Bos’ React for Beginners video course. It will guide you step by step through building a React project from scratch, and will give you the necessary programming experience to feel at ease.

React for Beginners banner.

A viable alternative is the beginner tutorial in the React documentation. Even if you do the video course mentioned above, you will need to consult the React documentation frequently, so make sure to bookmark the link.

Step 5: Learn Redux

Redux is the client side data handling layer used by Gutenberg. Again, as with React, Gutenberg adds its own abstraction layer on top.

At this point, learning Redux is not required. You will not need to use it until you start developing more complex Gutenberg blocks. However I consider that Redux is such an ingrained part of the React ecosystem, that it’s worth being familiar with its concept.

Redux course illustration.

There is a free Redux course available on Egghead. The course is taught by Dan Abramov, creator of Redux, so you’ll be learning from the master himself.

The course is only of value of you follow along with what Dan types. This way you’ll be writing your own implementation of Redux, and you’ll discover that in its most basic form, it’s far from being black magic.

Step 6: Learn Gutenberg development basics

With all this knowledge, you’ll be now more than ready to dive into Gutenberg itself. The best way to do this is to complete the Gutenberg Development Course by Zac Gordon.

Gutenberg Development Course badge.

This course will teach you everything you need to know to get started developing your own Gutenberg blocks.

The course covers:

  • The architecture of Gutenberg: Covers the file structure, the React and Redux abstraction layers, as well as important helper libraries.
  • Introduction to blocks: The basic architecture of a Gutenberg block, as well as how it handles its style and script dependencies.
  • Registering blocks: The starting point for creating custom blocks. Covers how attributes are saved (user data added to the block), as well as the edit and front end views.
  • Example block: Practical exercises for building blocks. Includes a development boilerplate, enabling you start writing code right away. Along the way you’ll learn to implement different user interface elements (block form fields, toolbars, and sidebars), and different types of blocks (JS rendered and PHP rendered).

The course website includes a section with sample videos, so that you can get an idea of the quality of the videos included in the course.

Zac is currently working on a follow up course covering Advanced Gutenberg Development topics, which will be released at end of the year. So if you liked the introductory course, it might be a good idea to sign up for this.

Step 7: Practice

No tutorial or course can replace the experience gathered during real world development tasks. If you have followed the roadmap outlined in this post, you are well prepared for using Gutenberg in client or personal projects.

You will run into issues when exploring Gutenberg’s possibilities. But the structure of the learning process is set up in a way that you are well equipped to handle these temporary roadblocks.

You are now proficient at JavaScript, and accustomed to writing React code. This allows you to explore and understand Gutenberg’s code base. And possibly even contribute back to the project.

Is there a development task that you struggle with? Do you want to know more about a particular WordPress API?

If so, please let me know by suggesting a topic for an article.