0

I made a plugin using default "todo-list" WordPress provides using npx @wordpress/create-block todo-list. Is there a way to convert to work with multiple blocks?

Basically I built "todo-list" as default, then made a new directory blocks/todo-list and moved src/build folders into there. Then edited todo-list.php register_block_type directory from /build to /blocks/todo-list/build. Then updated package.json start/build scripts to:

"build": "wp-scripts build blocks/todo-list/src/index.js --output-path=blocks/todo-list/build",
"start": "wp-scripts start blocks/todo-list/src/index.js --output-path=blocks/todo-list/build"

The file structure would be:

- blocks
  - todo-list
    - build
    - src
  - block-2
    - build
    - src
- node_modules
- package-lock.json
- package.json
- readme.txt
- todo-list.php

I did npm run build and don't see Todo List as a block. I didn't add a block-2 yet, but that would be it. Can this structure work?

Edit: Figured it out and answered below.

2
  • as a sidenote, you don't have to use wp scripts to build your block, any webpack config that builds react and spits out a bundle you can enqueue will do. Just make sure it uses the bundle analyser package from WP so you don't bundle WP scripts that already come with WP in your blocks JS bundle
    – Tom J Nowell
    Nov 8, 2022 at 17:55
  • Thanks. Is there a way to debug why it's not showing? I pointed register_block_type to new build path, and don't see any console errors, but no block. Nov 8, 2022 at 18:31

1 Answer 1

0

I edited the start/build scripts in package.json to this and it works.

"build": "wp-scripts build --webpack-src-dir=block/post-type-register/src --output-path=block/post-type-register/build",
"start": "wp-scripts start --webpack-src-dir=block/post-type-register/src --output-path=block/post-type-register/build"

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.