One of the biggest challenges developers have to face with WordPress is to recycle our knowledge to adapt to the new programming paradigm behind the new block editor. The main change with Gutenberg is the new stack of technologies used. Usually a WordPress developer created plugins using PHP mainly, with minor parts written in JavaScript. Now the key tool is JavaScript, leaving PHP as just a basis to create the structure of plugins and themes.
You may think that this is not the case and that PHP still has a long journey in WordPress. I do not blame you for it, as changes always are difficult to accept. However, I think you’re wrong. JavaScript is no longer the future of WordPress, but the present. And if you want to maintain your position, you’ll need to get up to speed with it right now.
Fortunately, although they have insisted that we must learn JavaScript deeply, I think that is not the case. Knowing some minimums that any tutorial can teach you is more than enough. You can learn everything else you will need to start developing for Gutenberg quickly thanks to the resources that I will describe throughout this article.
Learn JavaScript
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.
If you have never done anything with JavaScript before, these are some tutorials in different formats that will help you get started:
- JavaScript Language Basics: free course by Zac Gordon in video format.
- JavaScript 30: learn by doing with a challenge every day for 30 days with Wes Bos in this free course.
- A re-introduction to JavaScript: brief introduction to JavaScript by the guys at Mozilla.
- JavaScript For Cats: another introduction to JavaScript with certain touches of cat humor.
- Exercism.io: free web where you can do exercises in JavaScript and upload your solution for a mentor to evaluate it.
- JSBooks: if you are one of those who prefer to learn with books, here you have a lot of them for free.
Conversely, if you already have some experience using JavaScript, expand your knowledge by studying advanced concepts about the functions, asynchronous execution with promises and async / await, and in short, everything related to ESNext.
With a day of JavaScript training should be more than enough to acquire the basic knowledge to move with ease in everything related to what you will need to develop on top of the WordPress block editor.
Learn React and Redux
In addition to JavaScript, to develop on the WordPress block editor you will need to have certain notions of 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.
Nelio Popups
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.
Juan Hernando
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 Product and 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
On the other hand, you probably heard about Redux. It’s a tool to save and manage the status in JavaScript applications. Again, if you’re interested in learning how to use it, I recommend these Wes Bos videos, but it’s not necessary either.
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
In addition to JavaScript and basic notions of React and JSX, for the new era that is already here in WordPress you will need to know the following technologies so that your developer tasks are much simpler and highly automated:
- NPM: the dependency manager for JavaScript. Just define the dependencies that you need and install them by doing
npm install. - WebPack: the JavaScript bundler. It is not easy to configure at the beginning, but once you have it, it facilitates the work of managing JavaScript files: transpilation, minification…
- Babel: the JavaScript compiler to be able to use the syntax of the next versions of this language today.
- PostCSS: the same as Babel, but for your CSS stylesheets.
- ESLint: detects JavaScript usage and style errors so you can avoid them while you are writing code.
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:
Finally, if this still seems too complex, you have one last option available. Surely you know the plugin Advanced Custom Fields (also known as ACF, for short). Well, this plugin will allow you to create blocks for Gutenberg without having any idea of JavaScript.
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.
Featured image by Christian Fregnan in Unsplash .
Leave a Reply