How to Create Custom Gutenberg Block

Gutenberg block is the future of WordPress. This blog helps you in the development of a custom Gutenberg block from scratch. I am using ES6 and JSX in my code so you need to install npm.

How to create a custom Gutenberg block If you are using ES5 then you don’t need to install npm. How to create a custom Gutenberg block?

Contents

Create Custom Gutenberg Block

I am preferring the ES6 concept because it is simple compared to ES5 and it gives you the freedom to write both javascript and HTML code at the same time using the concept of JSX.

If you want to create a Gutenberg block using ES6 then simply follow the below steps for creating your first beautiful Gutenberg block.

If you are using any default theme of WordPress like twenty nineteen then there will be one file named package.json but if you are using any custom theme then you need to generate package.json first. create custom Gutenberg block

package.json is a file that is mainly used to store the metadata associated with your project. It is also used to store the list of dependency packages.

If you want to add any package to your project then you need to create a package.json file.

Create package.json file

To create a package.json file, first of all, move to your theme’s root directory and run the following command.

npm init

After running the above command it will prompt some questions. Answer all the questions and that’s it.

You have successfully generated your packge.json file. You can see it inside your theme’s root directory.

Install NPM

Move to your theme’s root directory and run the following command.

npm install

After running this command you can see one folder named node_modules added inside your theme’s root directory which contains all the required packages and modules.

Create build and src folder

After installation is completed, create one folder named src inside your theme’s root directory and add your js file inside it. Note: It is required to name your js file as index.js as react starts rendering all the components from the index.js file.

Add one another folder named build inside your theme’s root directory.

Note: Don’t add any files now inside the build folder as it will automatically add a minified version of your index.js file when running the npm build command.

Edit your package.json file

Now, open your package.json file and add the following line inside the script array.

"build:scripts": "wp-scripts build"

This will simply start building your script when you fire npm run build: scripts command and add a minified version of your index.js file inside the build folder which you created previously.

Create Required Files

Now, our real work starts. Create the following files.

index.php
index.js

index.php You can create this file anywhere you want and include it in your theme’s functions.php file.

In the index.php file, you need to create one function in which you need to register your script first using

wp_register_script

The function and add another function named.

register_block_type

Which contains your namespace as a first parameter and an array of scripts as a second parameter.

index.js In the js file, you can write code for all the custom blocks you want to add inside the default function named registerBlockType. you also need to import some packages from WordPress before you start writing any codes.

Run NPM

After you have written your code for your first custom Gutenberg block then you need to run a command for running your script using the following command.

npm start-build

After running this command your scripts will start building and you can see a message like wp-scripts start as shown in the screenshot below.

Now, open your posts section click on add block in the left top, and search for your custom block. add some content inside it and save it. after saving your post view post you can see your first custom block there.