Create Custom Categories for Blocks

When you create a block.json file for your custom Gutenberg block, you will need to provide a category parameter into it.

By default we can use one of the default ones:

• text – Text,
• media – Media,
• design – Design,
• widgets – Widgets,
• theme – Theme,
• embed – Embeds.

But with the help of block_categories_all filter (block_categories in case you’re still using WordPress 5.8.0 version or below) you can create a new block category easily.

For example let’s take a look at this custom category created by Jetpack plugin:

And this is our custom category:

In case you’re wondering what blocks I am using inside my “Blocks by Misha” category:

• “Subscription” – this block is a part of my in-depth video course about developing custom blocks for Gutenberg.
• “Carousel” – it is my plugin that adds a simple Swiper-based carousel block.
• “Map” – it is my another plugin which adds a Google Maps block.

Well, let’s finally add a block category – as simple as that:

add_filter( 'block_categories_all', 'misha_new_block_category' );

function misha_new_block_category( $block_categories ) {

	$block_categories[] = array(
		'slug' => 'misha-blocks',
		'title' => 'Blocks by Misha'
	);

	return $block_categories;
	
}

How to Reorder Block Categories

Just a couple of simple steps and we are good to go:

1. Create an array with your new category element which is also an array. Use any random string as an array element index.
2. Decide about at what position your custom category should appear. Do not forget, the count in arrays starts from 0, so if you set 2 as a category order, then it will appear at 3-rd position.
3. Use array_splice() function to split the array with default block categories into two arrays and then use + operator to combine all three arrays into a single one.
4. Use array_values() to reset array indexes, so no more “literallyanything” key in it.

The complete code:

add_filter( 'block_categories_all', 'misha_new_block_category' );

function misha_new_block_category( $cats ) {

	// create a new array element with anything as its index
	$new = array(
		'literallyanything' => array(
			'slug'  => 'misha-blocks',
			'title' => 'Blocks by Misha'
		)
	);

	// just decide here at what position your custom category should appear
	$position = 2; // 2 – After Text and Media, so technically it is a 3rd position

	$cats = array_slice( $cats, 0, $position, true ) + $new + array_slice( $cats, $position, null, true );

	// reset array indexes
	$cats = array_values( $cats );

	return $cats;

}

Using block_categories for Older Versions of WordPress

You can also use version_compare() function to select an appropriate filter hook, but it doesn’t look like a very cliean and good solution for me.

if ( version_compare( get_bloginfo( 'version' ), '5.8', '>=' ) ) {
	add_filter( 'block_categories_all', 'misha_new_block_category' );
} else {
	add_filter( 'block_categories', 'misha_new_block_category' );
}

# Gutenberg

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X