Thorsten Frommen

The Gutenberg Development Course by Zac Gordon

In case you have anything to do with WordPress, you might—actually: should—have heard of Gutenberg. And by that I mean the 21st century Gutenberg, not the 15th century one. 😉

In this post, I will briefly review the Gutenberg Development video course by Zac Gordon, and pretty much tell you to sign up for the course. It is fantastic, and well worth your money! (And no, I do not get anything for writing this, nor are there any affiliate links in this post.)

What Is This Gutenberg?

Gutenberg can be described as a new editing experience for WordPress, which basically means that it brings a brand new content editor, but actually also replaces the whole post editing screen. Currently, Gutenberg exists in the form of a plugin available in the official WordPress.org plugin directory, while the development is happening on GitHub. Eventually, Gutenberg will get merged, and thus become an integral part of WordPress itself.

Gutenberg Development

Gutenberg is still in development; at an incredibly high pace. And yet it is (going to be) very important for so many people in the near future. That’s why Zac Gordon created a video course dedicated to developing with and for Gutenberg.

Zac Gordon is, hands down, one of the most well-known as well as best educators in the WordPress universe. Having been giving online video courses around general WordPress (development) topics for several years already, he is most probably best known for his JavaScript for WordPress Master’s course. His recent final stunt is called the Gutenberg Development video course.

What Is the Course All About?

The course is currently structured into a total of five sections, with sections 1 through 4 containing the actual video materials.

Gutenberg Development Sections
The sections of the Gutenberg Development course.

Going through the sections, you will first learn about the folder and file structure of the Gutenberg plugin. What does it include? Where to find what? How to work with the development version of the plugin?

Next up is a high-level overview of blocks. What is a block? How to create one? What is needed or helps when creating a custom block? Where should a block live?

The third section comes with a dedicated GitHub repository. The section explains and illustrates the registerBlockType function, which—who knew!?—is used to register (custom) Gutenberg blocks.

In my opinion, section 4 is the heart of the course, and offers the opportunity to have some hands-on time. Again, there is a dedicated GitHub repository, containing an array of example blocks. By inspecting any of these, Zac explains how to leverage existing elements in Gutenberg to create custom blocks.

The fifth section then provides some additions in the form of blog posts. This also allows for easier updating or adding content.

What Changed Since Version 1?

Gutenberg itself changes every other week; every now and then fairly drastically. This means that, since the first release of the video course, a whole lot of the JavaScript codebase has been changed, rewritten, extended, refactored, deprecated, simplified, renamed, streamlined, deleted, and fixed.

For the second version of the course, Zac rerecorded all of the videos. Thus, the Gutenberg code that is shown and explained in the videos is pretty much up to date—well, considering the time of release. Of course, Zac learned quite a lot of things since the first release, which means that his explanations here and there go deeper than before, and make even more sense than they already did.

Also, the structure and architecture of the example repositories changed quite a bit, and all in all is more straightforward.

Lastly, there are several new videos to be found, for example, one on the supports setting for the registerBlockType function, another one for the block alignment toolbar, and one on meta boxes.

My Very Personal Opinion

I really, really like the course!

I find it is very well structured, it is pretty extensive too, and it is suited for any kind of knowledge level or prior experience with Gutenberg.

Since reading something like “Oh I like it, it is awesome!” doesn’t really help to understand why that is, I am going to present three things where I see a particular need or at least possibility for improvements, and three things that I particularly like, while explaining my reasons for each of these things.

Three Things to Improve

Let’s start with the constructive criticism. While I really think that the course is awesome, there are pieces that I would have liked a bit differently.

However, it is important (to me) that these issues are not specific to this course (or specific to Zac!), but happen to exist in several other places too. I just decided to speak about these things in this post. Also, when talking about improvements, one always has to consider the context, and that it could as well be fairly subjective to think of the current state as something to be improved, or not.

So, I’m going to describe the individual issue in general, and then relate to the Gutenberg Development course.

Usage of (Correct) Technical Terms

Personally, I find it very important to use the correct technical terminology, where it exists. This is even more important for readers who are completely new to a topic.

In the Gutenberg Development course, the most prominent (bad) example is destructuring. Destructuring is a new feature of the JavaScript language, introduced with ES6. Considering that ES6, which is already several years old, is still news to a lot of people, it doesn’t help to not (always) use the correct term here.

Zac often refers to destructuring as deconstruction. And thinking about the semantics, it does make sense, yes. So one could describe the functionality like deconstructing an object (or array), and (re)creating distinct values from it. However, this is not what it is called, actually. No technical documentation or tutorial (I know) refers to it as deconstruction, so people trying to read up on this will not find anything helpful at all when searching the web for it.

No Nested Destructuring

Speaking of destructuring, the second issue is on the code level. Now, this is a pretty subjective one, indeed, but let’s hear it anyway.

Like I mentioned in the previous section, destructuring is a somewhat new feature in JavaScript. Seeing the destructuring syntax the first time weeks, it will look like a syntax error. 😀 The main reason for this is that destructuring did not introduce new operators or characters, but uses existing ones in a new way.

Here are some examples:

// Object destructuring:

const post = {
    title: 'The Answer',
    content: '42.',
};

const { content, title } = post;

console.log( title ); // The Answer
console.log( content ); // 42.


// Array destructuring:

const posts = [ 4, 8, 15, 16, 23, 42 ];

const [ firstPost, secondPost ] = posts;

console.log( firstPost ); // 4
console.log( secondPost ); // 8

Now, one could go even further, because destructuring does not stop at the first level. Also, one can rename destructured object properties/values on the fly.

const posts = {
    23: {
        title: 'The Question',
        content: 'What is the answer?',
    },
    42: {
        title: 'The Answer',
        content: '42.',
    },
};

const {

    // Renaming.
    23: question,

    // Nested destructuring, and renaming.
    42: { content: answer },

} = posts;

console.log( question.title ); // The Question
console.log( answer ); // 42.

Here, it does not really help that ES6 also introduced other features that somehow relate to destructuring, or can be used in conjunction with it. Features that are also new and at the same time ambiguous as well. Things that come to my mind are, for example, renaming an ES6-style module import, and the rest operator (which also can easily be confused with the spread operator). For newbies, it’s too many (new) things in one go, without any actual benefit, that is.

// Renaming an import with "as".
import { postsData as posts } from './data.js';

// Importing multiple exports into an object, also with "as".
import * as comments from './comments.js';

// Renaming a destructured property/value with the colon syntax.
const { 23: post } = posts;

publishPost( post );

// Discard first comment, and grab the rest with the rest operator.
const [ _, ...otherComments ] = comments;

// Pass comments as individual arguments, with the spread operator.
sanitizeComments( ...otherComments );

To sum it up, my advise is this: use destructuring, but only one level deep (per statement). If you have a multi-level/dimensional structure, go about destructuring in several individual statements/lines. The underlying reason is not to not use stuff that not everyone might know, but to not use (advanced) stuff without real benefit, while sacrificing readability.

const posts = {
    42: {
        title: 'The Answer',
        content: '42.',
        categories: [
            'life',
            'universe',
            'everything',
        ],
    },
};


// BAD:

const { 42: { title, content, categories: [ primaryCategory, ...otherCategories ] } } = posts;


// GOOD:

const { 42: post } = posts;
const { title, content, categories } = post;
const [ primaryCategory, ...otherCategories ] = categories;

And here a Gutenberg example:

// BAD:

const { attributes: { blockAlignment, textAlignment }, setAttributes } = this.props;


// GOOD:

const { attributes, setAttributes } = this.props;
const { blockAlignment, textAlignment } = attributes;

Thanks! 🙂

Minimalism and Focus

When learning some completely new technology, paradigm, language etc., I find it super helpful to have material that is rather minimalistic. What I mean by that is that it does not include anything that does not really contribute to the functionality itself, or explaining the functionality. It also helps when examples are focused on one thing at a time, meaning you will encounter examples that get more complex over time, and not have a single example that has it all right from the start, which means that it is rather inaccessible to inexperienced readers/learners.

In the Gutenberg Development course, there are quite a few different things that should not be there, in my opinion. Some of them might be leftovers from when trying out different approaches. Others might have a right to exist, from a functionality point of view, but could (and should) be refactored/simplified a little. And yet others do not help in understanding the actual aspect that is being explained.

Concrete things to name are the following:

  • almost always importing classNames, oftentimes without actually needing (or even using) it;
  • in general, having unused imports or destructured data;
  • having redundant constructors, which don’t do anything else than calling super( ...arguments );
  • using ternaries where one is interested in one outcome only—instead of something like isSomething ? <JSX /> : null or isSomething ? null : <JSX />, I would suggest to have isSomething && <JSX /> and isSomething || <JSX />, respectively.

Yes, yes, I know. Simply complaining here doesn’t do any good. I do hope that this is not seen as complaining really, though, but (also) some sort of educating. That said, over the next weeks, I will (try to) open up a few pull requests including less opinionated stuff.

On the other hand, I actually did that right after going through the first version of the course. Must have been forgotten. 😉

Three Things That are (Beyond) Awesome

After that wall of text about the things to be improved it is now time for some of the reasons why the course is just awesome. I already mentioned several times that I really like it, overall, so I had to think about individual reasons why that is the case. This was hard for me, because the course is great as a whole, which means that a lot of its parts obviously have to be great, too. In the end, the amount of text is way less than the criticism. Reasons for this include that I wanted to be perfectly clear when criticising stuff, to not be mistaken for someone who only wants to complain. That said, both the impact and the importance of the following, positive things, by far, outweigh the negative aspects from before.

So, here goes the Gutenberg Development awesomeness…

Contents and Structure

First of all, the actual course content is both fairly extensive and very well structured. It has lots of diverse topics, and, honestly, I am positive that almost no initial questions will remain unanswered. Except for things that people might not understand to the full extent, right away.

Sure. One can always elaborate and/or include further examples, use cases, or variations. However, I can’t think of anything crucial that is not included in the course, unless it is a fairly advanced topic in some special context.

Low Entry Barrier

Now, the single-best aspect of this course, from an educational point of view, is certainly that it is suited for absolute beginners, intermediate WordPress developers, and advanced engineers. (This, of course, also includes gold-medalist, black-belt WordPress [sic!] experts! 😀)

Despite the low entry barrier, the course does not just scratch the surface. Instead, it contains the most diverse contents, as mentioned before, which makes it such a valuable and at the same time accessible learning resource.

In addition to the great content itself, for almost everything that might be new to people, there is a sentence or two here and there: JSX, ES6, Babel etc. While Zac does not totally explain all these related things, he does mention them and then hands his students some words to read up on, if necessary.

Best Practices

Thirdly, throughout the whole course, Zac is advocating best practices all over the field. And actually, I realized and also mentioned that already while going through the first version of the course.

Even though I do not like Dirk Gently, at all, I think one way to describe it is that, while being focused on all the things Gutenberg, Zac is following a somewhat holistic approach to Gutenberg development. Going through the topics, Zac does mention coding best practices, and also different ways of doing or separating stuff, along with when what makes sense. I really like that.

Go Get the Course!

Honestly, I strongly recommend this video course to anyone who will (have to) be dealing with Gutenberg in the near future, and to virtually everyone interested in the development perspective. While I do not know about any other (developer-centric) educational resources about Gutenberg at all, I am absolutely sure that this course is—by the time of writing this—the best and most complete resource out there anyway.

Zac is involved in the development of Gutenberg as well as a lot of what’s happening around it. This means he is pretty much up to date all the times. And again, he just released an updated version of the course where he redid all of the videos, and also added three or four new ones about stuff that got introduced to Gutenberg since the initial release of the course. If you want to get up to speed in terms of Gutenberg, do not miss out on this course.

Sign. Up. Now! 🙂

Tags: , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *