If you are looking for the best way to learn Gutenberg development, then you have found it. In this article I outline the 7 steps to really master Gutenberg development.

Because not only will you learn to develop custom blocks. You will also get an in-depth understanding of modern JavaScript, as well as the React and Redux libraries that Gutenberg uses.

This approach is a battle tested: I’ve been using Gutenberg on high stakes client projects since version 2.5.0, or April 2018. To prepare for my first Gutenberg project, I’ve used the exact steps outlined below. Other colleagues at Human Made have followed a similar path, proving that this is a rock-solid approach for learning to develop Gutenberg blocks

This process will take a while. I understand that some of you don’t have that time, and need to skill up fast. If you are one of these people, you can use the shorter approach for learning Gutenberg development in 6 days.

But enough with the introduction, you’re here to learn! So let’s get started.

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

What Are The Gutenberg Development Fundamentals?

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.

How To Learn Advanced Gutenberg Development Techniques

At this point, you know all you need to create simple Gutenberg blocks. But quite often projects require complex blocks to create a fantastic user experience.

The best way to keep growing your skills to do the covering Advanced Gutenberg Development course. This course will teach you:

  • Using React in your themes: The perfect way to use the React skills you built. You’ll never go back to using jQuery spaghetti code again!
  • Retrieving and updating data using the Data API: This is where knowing Redux will really pay off.
  • Creating custom sidebars using the The Plugin API: With metaboxes being a relic of the past, this is the new way to customise the Block Editor.
  • Building Core Block extensions: You don’t always need a custom block. Extending a Core block can give you what you want with less work.

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.

This article has given you all the keys for success. Let me know how this process works for you, and don’t hesitate to reach out if you have further questions.