Editor: Support module metadata in block.json

[jonsurrell]

Problem:

Scripts and styles can be registered for blocks via block.json metadata. There is now a Modules API, but no way to register or associate module assets with blocks via block.json metadata or the register_block_type_from_metadata function.

Proposed solution:

Introduce module fields analogous to the script fields currently supported in block.json.

The end goal would be to support editorModule, module, and viewModule. An initial version could support only viewModule given that most functionality provided by WordPress for working with the editor is only available as scripts and not accessible to modules at this time.

Background:

See ​https://github.com/WordPress/gutenberg/issues/57492 for prior discussion in Gutenberg.

• Add support for viewModule in block.json when registering a block from metadata. ​https://github.com/WordPress/gutenberg/pull/57437
• Add experimental support to @wordpress/scripts for module compilation and support viewModule: ​https://github.com/WordPress/gutenberg/pull/57461
• Add support to @wordpress/dependency-extraction-webpack-plugin for module compilation and extraction of assets files.

[jonsurrell]

https://core.trac.wordpress.org/changeset/57269 added the Modules API.

Add handling for viewModule block.json metadata when registering blocks.

Trac ticket: https://core.trac.wordpress.org/ticket/60233

We'll want to wait until naming questions are settled:

​https://github.com/WordPress/wordpress-develop/pull/5869

Is the naming settled, what's blocking here?

Is the naming settled, what's blocking here?

It needs a rebase after ​https://github.com/WordPress/wordpress-develop/pull/5869 lands. The name of the helper functions for modules follows the following pattern: wp_register_script_module, so that probably should get reflected in block.json and other places, viewScriptModule? It's a bit unfortunate that we can't extend viewScript in a backward-compatible way to support both ES Modules and legacy scripts.

​https://github.com/WordPress/wordpress-develop/pull/5869 landed recently so I'll finish this and get it ready for review.

The Modules API ended up with names like "script_module." To better align, this has been updated to use viewScriptModule instead of viewModule.

@luisherranz @gziolo @youknowriad This is ready for review.

There was 1 test failure on a single PHP version that seems to be a flakey test.

Adding support to the @wordpress/scripts for building blocks with viewScriptModule: ​https://github.com/WordPress/gutenberg/pull/58203

Tests were failing because the number of REST fields returned in the response has changed again. They should be fixed now.

The asset file can be optional: ​https://github.com/WordPress/wordpress-develop/pull/5799

👋 pinging @luisherranz in case you have input on these comments:

• ​https://github.com/WordPress/wordpress-develop/pull/5860#discussion_r1481053661
• ​https://github.com/WordPress/wordpress-develop/pull/5860#discussion_r1481045484

I've pushed changes so the asset file is not longer required to align with hhttps://github.com/WordPress/wordpress-develop/pull/5799.

I spotted an issue in the updated documentation: ​https://github.com/WordPress/gutenberg/pull/58731/files#r1482664885.

​https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script

I spotted an issue in the updated documentation

Thanks, I'll create a PR for that 👍

There is a merge conflict to resolve but otherwise we will be good to go 👍🏻

I've finished rebasing (it was a bit tricky) and tweaking some documentation, I this this is ready now.

[gziolo]

In 57565:

Editor: Add viewScriptModule handling to block.json metadata

Syncing changes from the Gutenberg plugin: ​https://github.com/WordPress/gutenberg/pull/57437.

Scripts and styles can be registered for blocks via block.json metadata. There is now a Modules API, but was no way to register or associate module assets with blocks via block.json.

Fixes #60233.
Props jonsurrell, gziolo, cbravobernal, luisherranz, youknowriad.

Committed with https://core.trac.wordpress.org/changeset/57565.

[gziolo]

In 57677:

Editor: Add fallback for block version when registering block script module

It aligns implementation with how regular scripts are handled.

Follow-up [57437].
See #60233.

[desrosj]

In 57771:

Coding standards: Apply some changes after composer format.

Follow up to [57565], [57627], [57755],

See #60233, #60506, #60524.

[sabernhardt]

Dev note:
​https://make.wordpress.org/core/2024/03/04/block-metadata-viewscriptmodule-field-in-6-5/