Create Block: Generate a block.json file

[coreymckrill]

Description

#22151 suggests auto-generating the block.json file as a way to help block creators be set up for success in getting their blocks added to the block directory.

This adds block.json auto-generation to the create-block script during the scaffolding process. The file is pre-populated with the inputs/defaults from the script. The editorScript/editorStyle properties vary depending on which template is chosen (esnext or es5).

How has this been tested?

Tested with a local checkout of Gutenberg, running node path/to/create-block. Tested with both esnext and es5 values for the template parameter.

Types of changes

• New feature: auto-generated block.json file

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[gziolo]

Nice one, I'll have a look later this week 👍

[gziolo]

I proposed that we explicitly set values for scripts and styles in the template config. What do you think? Everything else looks good. Thanks for taking care of it.

[gziolo]

The idea was to use the syntax similar to what npm uses for local packages:

file:./path/relative/to/block-json/file

I guess we could skip ./ if that helps. Let me know what you think. I will test it with register_block_type_from_metadata helper and merge it tomorrow.

In fact, we could do feature detection in ESNext template and use register_block_type_from_metadata when it's defined. I can open PR proposing that tomorrow.

[coreymckrill]

I guess we could skip ./ if that helps.

I don't think it matters much either way, as long as the required syntax is well documented.

[mkaz]

Should we update the index.js to import the fields from the block.json file?

Right now things like name, title, description, etc.. are duplicated in the two locations.

[gziolo]

@mkaz, there are two issues that need to be resolved first:

• JSON imports work only in Node.js or with webpack. In Gutenberg we use a custom plugin that inlines JSON in JavaScript as a plain object. We would need to add the same plugin to the shared Babel preset.
• we miss the logic that wraps translatable fields with i18n functions, it still needs to be added.

In the past, I tried to build a Babel macro that would address both points but it wasn’t as straightforward as you would expect. We were afraid it could be a point of bugs when not configured properly. Related PR: #16088.

[gziolo]

I opened an issue that tracks i18n support for block.json in #23636.

[mkaz]

@gziolo Thanks for the update, I've added info to the Create a Block tutorial with a note for the block.json part.

Can you review here: https://github.com/WordPress/gutenberg/pull/23654/files#diff-c52b6bb71644b3ce80dd15e4a3e42ac4