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.

Improve this question
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 Commented 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. Commented Nov 8, 2022 at 18:31

1 Answer 1

Reset to default
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"
Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.