- Add a subfolder in
your-plugin/src
with the block name - Put all
src
files inside this folder - 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.
- 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' );
- 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 topackage.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"
},
- run npm start to build
build
folder
That’s all.