How do I register multiple blocks with block.json and register_block_type_from_metadata?

Question

I think I'm missing obvious here, but here's the issue:

I used the current @wordpress/create-block to create a block plugin.

I'm looking to create three blocks in this plugin, so I setup the first one and it's working great in the editor and saving. The block details are all coming from the block.json, as it's setup by default in create-block.

So I added a folder called 'label' under src, moved the index.js, save.js, edit.js, and stylesheets into the folder. I setup an index.js in the root and import that file. The block continues to work, even after the folder change with NPM running.

With the block working, both the plugin PHP file with register_block_type_from_metadata() and the block.json are still in the root directory. With NPM running, the block continues to work fine. I have the attributes only defined in block.json, and content is saving to those attributes, so I know it's 100% working.

However...when I move the block.json to the 'label' folder - like I see in core blocks and elsewhere, and as it makes sense so I can define more blocks - it breaks. I followed the docs of adding the path to the directory:

function create_block_nutrition_facts_stacked_block_init() {
    register_block_type_from_metadata(
        __DIR__ . '/src/label'
    );
}

Now the block isn't registered at all. I had renamed the label folder, so just as a test I moved the block.json to the root of the src folder and adjusted the path. Still not working. I took DIR out and gave it a direct path, I put the full file in (/src/label/block.json), I added and removed slashes and ./ and ../ and all kinds of things in case I'm just tired and was typing something wrong and it doesn't recognize it.

If I change it back to just DIR and move block.json back to the root, it works again fine. Attributes save. I've started and restarted NPM, I dug through tons of other plugins on Github, I dug through core plugins...I cannot find anyone using the new way of registering multiple blocks in a single plugin. Considering the "old way" will be depreciated according to the github pull request that merged block.json into the @wordpress/create-block...I'd really like to do it the "right" way here, but I'm stumped.

Any help is appreciated.

Answer 1

Figured it out, in the block.json script needs a new relative location to the build directory, so new code:

"editorScript": "file:../../build/index.js",
"editorStyle": "file:../../build/index.css",
"style": "file:../../build/style-index.css"

Answer 2

I have this working now thanks to your solution. However, I'm seeing a console error message for each block "Block [block name] is already registered.". Have you encountered this error at all?

Answer 3

I have the same problem as @dgwyer, I figured when you use "editorScript": "file:../../build/index.js" in every block.json file, the file is enqueued as many times as the number of blocks you have registered, so the console throws an error for every block you have saying you already registered that block, because the index.js file is loading several times.

I found a temporary solution, and that is to use "editorScript": "file:../../build/index.js" only in one of the block.json files and delete that from all others, that way the file is only enqueued once, but of course that is not an optimal solution because it breaks consistency and makes the code more difficult to figure out.

Maybe I shuld use wp_enqueue_script to enqueue the file and remove the "editorScript" line from all block.jsonfiles, but I don't know if that is the best way to do it. I suspect there is a better way creating different compiled js files for every block and then modifying the webpack.config.json file to compile the js, but also not sure if that will work.

Answer 4

__DIR__ gives you the directory where your php file is. You have to find the base path to go to any folder. Or add block.json in the same directory as your php file (your file that has the function create_block_nutrition_facts_stacked_block_init) and you can leave just __DIR__ when registering the block.