How to make a Gutenberg Custom Block in minutes

Posts

We are in 2020 and it is useless to say that by now the default WordPress editor, Gutenberg, is a solid reality.

Developers who were having trouble digesting the new editor’s block system have now come to terms with reality, and custom block development has become a must-have in the toolbox of all WordPress developers.

Surely, for a PHP developer, having to digest Javascript is not immediate, but this is also something that WordPress developers have to accept (not only because of Gutenberg, but Javascript is an established trend in web development).

Developing a custom block might seem difficult at first sight, I personally found myself in the condition where the best solution (and cleanest for UX in the backend) was to create a Gutenberg block from scratch.

If you are in the same situation as me and don’t have much experience in Javascript and JSX, I recommend this very useful Boilerplate: create-guten-block.

If you’ve ever fiddled with ReactJS and used create-react-app… well, the principle is the same.

Getting started

First, we install create-guten-block globally with

npm i create-guten-block --global

Once that’s done, all we have to do is go into the WordPress plugins folder and give

create-guten-block my-block

the boilerplate will create the plugin that will make our block available, including compilers for SCSS and JSX.

This is the folder structure that will be created:

├── .gitignore
├── plugin.php
├── package.json
├── readme.md
|
├── dist
|  ├── blocks.build.js
|  ├── blocks.editor.build.css
|  └── blocks.style.build.css
|
└── src
   ├── block
   |  ├── block.js
   |  ├── editor.scss
   |  └── style.scss
   |
   ├── blocks.js
   ├── common.scss
   └── init.php

Let’s figure out exactly what these files do.

Folder structures and files

plugin.php: It requires init.php, and is the file where WordPress indicates the presence of our Plugin/block. In init.php we can write the PHP that we will eventually need for the block and where we will insert the compiled js and CSS files

dist: is the folder where you can find the compiled CSS and js files

src: is the folder where we’re going to get our hands on developing our block.

block/block.js: here you can find the Javascript code necessary to run the block

editor.scss: here is the style that will affect the backend of the block, i.e. how we will display it in the gutenberg editor

style.scss: here is the style of the frontend, i.e. how the block will appear on the web page

common.scss: here we can insert all the elements in common, such as variables, mixins, etc.

In any case, the developer has left very clear comments in every part of the code and in every file, making the understanding of what happens extremely simple.

Develop the block

Once the creation process is finished, we simply give npm start to start compiling and the task watch that will compile the code for every change we make.

The boilerplate allows you to work in development mode and in production mode, after our block is tested and finished.

Specifically, we can work in development with npm start and prepare the block for production with npm run build.

Another possibility is npm run eject which allows us to extract the plugin/block from create-guten-block, so that we can customize the project completely. However, this involves maintaining and updating all dependencies manually.

Activate and use the block

We just have to go to the Plugin tab in the WordPress backend and activate our newly created plugin/block.

In the editor, just click on the button to add a block and you’ll find it there ready to use.

From here on you just need to modify and customize the block to meet your needs.
Which we will deal with in the next posts.