WordPress hacks with custom blocks development and block.json

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:

a screenshot of a block I'm building called "hero." Inside the directory are the following files: block.json, Edit.tsx, editor.scss, index.tsx, render.php, Save.tsx, and style.scss with icons showing what types of languages are set, as well as colors for their status in the git repository.
Pardon my errors and notices, I paused to write this mid-development 😅

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.

Leave a Reply