ViewScriptModule: 6.5 compatibility changes

[sirreal]

What?

viewScriptModule block.json field support has landed in Core 6.5 (WordPress/wordpress-develop#5860 / https://core.trac.wordpress.org/changeset/57565).

Move viewScriptModule support in Gutenberg to 6.5 compatibility.

viewModule support and the view_module_ids REST API field are maintained in Gutenberg regardless of the WordPress version.

Testing Instructions

Test with latest WordPress 6.4.3 and WordPress trunk. Try these steps with viewModule, viewScriptModule and both.

Add a block using block.json with a (viewModule, viewScriptModule, both) field pointing to its view module. I've compiled a block (with #57461) that's available at this gist. It can be unzipped as a plugin and used for testing.

We should be able to add our block in the editor. If we use the REST API to query block types and search for view_module_ids and view_script_module_ids we should find our block:

(await wp.apiFetch( { path: '/wp/v2/block-types' }))
  .filter( ({ view_module_ids }) => view_module_ids.length )
  .map(blockType => ({
    name: blockType.name,
    view_module_ids: blockType.view_module_ids,
    view_script_module_ids: blockType.view_script_module_ids,
  }))[0]
// { "name": "jon/the-block", "view_module_ids": [ "jon-the-block-view-module" ], "view_script_module_ids": [ "jon-the-block-view-module" ] }

If the block is added to a post and we visit it on the frontend, we should see it working as expected (a counter in our example).

We should also see the expected modules added to the importmap and module preloads on our post with the block. I used an older theme to ensure nothing else was enqueuing the interactivity module:

document.querySelector('[type=importmap]');
// <script type=​"importmap">​{"imports":{"@wordpress\/interactivity":"…"}}</script>​
document.querySelector('#\\@wordpress\\/interactivity[rel=modulepreload]');
// <link rel="modulepreload" href="…" id="@wordpress/interactivity">

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/compat/wordpress-6.5/scripts-modules.php
❔ lib/experimental/script-modules.php

[sirreal]

In WordPress trunk we no longer require the asset file to be present.

[sirreal]

This handles the deprecated viewModule field. Core >= 6.5 handles viewScriptModule.

[sirreal]

This is moved to trunk or the compat file.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: [Type] Task, [Feature] Block API, Backport from WordPress Core.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[cbravobernal]

LGTM