Gutenberg Block Categories: How to Create a Custom One

By default, WordPress allows you to use one of the following block categories:

• 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 custom Gutenberg block category easily.

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

And this is our custom block category:

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

• “Subscription” – this is actually the block we are creating throughout our Gutenberg block development course.
• “Carousel” – it is my plugin that adds a simple Swiper-based carousel block.
• “Map” – it is my other plugin, which adds a Google Maps block.

Well, let’s finally create a Gutenberg 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;
	
}

You can put this code into the main block file, which is misha-block.php

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 on 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 in the 3rd position.
3. Use the array_slice() function to split the array with default block categories into two arrays and then use the + 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 clean or 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 Block Development

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 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