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.

Your new category is defined as an array with a slug and title, so choose what you want to name the block and fill in those fields. This array is then merged with the preexisting categories and presto! New category.

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 your block and look for the registerBlockType function. If you don’t have a default category, add the category key and follow it with your block slug and a 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