9

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 ...

12

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. So with a filter you can extend the default categories with custom ones.

Here is my example:

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

You can find more on this in the provided API.

| improve this answer | |
  • 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 Feb 11 '19 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. – Hunter Nelson Oct 19 '19 at 5:43
1

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(
        $categories,
        array(
            array(
                '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"/>
</svg>;

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 } );
} )();
| improve this answer | |
  • 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 Apr 9 '19 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 – Aamer Shahzad Apr 10 '19 at 6:51
  • Works like a charm, thank you! Unsetting also works: updateCategory('ghostkit', { icon: '' }) – kero May 17 '19 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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