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

Current Gutenberg Version: 3.4.0

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!

Setup

Fortunately, creating a category is really simple. To start, you’ll need a block that’s ready to go and working. A great way to achieve this in little to no time is to use Ahmad’s incredible Create Guten Block. Once you have a functioning test block, you can proceed to the next step.

Creating a block category

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

You define a new category by merging a new array with your category information with the existing categories array.  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.

Attaching a block

You won’t be able to see your new category until you assign a block to it. 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!

End log.

Loomo Bug