How to make a Gutenberg Custom Block in minutesPosts
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.
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’ve ever fiddled with ReactJS and used
create-react-app… well, the principle is the same.
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
the boilerplate will create the plugin that will make our block available, including compilers for
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
dist: is the folder where you can find the compiled
src: is the folder where we’re going to get our hands on developing our 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.