In this custom block development article we are going to learn how we can add our own custom categories for our custom blocks and also how can we add multiple blocks in a single plugin. This is the fifth article in our series of custom block development and if you haven’t read the previous articles yet make sure to check them out.
Up until now, we have learned how we can create a basic custom block with some editing functionality using both ES5 and ESNext versions of JavaScript. But we have only worked on a single block up until now and adding blocks in the same common category.
Now let’s move further by first adding our own category for our custom blocks.
Table of Contents
What is Block Category
So first let’s start by knowing by block category what we are meaning if you don’t know. Basically, when you go to block editor and try to add a custom block you’ll find a block to be inside of some of the predefined categories created by WordPress as highlighted in the image above.
Step 1: Register Category
Now to add our own category we need to make changes inside our plugin.php file. For now, let’s just create a new category named Custom Category. To add that we need to add the following code in our plugin.php:
// Add custom block category "Custom Category"
function add_block_category( $block_categories ) {
array_push(
$block_categories,
array(
'slug' => 'custom-category',
'title' => 'Custom Category', 'advance-custom-plugin',
'icon' => null,
)
);
return $block_categories;
}
add_filter( 'block_categories_all', 'add_block_category' );
Make sure you have pasted this code outside the register block function. Now to make the code work we have declared a function with $block_categoriesas variable. In the function, we have pushed an array and added our new category in that array, and in the array, we have pushed our category details.
We have added three things in the config array first slugso we can reference this category from our plugin script. The second thing is titlethe actual name of our category which will show in the editor and with that name of our plugin so later it won’t conflict with another plugin. Third and the last thing isicon, we can use dashicon as an icon or SVG but I have kept it null so no icon will be visible.
Step 2: Assign Category to Block
Now the second and last step is to assign our newly created category to our custom block. To do that just go to our block js file and inside registerBlockType()function find categoryand replace the name with the category slug that you have defined when registering the category.
Now first run the npm run start command in the terminal to make the changes load on the website. Now when you go back to your block editor and refresh the page you’ll see our custom block in our newly created category. As shown in the above image as well.
Show Block Only in Selected Location
One very useful thing to know is how we can limit our custom blocks for certain locations such as on our blog post or page or in some post category as well. With this method, you can choose where you want your custom blocks to be accessible and that can very handy in some cases. So let’s learn about them as well.
To do that, we just need to check the post type before registering the custom block like shown in the code below:
if ( get_post_type() == 'post' ) { //checking post type
foreach( $blocks as $block ) {
register_block_type( $block, [
'style' => 'style',
'editor_script' => 'wpt-block',
] );
}
}
In the code above we are getting post type from the get_post_type()function and checking if that is a post if it is a post then it will show the blocks and if not it won’t show the block in the block editor.
Add Multiple Custom Blocks
Now let’s see how we can add multiple custom blocks in one single plugin and category since we are not gonna make just one block or add multiple plugins for adding a custom block.
To do that we need to do two steps, first, we need to create a new custom block in our Script file and the second is to register that new block from our PHP plugin file. Now the easier approach will be to use the registerBlockType() function in the same script file and edit the detail of the block and in our plugin.php register the block using register_block_type()but that won’t be very efficient if we want to create multiple blocks. So we will use a neater solution than that.
For this example, I am adding two new blocks total of three blocks with different names but with the same functionality for the demo. So let’s begin;
Step 1: Create New Folders and Files for Block
First, we will create three new folders for our three new blocks just to organize them better. You can name folders whatever you like I am naming them wpt-block-1, wpt-block-2, wpt-block-3. Now create three new files inside those folders and name all three of them index.js.
Now cut all the code from our main index.js which exists in the src folder and paste that code in those three index.js files that we have created. Rename the block name in all three files according to the folder you should change both the first parameter of registerBlockType()function and the name in the second parameter object or same function.
Now in the main index.js file import those three blocks as comments. Now your src/index.js file has the code shown below.
/** * Import blocks as components. */ import "./wpt-block-1"; //folder name import "./wpt-block-2"; import "./wpt-block-3";
Step 2: Register All Blocks
Now we need to register all three blocks to do that first we need to create an array variable that has the name of all three blocks we have created, this name will be the name we have used in our first parameter of the registerBlockType()function of block script. As shown below:
// name of the all the blocks inside an array
$blocks = [
'wpt/wpt-block-1',
'wpt/wpt-block-2',
'wpt/wpt-block-3'
];
Now we will use the foreachloop to register all the blocks one by one, as shown in the code below:
// Register block script and style in loop.
foreach( $blocks as $block ) {
register_block_type( $block, [
'style' => 'style', //block stylesheet
'editor_script' => 'wpt-block', //block script file
] );
}
We have used the same stylesheet and script file for all our blocks, you can use a different style sheet for your blocks just parse the style sheet based on a block. You can use different scripts as well but I won’t recommend that because then you need to change your babel and webpack config which I don’t recommend for now.
The array and loop will be added inside our register_block_type()function and complete code will be like shown below:
<?php
/**
* Plugin Name: Advance Custom Blocks
* Plugin URI: https://github.com/
* Description: A Custom block created for learnirng by WebProTime team.
* Version: 1.0.0
* Author: WebProTime
*
*/
function add_block_category( $block_categories ) {
array_push(
$block_categories,
array(
'slug' => 'custom-category',
'title' => 'Custom Category', 'advance-custom-plugin',
'icon' => null,
)
);
return $block_categories;
}
add_filter( 'block_categories_all', 'add_block_category' );
function wpt_register_blocks() {
// Check if Gutenberg is active.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
// Add block script.
wp_register_script(
'wpt-block',
plugins_url( 'build/index.js', __FILE__ ),
['wp-blocks', 'wp-editor'] //dependencies
);
// Add block style.
wp_register_style(
'style',
plugins_url( 'build/style.css', __FILE__ ),
[]
);
// name of the all the blocks inside an array
$blocks = [
'wpt/wpt-block-1',
'wpt/wpt-block-2',
'wpt/wpt-block-3'
];
// Register block script and style.
foreach( $blocks as $block ) {
register_block_type( $block, [
'style' => 'style',
'editor_script' => 'wpt-block',
] );
}
}
add_action( 'init', 'wpt_register_blocks' );
And our plugin folder structure will be like the shown image above:
Now with that, we can see our three new blocks in the block editor and we can use all three of them however we want. In the above image, you can see all three blocks listed in our newly created category.
Conclusion
Now we have learned how we can add a new category for our block and add multiple blocks in one plugin. The proper structure of our block is very important especially if you wanna add multiple blocks with complex designs so always try to format your code properly.
You can get the complete source code used in this article and in the complete series on my Github repo.
If you have any doubts, questions, suggestions regarding this article make sure to share them below. We would love to hear from you. Our series is not over yet so make sure to read other upcoming articles as well.