Do you want to create a custom Gutenberg block for your WordPress site? After the WordPress 5.0 update, you need to use blocks to create content in the new WordPress block editor.
WordPress ships with several useful blocks that you can use when writing content. Many WordPress plugins also come with their own blocks that you can use.
However, sometimes you may want to create your own custom Gutenberg block to do something specific.
If youβre looking for an easy solution to create custom Gutenberg blocks for your WordPress site, then youβre in the right place.
In this step by step tutorial, weβll show you the easy way to create a custom WordPress block for Gutenberg.
Note: This article is for intermediate users. Youβll need to be familiar with HTML and CSS to create custom Gutenberg blocks.
Step 1: Get Started
The first thing you need to do is install and activate the Block Lab plugin.
Itβs a WordPress plugin that allows you to create custom blocks from your admin panel without much hassle.
To install the plugin, you may follow our beginnerβs guide on how to install a WordPress plugin.
Once the plugin is activated, you can proceed to the next step of creating your first custom block.
Step 2: Create a New Block
For the sake of this tutorial, we will build a βtestimonialsβ block.
First, head over to Block Lab Β» Add New from the left sidebar of your admin panel.
On this page, you need to give a name to your block. You can write any name of your choice in the βEnter block name hereβ textbox.
We will name our custom block: Testimonials.
On the right side of the page, youβll find the block properties. Here you can choose an icon for your block and select a block category from the Category dropdown box.
The slug will be auto-filled based on your blockβs name, so you donβt have to change it. However, you may write up to 3 keywords in the Keywords text field, so that your block can be easily found.
Now letβs add some fields to our block. You can add different types of fields like text, numbers, email, URL, color, image, checkbox, radio buttons, and much more.
Weβll add 3 fields to our custom testimonial block: an image field for the image of the reviewer, a textbox for the reviewer name, and a textarea field for the testimonial text.
Click on the + Add Field button to insert the first field.
This will open up some options for the field. Letβs take a look at each of them.
- Field Label: You can use any name of your choice for the field label. Letβs name our first field as Reviewer Image.
- Field Name: The field name will be generated automatically based on the field label. Weβll use this field name in the next step, so make sure itβs unique for every field.
- Field Type: Here you can select the type of field. We want our first field to be an image, so weβll select Image from the dropdown menu.
- Field Location: You can decide whether you want to add the field to the editor or the inspector.
- Help Text: You can add some text to describe the field. This is not required if youβre creating this block for your personal use.
You may also get some additional options based on the field type you choose. For example, if you select a text field, then youβll get extra options like placeholder text and character limit.
You can click on the Close Field button once youβre done with the image field.
Following the above process, letβs add 2 other fields for our testimonials block by clicking the + Add Field button.
In case you want to reorder the fields, then you can do that by dragging them using the hamburger icon on the left side of each field label.
To edit or delete a particular field, you need to hover your mouse over the field label to get the edit and delete options.
Once youβre done, click on the Publish button, present on the right side of the page, to save your custom Gutenberg block.
Step 3: Create a Block Template
Although youβve created the custom WordPress block in the last step, itβll not work until you create a block template named block-testimonials.php and upload it to your current theme folder.
The block template file will tell the plugin how to do display your block fields inside the editor. The plugin will look for the template file and then use it to display the block content.
If you donβt have this file, then itβll display an error saying βTemplate file blocks/block-testimonials.php not foundβ.
Letβs create our blockβs template file.
First, go ahead and create a folder in your desktop and name it blocks. Youβll create your block template file inside this folder and then upload it to your current WordPress theme directory.
To create the template file, you can use a plain text editor like Notepad.
Every time you add a new field to your custom block, you need to add the following PHP code to your block template file:
1 | <?php block_field( 'add-your-field-name-here' ); ?> |
Just remember to replace add-your-field-name-here with the field name.
For example, the name of our first field is reviewer-image, so we will add the following line to the template file:
1 | <?php block_field( 'reviewer-image' ); ?> |
Simple, isnβt it? Letβs do the same for the rest of our fields:
1 2 3 | <?php block_field( 'reviewer-image' ); ?> <?php block_field( 'reviewer-name' ); ?> <?php block_field( 'testimonial-text' ); ?> |
Next, weβll add some HTML tags to the above code for styling purposes.
For example, you can wrap the reviewer image inside an img tag to display the image. Otherwise, WordPress will display the image URL which is not what you want, right?
You can also add class names to your HTML tags and wrap your code inside a div container to style your block content (which weβll do in this next step).
So hereβs our final code for our block template:
1 2 3 4 5 6 7 8 9 | <div class = "testimonial-block clearfix" > <div class = "testimonial-image" > <img src = "<?php block_field( 'reviewer-image' ); ?>" > </div> <div class = "testimonial-box" > <h4><?php block_field( 'reviewer-name' ); ?></h4> <p><?php block_field( 'testimonial-text' ); ?></p> </div> </div> |
Finally, name the file as block-testimonials.php and save it inside the blocks folder.
Step 4: Style Your Custom Block
Want to style your custom block? You can do that with the help of CSS.
Open a plain text editor like Notepad and add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .testimonial-block { width: 100%; margin-bottom: 25px; } .testimonial-image { float: left; width: 25%; padding-right: 15px; } .testimonial-box { float: left; width: 75%; } .clearfix::after { content: ""; clear: both; display: table; } |
Once done, name the file as block-testimonials.css and save it inside the blocks folder.
Step 5: Upload Block Template File to Theme Folder
Now letβs upload the blocks folder containing our custom block template file to our WordPress theme folder.
To do that, you need to connect to your WordPress site using an FTP client. For help, you may check out our guide on how to upload files to your WordPress site using FTP.
Once youβre connected, go to the /wp-content/themes/ folder. From here you need to open your current theme folder.
Now upload the blocks folder, containing the block template file and the CSS file, to your theme directory.
Once done, you can proceed to the final step to test your custom block.
Note: Block Lab plugin allows you to create theme-specific blocks. If you change your WordPress theme, then you need to copy the blocks folder to your new theme directory.
Step 6: Test Your New Block
Itβs time to test our custom testimonials block. You can do this by heading over to Pages Β» Add New to create a new page.
Next, click on the Add Block (+) icon and search for the Testimonials block. Once you find it, click on it to add the custom block to your page editor.
You can now add a testimonial to this page using your custom block. To add more testimonials, you can always insert new testimonial blocks.
Once youβre done, you can preview or publish the page to check whether itβs working properly or not.
Thatβs all! Youβve successfully created your first custom WordPress block for your site.
Did you know that you can save time with reusable blocks in your editor? Check out our guide on how to easily create reusable blocks in the WordPress block editor and use them on other websites.
You may also want to see our guide on how to create a custom WordPress theme without writing any code.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.