When you learn a new programming language, the first thing you need to know is to understand its syntax. Only in this way can you start programming with it. Once you do this, you have everything ready to start creating.
- JSBooks: if you are one of those who prefer to learn with books, here you have a lot of them for free.
Learn React and Redux
This is what everyone will tell you, but the truth is that it is not like that. You can develop for Gutenberg without having any idea of React or Redux. Of course, if you know how they work and what they are used for, then that would be better.
Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.
React and, above all, JSX
What you can not avoid is to know how the JSX syntax works to create elements within React, which we will use to define the interface of our components (whether they are Gutenberg blocks or views within the editor).
Imagine that you want to define the interface for the
ShoppingList components and then use them in a Gutenberg block. With standard notation you would do it in the following way, using the
wp.element.createElement() function provided by Gutenberg:
On the other hand, if you use JSX within the
render() method, which is nothing more than a notation similar to HTML, what you have is the following:
Using JSX simplifies writing and reusing components, since the code is much simpler and easier to read. As you can see, in the previous example we are creating React components without having any idea of React, by only knowing how to handle JSX and using it as if it were HTML with superpowers. In addition, you can also use existing components in Gutenberg. You can see them in this viewer that is also linked to the official documentation.
There is only one problem. You will need to transpile the code with Babel so that the JSX notation ends up transforming into regular code that any browser can interpret. However, this is not a drama since you can do it automatically by using WebPack.
Redux to Maintain The Status of Your Application
If you had the need to create your own data store, you would not do it with Redux, but you would use the @wordpress/data package included in Gutenberg. This package uses Redux internally, but that doesn’t matter. Also, we’re talking about a complex use case that you probably don’t need, at least in an initial stage. So for now forget about it.
NPM, WebPack, Babel, PostCSS, and ESLint
- PostCSS: the same as Babel, but for your CSS stylesheets.
I already talked about most of these technologies here. However, I am going to write down another article soon, where I will explain how to integrate them into a WordPress development project so that you can use them in a real case.
How to Create New Blocks For Gutenberg
Now, let’s go for the most important part: what we need to start creating new blocks for the WordPress editor.
The first thing you need to start creating your own blocks is to master the function
wp.blocks.registerBlockType() . You will find the most complete documentation on this function in the official Gutenberg guide.
The arguments for this function are a string with the name of the block, which must be unique, and an object with the configuration of the block, where the most important parts are the
save and the
edit functions of the block. I already briefly explained this to you in this article.
If this seems too complicated, you can start using Ahmad Awais toolkit called
create-guten-block. This creates a folder structure with all the necessary dependencies to create your first block. You can see a tutorial on its use in the following video:
But I’m not going to explain it to you, I’ll let Mauricio Gelves do it. Go check his presentation on this subject in the WordCamp Zaragoza 2019 that you already have on WordPress.tv (in Spanish):
How to Extend the Block Editor in WordPress
There are many other things you can do with Gutenberg, in addition to creating new blocks. For example, you can create a plugin within Gutenberg to add a panel of options in the right side of the editor with everything you want. The best thing about this is that the official WordPress documentation includes this complete tutorial with concrete examples of what you can do there.
In addition to this, you can extend the WordPress editor by adding new styles to existing blocks, add more custom settings to the blocks, remove blocks or hide them, or filter the categories of blocks that you can have in the editor.
I recommend you take a look at the official documentation that you have in the Gutenberg handbook for developers and designers that you will find here. Take it easy because there is a lot of information and this is one of the best resources you have available.