This article on learning custom block development was first written in 2018, and it remains one of the most popular on this website.
Over the years, I’ve rewritten this article multiple times. Because my views have changed a lot.
As I wrote in The New WordPress Skill Hierarchy, learning custom block development is only the starting point. It acts as the foundation for the much broader application of JavaScript development.
With that in mind, I outline the 6 steps to really master developing custom blocks for the block editor.
Because not only will you learn to build your own blocks. You will also get an in-depth understanding of modern JavaScript, as well as the React and Redux libraries that Gutenberg uses.
This process will take a while. But the arrival of the block editor has dramatically changed WordPress forever. To future proof your development skills you need to invest time, money, and energy.
But enough with the introduction, you’re here to learn! So let’s get started.
Table of Contents
- Step 1: Creating content with the block editor
- Step 2: Refresh your JavaScript skills
- Step 3: Learn React
- Step 4: Learn Redux
- Step 5: Learn custom block development
- Step 6: Practice
Step 1: Creating content with the block editor
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 custom block development. In order to implement the best solution for an editorial problem, you need to familiarize 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 the block editor, and get you familiar with its user interface.
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: Refresh your JavaScript skills
Until this point, we have only interacted with the blocks that the Gutenberg block editor offers out of the box. Now we’ll take the first step towards building our own blocks.
The editor interface 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. Some of these features are not yet supported in common browsers, requiring ES6 to be transpiled (transformed) into ES5 during a so called build step. This designates transforming the source code into code that all targeted browsers can understand.
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.
If you prefer to learn via video, Wes Bos has an extensive video course called ES6 for Everyone. This course goes beyond what you would need to be familiar with for custom block development. But since ES6 will become the standard JavaScript version as soon as old browsers can be dropped, it’s knowledge that’s good to have.
The best aspect of the course is not the short, to the point videos, but it’s the carefully crafted learning process. This makes for a less steep learning curve compared to reading loosely related articles, and figuring out your own exercises.
If you are looking for a free alternative, and are quite accustomed to writing JavaScript, then I recommend the ES6 overview article over at PonyFoo. There’s also a series of articles detailing some of the added features.
Step 3: Learn React
The block editor is built with React, a JavaScript library for creating user interfaces. React is part of several third party JavaScript libraries used by Gutenberg.
To make things more complicated, WordPress adds its own abstraction layer over React. This means that the way to interact with this library is slightly different in 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.
A free but less recommended alternative is the beginner tutorial in the React documentation. It only scratches the surface of what is possible with React, and lacks the all important element of building a real world project.
Step 4: Learn Redux
Redux is the client side data handling layer used by Gutenberg. Again, as with React, WordPress 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.
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 5: Learn custom block development
With all this knowledge, you’ll be now more than ready to dive into Gutenberg itself. The best way to do this is to work through my Building Custom Blocks course.
This course will teach you everything you need to know to get started developing your own blocks.
The course covers:
- Classic and Block Editor Differences: Understand the fundamental difference when it comes to data retrieval and storage, interface design, and extensibility.
- Development Tools Set Up: Set up all the software you need to develop modern JavaScript applications.
- Block Development Foundations: How to setup a starter block with a single command.
- Development and Debugging Fundamentals: Learn how to identify and fix common issues during development.
- Creating the Editing Experience: How to use the WordPress Component Library to assemble blocks from premade pieces.
- Storing Data with Blocks: Understanding how blocks handle data through attributes, and how these are stored by WordPress.
- Styling Blocks: Learn the best, most effective way to style custom blocks for performance and extensibility.
- Adding Customization Options: Discover how to add customization options to your blocks. Anything that Core blocks have, your blocks can have as well!
- Introduction to Data Handling: Get an overview of the Redux-based data handling framework that WordPress provides.
- Data Handling in Blocks: Learn how to get, update, and delete data in the database from your blocks. This includes custom post types, custom taxonomies, and of course post meta.
- Creating Dynamic Blocks: Master developing PHP-rendered blocks. These blocks combine the best of both worlds, allowing full control over the frontend, while offering a great building experience in the admin.
Step 6: 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 the block editor in client or personal projects.
You will run into issues when exploring WordPress’ block 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.