As we know by the provided API from Gutenberg we can create a custom block as

const { registerBlockType } = wp.blocks;

registerBlockType( 'my-namespace/my-block', {


but how do I create a wrapper(category like layout) around my custom blocks in gutenberg editor? Let's say I want to have a collector for my custom elements as slider, gallery ...

2 Answers 2


Digging myself deeper in documentation, I got the following result.

There is a way to group your custom blocks around a given category in Gutenberg, and therefore we have the method block_categories_all. So with a filter, you can extend the default categories with custom ones.

Here is my example:

add_filter( 'block_categories_all', function( $categories, $post ) {
    return array_merge(
                'slug'  => 'my-slug',
                'title' => 'my-title',
}, 10, 2 );

You can find more on this in the provided API.

  • It looks good but I can't seem to make it work. I can confirm the filter is called in get_block_categories() in post.php as found by Pat J.
    – Ryan Bayne
    Commented Feb 11, 2019 at 14:10
  • If you are using a plugin you need to update your title line to 'title' => __( 'MyTitle', 'my-plugin-slug' ) make sure your category name for your plugin php and your block js match and don't forget to reactivate your plugin. Commented Oct 19, 2019 at 5:43

It is possible to filter the list of default block categories using the block_categories filter. Place the code in functions.php or your-plugin.php file. Explained here in WordPress Gutenberg Handbook

function my_plugin_block_categories( $categories, $post ) {
    if ( $post->post_type !== 'post' ) {
        return $categories;
    return array_merge(
                'slug' => 'my-category',
                'title' => __( 'My category', 'my-plugin' ),
                'icon'  => 'wordpress',
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

To use an svg icon you can replace the icon in js. Define your icon.

const icon = <svg className='components-panel__icon' width='20' height='20' viewBox='0 0 20 20' aria-hidden='true' role='img' focusable='false' xmlns='http://www.w3.org/2000/svg'>
    <rect fill="#ffffff" x="0" y="0" width="20" height="20"/>
    <rect fill="#1163EB" x="2" y="2" width="16" height="16" rx="16"/>

and replace the icon using updateCategory function from wp.blocks; adding class components-panel__icon will add a 6px space to the left side of icon.

( function() {
    wp.blocks.updateCategory( 'my-category', { icon: icon } );
} )();
  • And where should you add the wp.blocks.updateCategory function. I have tried this and I cannot get it to work. Can you share a complete working .js file? Also if I register a category and have no blocks assigned to that category should it still be listed? I can't seem to get my category registered either. Also I do not see the block_categories filter in the filter reference docs: codex.wordpress.org/Plugin_API/Filter_Reference
    – Radmation
    Commented Apr 9, 2019 at 16:56
  • I am not using any boilerplate. here is the entry file for my blocks codepen.io/talentedaamer/pen/YMZzjY used in wordpress.org/plugins/easy-blocks Commented Apr 10, 2019 at 6:51
  • Works like a charm, thank you! Unsetting also works: updateCategory('ghostkit', { icon: '' })
    – kero
    Commented May 17, 2019 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.