ViewScriptModule: 6.5 compatibility changes #58832

sirreal · 2024-02-08T12:05:42Z

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 · 2024-02-08T12:06:56Z

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 · 2024-02-08T14:39:53Z

lib/experimental/script-modules.php

-	if ( empty( $module_asset_path ) ) {
-		_doing_it_wrong(
-			__FUNCTION__,
-			sprintf(
-				// This string is from WordPress Core. See `register_block_script_handle`.
-				// Translators: This is a translation from WordPress Core (default). No need to translate.
-				__( 'The asset file (%1$s) for the "%2$s" defined in "%3$s" block definition is missing.', 'default' ),
-				$module_asset_raw_path,
-				$field_name,
-				$metadata['name']
-			),
-			'6.5.0'
-		);
-		return false;
-	}


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

sirreal · 2024-02-08T14:40:34Z

lib/experimental/script-modules.php

 	$module_fields = array(
 		// @todo remove viewModule support in Gutenberg >= 17.8 (replaced by viewScriptModule).
-		'viewModule'       => 'view_script_module_ids',
-		'viewScriptModule' => 'view_script_module_ids',
+		'viewModule' => 'view_script_module_ids',


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

sirreal · 2024-02-08T14:46:16Z

lib/experimental/script-modules.php

-	register_rest_field(
-		'block-type',
-		'view_script_module_ids',
-		array(
-			'get_callback' => function ( $item ) {
-				$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $item['name'] );
-				if ( isset( $block_type->view_script_module_ids ) ) {
-					return $block_type->view_script_module_ids;
-				}
-				return array();
-			},
-		)
-	);


This is moved to trunk or the compat file.

github-actions · 2024-02-08T14:46:51Z

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 · 2024-02-08T14:46:54Z

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

sirreal commented Feb 8, 2024

View reviewed changes

sirreal marked this pull request as ready for review February 8, 2024 14:46

sirreal requested a review from spacedmonkey as a code owner February 8, 2024 14:46

sirreal requested review from gziolo, luisherranz and cbravobernal February 8, 2024 14:46

sirreal added [Type] Task Issues or PRs that have been broken down into an individual action to take [Feature] Block API API that allows to express the block paradigm. Backport from WordPress Core Pull request that needs to be backported to a Gutenberg release from WordPress Core labels Feb 8, 2024

sirreal added this to the Gutenberg 17.7 milestone Feb 8, 2024

sirreal added 7 commits February 9, 2024 10:59

Move redundant functionality into 6.5-compat

777a70a

fix alignment

2e274b0

Move into existing conditional block

93ef50d

Stop requiring asset file

d2d38f5

Run "good" version first

cd12d21

move todo

5380af8

Compat changes for REST API

f82922e

sirreal force-pushed the backport/view-script-module branch from 4091040 to f82922e Compare February 9, 2024 09:59

cbravobernal approved these changes Feb 9, 2024

View reviewed changes

cbravobernal merged commit 21fdc34 into trunk Feb 9, 2024
57 checks passed

cbravobernal deleted the backport/view-script-module branch February 9, 2024 11:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ViewScriptModule: 6.5 compatibility changes #58832

ViewScriptModule: 6.5 compatibility changes #58832

sirreal commented Feb 8, 2024 •

edited

Loading

github-actions bot commented Feb 8, 2024

sirreal Feb 8, 2024

sirreal Feb 8, 2024

sirreal Feb 8, 2024

github-actions bot commented Feb 8, 2024 •

edited

Loading

github-actions bot commented Feb 8, 2024 •

edited

Loading

cbravobernal left a comment

ViewScriptModule: 6.5 compatibility changes #58832

ViewScriptModule: 6.5 compatibility changes #58832

Conversation

sirreal commented Feb 8, 2024 • edited Loading

What?

Testing Instructions

github-actions bot commented Feb 8, 2024

sirreal Feb 8, 2024

Choose a reason for hiding this comment

sirreal Feb 8, 2024

Choose a reason for hiding this comment

sirreal Feb 8, 2024

Choose a reason for hiding this comment

github-actions bot commented Feb 8, 2024 • edited Loading

github-actions bot commented Feb 8, 2024 • edited Loading

cbravobernal left a comment

Choose a reason for hiding this comment

sirreal commented Feb 8, 2024 •

edited

Loading

github-actions bot commented Feb 8, 2024 •

edited

Loading

github-actions bot commented Feb 8, 2024 •

edited

Loading