Gutenberg Block Development: Register a custom category

WordPress provides predefined categories for the blocks like "text", "media", "design", "widgets", and so on. You can easily use those predefined categories while registering a custom Gutenberg block, and you only need to add the category slug into the block.json file.

🙋‍♂️ Why do we need to register a custom category?

Nowadays, most of the WordPress themes and plugins are packaged with different custom Gutenberg blocks. So, for organizing multiple custom blocks for a WordPress theme or plugin, it is an intuitive and user-friendly option to assign all of the custom Gutenberg blocks to an individual custom category. This not only helps you stay organized as a developer but also makes it easier for users to find and use the Gutenberg blocks.

💎 How to register a custom category?

We need to use the "block_categories_all" filter hook for registering a custom category. This filter takes a callback function, and we will attach the new custom category with the existing categories.

💡The "block_categories_all" filter introduced in WordPress 5.8.

You can add the following filter to your theme's functions.php or create a custom plugin.

add_filter("block_categories_all", "set_block_category_cb");

✅ Prepare set_block_category_cb function

Now, we will write the callback function. The callback function takes the $categories as a parameter and adds the new custom category to it and returns the modified array using the array_merge function.

In the following function, we have added a new category with the title "Petitions Manager Blocks", and the slug is "bptm-gt-blocks".

🚨 Note that the slug must be unique, and we will use this slug value in the block.json file.

function set_block_category( $categories ) {
 return array_merge(
   $categories,[
    [
     'title' =>  'Petitions Manager Blocks',
     'slug' => 'bptm-gt-blocks'
    ],
   ]
  );
}

Output:

Congratulations! Now you have successfully registered the custom category.

🚀 How to use the custom category?

Open the block.json file, and find the "category" attribute. Now update the value with the registered slug. For example, our custom category slug is "bptm-gt-blocks" and we have set that value in the category attribute.