Shortcut to Gutenberg: How To Learn Gutenberg Development in 6 Days

Recently I published How To Learn Gutenberg Development, which outlines a roadmap for learning ES6, React, Redux, and Gutenberg. This is a proven, and sure way to master Gutenberg.

But this approach also takes time. In fact several readers have reached out to me expressing that they don’t have time for a long learning process. With WordPress 5.0 arriving on 27 November, developers need to be productive with Gutenberg right now.

As a consequence I’ve reworked my initial learning approach, to fit with this short timeframe. The learning process outlined below takes 6 days, or 3 weekends, or 48 hours. At the end of it, you’ll be able to:

  • Adapt existing WordPress themes to work with Gutenberg content.
  • Add Gutenberg specific features to themes.
  • Understand the basics of React.
  • Feel comfortable exploring Gutenberg’s user interface component library.
  • Develop custom Gutenberg blocks.

As this is an accelerated schedule, it’s important that you get rid of all distractions. In addition make sure that you do not exceed 8 hours of screen time per day. Once you have completed the assignment for each day, you have done all that is needed for the learning progress.

So when in doubt, err on the side of spending less time in front of the screen, and more time relaxing. Furthermore it is important that you decompress at the end of each day, and get enough sleep. Only this will ensure that you memorise what you worked through. 

And with that, let’s get started!

Day 1

Morning: Create content with Gutenberg

If you have used Gutenberg regularly for creating content in WordPress, you might skip this step. However if you’re new to Gutenberg, then this is an important starting point in the learning process.

Set up a local installation, with the Gutenberg plugin, and the Twenty Nineteen theme. Then start creating content: write a post, recreate the layout of an existing article, or play around with the available blocks.

Meanwhile do not worry about how the content displays on the front end. Keep your efforts limited to the Post Editor itself. The objective is to familiarise yourself with the user interface and editing process of the Gutenberg editor.

Afternoon: Gutenberg Theme Development course

By now you should be well acquainted with using Gutenberg. Time to dive into development.

Sign up for the Gutenberg Theme Development course. This is a paid course, but as you want to save some time, you got to spend some money.

Once you have signed up, work through the first three parts of the course:

  1. Gutenberg Compatible Themes.
  2. The Gutenberg Starter Theme.
  3. Styling Default Blocks.

As everybody learns at their own pace, you might have some extra time after working through these chapters. If so, use this additional time to practise what you just learned. That is to say make an existing theme Gutenberg-ready.

For this you can install the Block Unit Test for Gutenberg plugin. This plugin creates an overview page with all the Core blocks, including multiple variations if supported. It is therefore a great starting point for adapting a theme.

Day 2

Morning: Gutenberg Theme Development course

Continue working through the Gutenberg Theme Development course by completing the chapter on Custom Colour Palettes. This chapter should be relatively straightforward, so move through it quickly.

After that, work through part 5 of the course: Block Templates. As this is a more complex topic, make sure to take your time to work through the lessons.

Afternoon: Theme development exploration

If you haven’t completed the theme development course yet, then use the afternoon to finish it.

However if you finished the course, take the afternoon to review some of your existing client projects, and brainstorm how they could leverage Gutenberg.

Because surely there are custom implementations using metaboxes, shortcodes, page builders that could be replaced by Gutenberg blocks. Take notes on any possible solutions that you come up with, and take note of any issues you run into.

Day 3: Learning React

After the introduction to Gutenberg, it’s now time to dive into learning React.

Above all it is important that you don’t buy into the common misperception among WordPress developers that React is hard. In opposition to WordPress, React has a low barrier to entry, great documentation, and is a pleasure to work with.

The best concise introduction to React is the official Intro To React tutorial.

Keep a pen and paper ready while working through the tutorial. When something seems unclear, or unfamiliar, note it down. But do not allow yourself to get distracted from completing the tutorial.

You should be able to complete the tutorial within a day. If you finish early, and still have energy left, feel free to pass on to the assignment for the next day. If you feel tired, log off, and rest up.

Day 4: React & JavaScript practice & exploration

The day before, you got your first introduction to React. You also more than likely have written more JavaScript than you would usually during a work day. Which is great, as this hopefully has shown you how fun writing React is.

Additionally, you might have noted down a lot of concepts that were unclear to you. Therefore you should take a day to research and clarify any of these outstanding questions.

For React, it makes sense to review the main concepts again. For JavaScript, you might have encountered syntax that was unknown to you. This is likely due to the code examples using ECMAScript 6, so check out this overview article of these new language features.

If you feel like you need more practice with the basics, try and recreate the app build during the tutorial on your own. If not you can go beyond the tutorial, and build a basic to do list app. Keep it simple, and just use the component state for storage.

Day 5 & 6: Gutenberg Development Course

Days 5 and 6 will build upon all the work done previously, to introduce you to custom Gutenberg block development. The best way to do this is to sign up for work the Gutenberg Development Course. This is a paid course, but well worth the money.

In opposition to the previous days, I won’t detail the learning process here. This is because the course is well designed, and will guide you step by step.

You have two days to complete the course, which is enough that you do not need to take shortcuts. Especially towards the end of the course, the subjects covered get more and more complex. So take your time to digest the material well.

However if you finish early, go back to your previous notes about features you could refactor using Gutenberg. Choose one that seems simple to you, and try to code it.

Additionally if you liked the two paid courses, you might want to get on the pre-sale of the Advanced Gutenberg Development topics, which will be released at end of the year. 

Conclusion

While I did not follow the exact learning roadmap outlined in this course (I took a longer path), it is in essence a short version of the path towards Gutenberg that I took. I therefore consider this the best possible approach for the available time frame. 

Beyond just the skill building, my hope is that this hands on approach learning process has eased any anxiety you might have had about Gutenberg.

Let me know about your experiences with this learning approach. I’m happy about any feedback or suggestions.

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.