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.

  • 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
    Jul 17, 2022 at 8:38

2 Answers 2

  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:

enter image description here

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

  1. 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' );
  1. 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"
  1. run npm start to build build folder

That's all.

  • 1
    This is a super-easy answer to what was previously a long and confusing process — it worked perfectly for me! Be sure to mark your self-answer as "Answered" so it will help more people find it.
    – ElmerCat
    Dec 4, 2022 at 6:16

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.