How to create a custom Gutenberg Block in WordPress?
Do you want to build a custom block in WordPress Gutenberg editor? After WordPress 5.0 update, you need to make use of create content in new Gutenberg block editor. WordPress comes with various useful blocks that you can use for writing content. Many plugins also comes with their own block that you can use.
However, sometimes you need your own custom Gutenberg blocks to do specific tasks. I f you are searching for an easier solution to build your own custom block then follow our step by step guide to create a custom Gutenberg block.
Step 1:- Get Started:
The Initial thing you need to do is to install & activate Block Lab Plugin. It’s a plugin that enables you to build custom blocks from admin panel without hassle.
After the plugin is activated, you may proceed to next step of creating you custom block.
Step 2:- Create a New Block:
First, Navigate to Block lab>> Add New from left side of admin panel. On this page you have to give a name for your block. You can write any name in the textbox.
On the right sidebar of this page, you will find block properties. You can select your block icon & a category from the drop down category list.
Slug will be auto-created based on your block title so you don’t need to change it. However you can write a keyword in the particular section.
Now add some additional fields to block. You can choose any fields like text, email, numbers, url, color image, checkbox, radio buttons and much more.
Click on + Add field button to choose & insert your first field and enter its value.
This will open some options for the field. Let’s have a look at each of them.
- Field Label:- You can enter any name of your choice based on block type.
- Field Name:- The field name is auto generated based on field label. This field name is useable in the next step, so it needs to be unique for every block.
- Field Type:- You can choose a field type based on your section needs.
- Field Location:- You have to decide whether you have to add the field to editor or inspector.
- Help Text:- Here you can add description text for the block.
Also you get some additional options based on field type you select. In case you want to change the order of fields you can do that by using hamburger icon on left side of each field label.
To edit or delete specific field, you need to hover your mouse over the field to get the options for edit & delete. Once you done click on Publish button.
How to create a custom Gutenberg Block in WordPress?
Step-3: Create a block template:
Although you’ve build the custom WordPress block in the previous step, it doesn’t work until you create a block template and upload it to current theme folder.
The block template file will describe the plugin how to show your block fields inside editor. The plugin will review the template and then use it to display block content.
If you don’t have this file uploaded then it will show error as template file not found.
Let’s create block’s template file.
Step 4:- Style your custom block:
Do you want to style up your created block? you can do so with the help of CSS. open a text editor like notepad and add this code:
.section-block {
width: 100%;
margin-bottom: 25px;
}
.section-image {
float: left;
width: 25%;
padding-right: 15px;
}
.section-box {
float: left;
width: 75%;
}
.clearfix::after {
content: “”;
clear: both;
display: table;
}
Once done, name the file as block-section.css and save it inside the blocks folder.
Step-5: Upload block template file to theme folder:
Now upload the blocks folder containing custom block template file to theme folder. Once done you can test your custom block.