I'm having trouble understanding the build/compile setup and file structure when creating multiple blocks in Gutenberg.
Both React and Gutenberg are new to me. But I've had a pretty good primer on React via Stephen Griders course on Udemy.
It became clear to me that I hadn't properly understood the Gutenberg structure when I needed to implement the
render_callback function for a dynamic block.
Until now I've been using a file structure like the one listed below,
where all blocks where registered with a single
register_block_type call. ( This is how I would normally have done it in React. )
- Plugin/ -- plugin-init.php -- package.json -- package-lock.json -- node_modules/ -- build/ --- index.js --- index.js.map -- src/ --- index.js --- blocks/ ---- custom-outer-block.js ---- custom-inner-block.js ---- custom-dynamic-block.js --- components/
If I understand it correctly - from looking at the Gutenberg Examples repo ( https://github.com/WordPress/gutenberg-examples ) - each block has to be registered separately in WordPress for the
render_callback to work. And therefore needs its own build file for the
In the repo it also looks like each block is a separate React project. Which has to be generated and started separately with a
npm create-react-app and
npm start command.
Meaning that Gutenberg projects should have a file structure similar to this.
- Plugin/ -- plugin-init.php -- custom-outer-block/ --- package.json --- package-lock.json --- node_modules/ --- build/ ---- index.js ---- index.js.map --- src/ ---- index.js -- custom-inner-block/ --- package.json --- package-lock.json --- node_modules/ --- build/ ---- index.js ---- index.js.map --- src/ ---- index.js -- custom-dynamic-block/ --- package.json --- package-lock.json --- node_modules/ --- build/ ---- index.js ---- index.js.map --- src/ ---- index.js -- components/
It seems a bit strange to have that many React projects and duplicate node moduels in a single plugin or theme. Also shifting between the different blocks while developing, having to start them separately, doesn't make much sense to me.
I'm certain that there's something I'm not getting.
So long story short;
Is there a way to combine all blocks into a single React project, so I only have to run
create-react-app once - and have the files compile to separate build files that can be used with