Register multiple blocks with @wordpress/create-block

If you’ve just recently started learning how to create WordPress Blocks, then you’re probably familiar with the @wordpress/create-block package that allows you to quickly create a plugin and block all at once! This is an amazingly fast build tool, but it can be hard to know how to update your brand new plugin to feature multiple blocks. This post aims to solve that problem quickly and easily so you can register multiple blocks with @wordpress/create-block and start building the blocks of your dreams today!

Estimated reading time: 2 minutes

Using Create-Block to create your plugin

To register multiple blocks with @wordpress/create-block, first open your wp-content/plugin folder in your IDE.

Next, in the terminal run npx @wordpress/create-block@latest fancy-plugin

Then, cd into your new plugin folder.

Scaffold your first block into it’s own folder

In the /src directory create a folder for the first block you want to create. Name this folder the same as the block you’re creating. My block is named “random”.

Move all of the code from the /src directory into the new folder. It should look like this below:

To register multiple blocks wordpress create-block, ensure your src directory has a folder for each block names after that block

Open the block.json file and update the name of your block like so “plugin-name/block-name”

"name": "fancy-plugin/random",

Your block.json file should now look like this:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "fancy-plugin/random",
	"version": "0.1.0",
	"title": "Fancy Plugin",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"textdomain": "fancy-plugin",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}

Tell your plugin how to register your new block

Back in your fancy-plugin.php file, update the register_block_type() function so that it’s choosing the right file location. This is how we can register multiple blocks with @wordpress/create-block:

function create_block_fancy_plugin_block_init() {
	// register blocks here
	register_block_type( __DIR__ . '/build/random' );
}
add_action( 'init', 'create_block_fancy_plugin_block_init' );

Repeat creating a new folder in the /src directory, and updating the block.json file for each block you want to create.

Let’s say I create a second block called “happy”. My create_block_fancy_plugin_block_init() function would then look like this:

function create_block_fancy_plugin_block_init() {
	// register blocks here
	register_block_type( __DIR__ . '/build/random' );
        register_block_type( __DIR__ . '/build/happy' );
}
add_action( 'init', 'create_block_fancy_plugin_block_init' );

Finally, run npm run build

And that’s it! You should see your new blocks in the Gutenberg editor YAY!

Looking for more advanced WordPress Block development? Don’t miss this post on using WordPress data stores to hide a block from the inserter on specific templates or template parts.

Photo by Stephen Phillips – Hostreviews.co.uk on Unsplash