Gutenberg: Creating Custom Block Categories

Welcome to the first of our tutorials on Gutenberg: WordPress’ new editor. Please note that this tutorial is intended for developers working on building their first (or maybe 300th) block. If you’re not a developer, but looking for help with your website, contact us at [email protected].

WordPress Version: 5.0.2

Note: Since Gutenberg is so new, we’re going to try to fill in the documentation gaps to help other theme developers out there. If anything is out of date, let us know!

1. Setup

Fortunately, creating a category is really simple. To start, you need at least one block (you’ll see why in step 3). A great way to achieve this quickly is to use Ahmad’s incredible Create Guten Block. Once you have a functioning test block, proceed to the next step.

2. Creating a block category

Edit your init.php file (if you’re using create-guten-block), or the php file of your choice, and include the following snippet:

If you’re familiar with WordPress filters, then you’ll recognize this code as more of the same. We define a new category by merging our new category array with the existing categories array and return it. The new category requires two fields, title and slug. In the code above, we’ve titled our category Mario Blocks and given it a slug of mario-blocks. You can also add icons and all kinds of fun stuff.

3. Attaching a block

Before you can see your new category, you need assign a block. To do this, navigate to a working block and look for the registerBlockType function. Once you’ve located it, add the category key (as seen below) and assign your block slug as a value, with trailing comma like so:

That’s it! After an npm build and a cache refresh you should see a block in your list. Hope you found this useful!