How to Create a Custom Category in Gutenberg

Custom Category is essential when you want to organize your custom blocks under a specific category. Suppose you have several Custom Gutenberg Blocks and you want to keep them under your own new category, in this case, you have to register a new category in Gutenberg. 

In this post, I will show you how to create a custom category in Gutenberg Block Editor easily and assign your custom blocks to your new category. So, let’s enjoy this season. 

Register a New Custom Category

To register a new custom category in Gutenberg Block Editor, we have to use a filter hook named block_categories. So, simply create a function and hook the function with this filter hook. It looks like the following codes- 

function custom_category( $categories ){
    return array_merge(
        $categories,
        array(
              array(
                  'title' => 'Custom Blocks',
                  'slug'  => 'custom-blocks'
              )
        )
     );
}
add_filter( 'block_categories', 'custom_category' );

As a result, a new category named Custom Blocks is created in Gutenberg Block Editor. But it is not visible yet. Because a category doesn’t become visible until at least a block is assigned.

Assign a Block to New Category

It is very easy and simple to assign a block to a new category. During the registration of a block, you will find a Category option to assign the category name for the block. Simply use your new category slug to assign the block to the category. In this custom blocks category, it will look something like this-

registerBlockType( 'bcb/block_name', {
    title: __( 'Block Title' ),
    description: __( 'Block Description' ),
    icon: 'cart',
    category: 'custom-blocks',
    keywords: [
       __( 'Keyword' ),
    ],
    attributes, 
    edit = () => {
    },
    save = () => {
    },
} );

Now, you will find your block is visible under your new category. That’s it. Really very simple and easy. 

I hope you have enjoyed it. If you are looking for a developer to convert your design into a Custom Gutenberg Block, please write to me your requirements.