Building Blocks Based on block.json Using @roots/bud Instead of @wordpress/scripts

bud
5

@aaronjpitts For editor-specific stylesheets you can just import the css directly in the *.block.js module.

I think our setup is more flexible than @wordpress/scripts, but maybe not as seamless? An example setup I threw together with “lazy” block css & js:

@src/blocks/index.js:

roots.register.blocks('@src/blocks');

@src/blocks/example/example.block.js:

import './editor.css';

export default {
  name: 'example/example',
  title: 'Example Block',
  attributes: {},
  edit: () => <div className="example__example-block">👀</div>,
  save: () => <div className="example__example-block">👀</div>,
};

@src/blocks/example/public.js:

document
  .querySelector(`.example__example-block`)
  ?.addEventListener(`click`, () => console.log(`👀`));

@src/blocks/example/public.css:

.example__example-block {
  font-weight: bold;
  font-size: 3rem;
}

@src/blocks/example/editor.css:

.example__example-block {
  font-weight: bold;
}

bud.config.js:

export default async (bud) => {
  bud
    // editor entrypoint
    .entry('blocks', ['blocks'])
    // public entrypoint
    .entry('blocks/example', ['blocks/example/public.js', 'blocks/example/public.css'])
};

app/setup.php:

add_action('wp_enqueue_scripts', fn () =>
    has_block('example/example') && bundle('blocks/example')->enqueue(),
    100
);
add_action('enqueue_block_editor_assets', fn () =>
    bundle('blocks')->enqueue(),
    100
);

@rafaucau:

It’s worth pointing out that we don’t actually register any blocks with the server. We just enqueue or don’t enqueue scripts and styles as needed, depending on the context of the request provided by functions like \has_block.

So, if you wanted to register your block using block.json it should be possible to only use the Roots helpers in development:

if (import.meta.webpackHot) {
  roots.register.blocks('@src/blocks')
  import.meta.webpackHot.accept(console.error);
}

And then handle registration how WordPress documents it. You’ll have to forgive my ignorance, but I imagine you need to reference the compiled file paths (your example seems to be specifying .ts files for editorScript, etc., does it really work that way using @wordpress/scripts?) I would think it would need to be something like:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "example/example",
  // ...,
  "editorScript": "file:./path/from/src/to/compiled-editor.js",
  "editorStyle": "file:./path/from/src/to/compiled-editor.css",
  "style": "file:./path/from/src/to/compiled.css",
  "viewScript": "file:./path/from/src/to/compiled.js",
  "render": "file:./template.php"
}

Overall, I would prefer five minutes of initial setup for the hot reload benefits and general customizability, especially if I am going to be working with a block or set of blocks for a long time.

But, I will give it to WP that if you want to use block.json without any additional effort and that is your primary goal, bud.js might not be the best solution.

2 Likes