How to register two blocks in the same plugin

I'm starting to develop Gutenberg blocks. After

npx @wordpress/create-block gutenpride

I have my gutenpride block ready to use. Since the generated plugin contains a structure for only one block I wonder what changes should I make to add another similar block in the same plugin.

So, for the default structure in the gutenpride plugin, what changes should I make to add another block? Thank you.

UPDATE: I've discovered that I can find answers on this topic searching for "multi block plugin" (I couldn't find anything before). This question for example. So, this question could be a possible duplicated. I'm still researching.

I'm starting to develop Gutenberg blocks. After

npx @wordpress/create-block gutenpride

I have my gutenpride block ready to use. Since the generated plugin contains a structure for only one block I wonder what changes should I make to add another similar block in the same plugin.

So, for the default structure in the gutenpride plugin, what changes should I make to add another block? Thank you.

UPDATE: I've discovered that I can find answers on this topic searching for "multi block plugin" (I couldn't find anything before). This question for example. So, this question could be a possible duplicated. I'm still researching.

• block-editor

Share Improve this question edited Jul 17, 2022 at 8:02 aitor asked Jul 17, 2022 at 7:47 aitoraitor 71522 gold badges88 silver badges2323 bronze badges 1

• 1 As the author of the ostentatiously long answer in the post which you've linked - wp-scripts has been refactored to natively support multi-block plugins; it hasn't been adequately detailed in an answer here yet. For the moment see this video. This was a GitHub thread which referenced and tracked the subject of the question which you linked. I'll get a more succinct write-out together when I have a chance to digest all of the changes. Yell at me in WordPress Development Chat on Tuesday if I haven't done so :) – bosco Commented Jul 17, 2022 at 8:38

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 8

1. Add a subfolder in your-plugin/src with the block name
2. Put all src files inside this folder
3. Repeat 1 and 2 for other blocks that you want to add.

At this moment, the src folder looks like this:

Be careful to edit properly each block.json to give them a name, etc.

4. replace de single block registration to multiblock in your-plugin.php file

function create_block_your_plugin_block_init() {
    register_block_type( __DIR__ . '/build/block-1' );
    register_block_type( __DIR__ . '/build/block-2' );
}
add_action( 'init', 'create_block_your_plugin_block_init' );

5. Optionally, you can rename src folder to any name you like, for example, blocks. In that case, add --webpack-src-dir=blocks flag with the new name to package.json start script:

"scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start --webpack-src-dir=blocks"
},

6. run npm start to build build folder

That's all.

I think the first answer is easy to follow. It's pretty simple, but I needed some time to make all changes correctly.

I began by copying all code for each block from ./src to a /blocks/block-1 and /blocks/block-2 directory.

Modified the plugin_name.php file and the package.json in the plugin directory.

Changed names in block.json to reflect the name as plugin_name/block-1 and plugin_name/block-2. For styles wp-block-plugin-name-block-1 and wp-block-plugin-name-block-2 in styles in edit.js, save.js and editor.scss and styles.scss. for each block.

In the plugin_name.php file include for each block inside an action 'init', this makes the blocks appear in the block directory:

function plugin_name_block_init()
{
register_block_type( __DIR__ . '/build/block-1' );
register_block_type( __DIR__ . '/build/block-2' );
}
add_action( 'init','plugin_name_block_init');

The package.json modified to start or build all blocks. So from now the scripts look for each block.json and index.js inside block directories placed inside directory 'blocks'. Inside the 'scripts':

"build": "wp-scripts build --webpack-src-dir=blocks",
"start": "wp-scripts start --webpack-src-dir=blocks",

And last, I made changes to styles names to each file editor.scss and editor.scss, and also edit.js and save.js for each block.

Now it works for me development (npm start) or build (npm run build). Modifies both blocks at the same time.

I think it can be modified to only build a block each time:

"start:block-1": "wp-scripts start --webpack-src-dir=blocks/block-1",

Works if you call it: npm run start:block-1 (not npm start:block-1)

There's now a dedicated tutorial on developer.wordpress.org for multi-block plugins. See here: https://developer.wordpress.org/news/2024/09/17/how-to-build-a-multi-block-plugin/

The most important details are when you start your project use wp-multi-block and when you create individual blocks, use the --no-plugin option.