Interactivity API: Create @wordpress/interactivity-router module

lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php

@@ -150,6 +150,13 @@ public function register_script_modules() {
 				array(),
 				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
 			);
+
+			wp_register_script_module(
+				'@wordpress/interactivity/router',
+				gutenberg_url( '/build/interactivity/router.min.js' ),
+				array( '@wordpress/interactivity' ),
+				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+			);
 		}
 
 		/**

packages/block-library/src/query/index.php

@@ -100,8 +100,14 @@ function register_block_core_query() {
 
 	wp_register_script_module(
 		'@wordpress/block-library/query',
-		'/wp-content/plugins/gutenberg/build/interactivity/query.min.js',
-		array( '@wordpress/interactivity' ),
+		gutenberg_url( '/build/interactivity/query.min.js' ),
+		array(
+			'@wordpress/interactivity',
+			array(
+				'id'     => '@wordpress/interactivity/router',
+				'import' => 'dynamic',
+			),
+		),
 		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
 	);
 }

packages/block-library/src/query/view.js

@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	store,
-	getContext,
-	getElement,
-	navigate,
-	prefetch,
-} from '@wordpress/interactivity';
+import { store, getContext, getElement } from '@wordpress/interactivity';
 
 const isValidLink = ( ref ) =>
 	ref &&
@@ -52,7 +46,10 @@ store( 'core/query', {
 					ctx.animation = 'start';
 				}, 400 );
 
-				yield navigate( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity/router'
+				);
+				yield actions.navigate( ref.href );
 
 				// Dismiss loading message if it hasn't been added yet.
 				clearTimeout( timeout );
@@ -77,7 +74,10 @@ store( 'core/query', {
 			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
 				.wpNavigationDisabled;
 			if ( isValidLink( ref ) && ! isDisabled ) {
-				yield prefetch( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity/router'
+				);
+				yield actions.prefetch( ref.href );
 			}
 		},
 	},
@@ -86,7 +86,10 @@ store( 'core/query', {
 			const { url } = getContext();
 			const { ref } = getElement();
 			if ( url && isValidLink( ref ) ) {
-				yield prefetch( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity/router'
+				);
+				yield actions.prefetch( ref.href );
 			}
 		},
 	},

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -59,9 +59,11 @@ function defaultRequestToExternal( request ) {
 /**
  * Default request to external module transformation
  *
- * Currently only @wordpress/interactivity
+ * Currently only @wordpress/interactivity and `@wordpress/interactivity-router`
+ * are supported.
  *
- * Do not use the boolean shorthand here, it's only handled for the `requestToExternalModule` option.
+ * Do not use the boolean shorthand here, it's only handled for the
+ * `requestToExternalModule` option.
  *
  * @param {string} request Module request (the module name in `import from`) to be transformed
  * @return {string|Error|undefined} The resulting external definition.
@@ -71,13 +73,19 @@ function defaultRequestToExternal( request ) {
  */
 function defaultRequestToExternalModule( request ) {
 	if ( request === '@wordpress/interactivity' ) {
-		// This is a special case. Interactivity does not support dynamic imports at this
-		// time. We add the external "module" type to indicate that webpack should
-		// externalize this as a module (instead of our default `import()` external type)
-		// which forces @wordpress/interactivity imports to be hoisted to static imports.
+		// This is a special case. Interactivity does not support dynamic imports at
+		// this time. We add the external "module" type to indicate that webpack
+		// should externalize this as a module (instead of our default `import()`
+		// external type) which forces @wordpress/interactivity imports to be
+		// hoisted to static imports.
 		return `module ${ request }`;
 	}
 
+	if ( request === '@wordpress/interactivity/router' ) {
+		// Assumes this is usually giong to be used as a dynamic import.
+		return `import ${ request }`;
+	}
+
 	const isWordPressScript = Boolean( defaultRequestToExternal( request ) );
 
 	if ( isWordPressScript ) {

packages/e2e-tests/plugins/interactive-blocks.php

@@ -24,7 +24,13 @@ function () {
 				wp_register_script_module(
 					$name . '-view',
 					$view_file,
-					array( '@wordpress/interactivity' ),
+					array(
+						'@wordpress/interactivity',
+						array(
+							'id'     => '@wordpress/interactivity/router',
+							'import' => 'dynamic',
+						),
+					),
 					filemtime( $view_file )
 				);
 

packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate, getContext } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 store( 'directive-context', {
 	state: {
@@ -50,10 +50,14 @@ const { actions } = store( 'directive-context-navigate', {
 			ctx.newText = 'some new text';
 		},
 		navigate() {
-			return navigate( window.location, {
-				force: true,
-				html,
-			} );
+			return import( '@wordpress/interactivity/router' ).then(
+				( { actions: routerActions } ) =>
+					routerActions.navigate(
+						window.location,
+						{ force: true, html },
+					)
+			);
+
 		},
 		*asyncNavigate() {
 			yield actions.navigate();

packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, navigate } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 const { state } = store( 'directive-each' );
 
@@ -178,8 +178,11 @@ const html = `
 
 store( 'directive-each', {
 	actions: {
-		navigate() {
-			return navigate( window.location, {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity/router"
+			);
+			return actions.navigate( window.location, {
 				force: true,
 				html,
 			} );

packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate } from '@wordpress/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const html = `
 		<div
@@ -17,8 +17,11 @@ const html = `
 
 store( 'directive-key', {
 	actions: {
-		navigate() {
-			navigate( window.location, {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity/router"
+			);
+			return actions.navigate( window.location, {
 				force: true,
 				html,
 			} );

packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js

@@ -4,7 +4,6 @@
 import {
 	store,
 	directive,
-	navigate,
 	useInit,
 	useWatch,
 	cloneElement,
@@ -58,8 +57,11 @@ const { state } = store( 'directive-run', {
 		increment() {
 			state.clickCount = state.clickCount + 1;
 		},
-		navigate() {
-			navigate( window.location, {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity/router"
+			);
+			return actions.navigate( window.location, {
 				force: true,
 				html,
 			} );

packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate } from '@wordpress/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const { state } = store( 'router', {
 	state: {
@@ -19,7 +19,10 @@ const { state } = store( 'router', {
 			const force = e.target.dataset.forceNavigation === 'true';
 			const { timeout } = state;
 
-			yield navigate( e.target.href, { force, timeout } );
+			const { actions } = yield import(
+				"@wordpress/interactivity/router"
+			);
+			yield actions.navigate( e.target.href, { force, timeout } );
 
 			state.navigations -= 1;
 

packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate, getContext } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 const { state } = store( 'router-regions', {
 	state: {
@@ -19,7 +19,10 @@ const { state } = store( 'router-regions', {
 		router: {
 			*navigate( e ) {
 				e.preventDefault();
-				yield navigate( e.target.href );
+				const { actions } = yield import(
+					"@wordpress/interactivity/router"
+				);
+				yield actions.navigate( e.target.href );
 			},
 			back() {
 				history.back();

packages/interactivity/CHANGELOG.md

@@ -19,6 +19,7 @@
 -   Remove `data-wp-slot` and `data-wp-fill`. ([#57854](https://github.com/WordPress/gutenberg/pull/57854))
 -   Remove `wp-data-navigation-link` directive. ([#57853](https://github.com/WordPress/gutenberg/pull/57853))
 -   Remove unused `state` and rename `props` to `attributes` in `getElement()`. ([#57974](https://github.com/WordPress/gutenberg/pull/57974))
+-   Convert `navigate` and `prefetch` function to actions of the new `core/router` store, available when importing the `@wordpress/interactivity/router` module. ([#57924](https://github.com/WordPress/gutenberg/pull/57924))
 
 ### Bug Fix