I keep not finding the answer that I’m looking for, so here’s a quick bit of info about developing custom blocks for the Gutenberg / block editor with the block.json file and the default @wordpress/scripts config.
Here’s a picture of one of my blocks that I’m building inside a plugin that holds all of my blocks for a project:
You can also check this full project live on Github!
Render.php and Inner Blocks
You still need to use the Save function and return <InnerBlocks.Content/>. otherwise returning the $content variable in render.php re-renders your entire site inside of your block.
Editor Styles and SCSS
If you’re wanting to use SCSS and block.json, you need to be really specific about how you name your files. There’s probably a webpack config floating around somwhere that would solve this issue, but until I can find it, here’s what to do:
Inside the block.json file, drop the following:
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",Assuming your project is remotely like mine, your editor styles file needs to be called editor.scss and imported in your Edit file (probably a js(x)/ts(x) file). Your shared styles file needs to be called style.scss and imported in your index.js(x)/.ts(x) file. Then the default @wordpress/scripts bundler will roll everything up for you nicely.