Replace all navigation-id with router-region

WordPress · Jan 24, 2024 · 2cda3f5 · 2cda3f5
1 parent 5b4c751
commit 2cda3f5
Show file tree

Hide file tree

Showing 14 changed files with 26 additions and 26 deletions.
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
@@ -28,7 +28,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 		if ( $p->next_tag() ) {
 			// Add the necessary directives.
 			$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/query"}' );
-			$p->set_attribute( 'data-wp-navigation-id', 'query-' . $attributes['queryId'] );
+			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
 			// Use context to send translated strings.
 			$p->set_attribute(
 				'data-wp-context',

diff --git a/packages/block-library/src/query/view.js b/packages/block-library/src/query/view.js
@@ -31,13 +31,13 @@ store( 'core/query', {
 		*navigate( event ) {
 			const ctx = getContext();
 			const { ref } = getElement();
-			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
+			const isDisabled = ref.closest( '[data-wp-router-region]' )?.dataset
 				.wpNavigationDisabled;
 
 			if ( isValidLink( ref ) && isValidEvent( event ) && ! isDisabled ) {
 				event.preventDefault();
 
-				const id = ref.closest( '[data-wp-navigation-id]' ).dataset
+				const id = ref.closest( '[data-wp-router-region]' ).dataset
 					.wpNavigationId;
 
 				// Don't announce the navigation immediately, wait 400 ms.
@@ -65,13 +65,13 @@ store( 'core/query', {
 				ctx.url = ref.href;
 
 				// Focus the first anchor of the Query block.
-				const firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;
+				const firstAnchor = `[data-wp-router-region=${ id }] .wp-block-post-template a[href]`;
 				document.querySelector( firstAnchor )?.focus();
 			}
 		},
 		*prefetch() {
 			const { ref } = getElement();
-			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
+			const isDisabled = ref.closest( '[data-wp-router-region]' )?.dataset
 				.wpNavigationDisabled;
 			if ( isValidLink( ref ) && ! isDisabled ) {
 				const { actions } = yield import(

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -124,7 +124,7 @@
 
 <div
 	data-wp-interactive='{"namespace": "directive-context-navigate"}'
-	data-wp-navigation-id="navigation"
+	data-wp-router-region="navigation"
 	data-wp-context='{ "text": "first page" }'
 >
 	<div data-testid="navigation text" data-wp-text="context.text"></div>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -28,7 +28,7 @@ store( 'directive-context', {
 const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
-			data-wp-navigation-id="navigation"
+			data-wp-router-region="navigation"
 			data-wp-context='{ "text": "second page" }'
 		>
 			<div data-testid="navigation text" data-wp-text="context.text"></div>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -209,7 +209,7 @@
 
 <div
 	data-wp-interactive='{ "namespace": "directive-each" }'
-	data-wp-navigation-id="navigation-updated list"
+	data-wp-router-region="navigation-updated list"
 	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
 	data-testid="navigation-updated list"
 >

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
@@ -158,7 +158,7 @@ store( 'directive-each', {
 const html = `
 <div
 	data-wp-interactive='{ "namespace": "directive-each" }'
-	data-wp-navigation-id="navigation-updated list"
+	data-wp-router-region="navigation-updated list"
 	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
 	data-testid="navigation-updated list"
 >

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
@@ -10,7 +10,7 @@
 
 <div
 	data-wp-interactive='{ "namespace": "directive-key" }'
-	data-wp-navigation-id="some-id"
+	data-wp-router-region="some-id"
 >
 	<ul>
 		<li data-wp-key="id-2" data-testid="first-item">2</li>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
@@ -6,7 +6,7 @@ import { store } from '@wordpress/interactivity';
 const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-key" }'
-			data-wp-navigation-id="some-id"
+			data-wp-router-region="some-id"
 		>
 			<ul>
 				<li data-wp-key="id-1">1</li>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
@@ -10,7 +10,7 @@
 
 <div
 	data-wp-interactive='{ "namespace": "directive-run" }'
-	data-wp-navigation-id='test-directive-run'
+	data-wp-router-region='test-directive-run'
 >
 	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
 	<div data-testid="mounted" data-wp-text="state.isMounted"></div>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
@@ -27,7 +27,7 @@ directive(
 const html = `
 <div
 	data-wp-interactive='{ "namespace": "directive-run" }'
-	data-wp-navigation-id='test-directive-run'
+	data-wp-router-region='test-directive-run'
 >
 	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
 	<div data-testid="mounted" data-wp-text="state.isMounted"></div>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
@@ -12,7 +12,7 @@
 
 <div
 	data-wp-interactive='{ "namespace": "router" }'
-	data-wp-navigation-id="region-1"
+	data-wp-router-region="region-1"
 >
 	<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
 

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
@@ -14,7 +14,7 @@
 	<h2>Region 1</h2>
 	<div
 		data-wp-interactive='{"namespace": "router-regions"}'
-		data-wp-navigation-id="region-1"
+		data-wp-router-region="region-1"
 	>
 		<p
 			data-testid="region-1-text"
@@ -58,7 +58,7 @@
 	<h2>Region 2</h2>
 	<div
 		data-wp-interactive='{"namespace": "router-regions"}'
-		data-wp-navigation-id="region-2"
+		data-wp-router-region="region-2"
 	>
 		<p
 			data-testid="region-2-text"
@@ -88,7 +88,7 @@
 				<h2>Nested region</h2>
 				<div
 					data-wp-interactive='{"namespace": "router-regions"}'
-					data-wp-navigation-id="nested-region"
+					data-wp-router-region="nested-region"
 				>
 					<p
 						data-testid="nested-region-ssr"

diff --git a/packages/interactivity-router/src/index.js b/packages/interactivity-router/src/index.js
@@ -35,10 +35,10 @@ const fetchPage = async ( url, { html } ) => {
 };
 
 // Return an object with VDOM trees of those HTML regions marked with a
-// `navigation-id` directive.
+// `router-region` directive.
 const regionsToVdom = ( dom ) => {
 	const regions = {};
-	const attrName = `data-${ directivePrefix }-navigation-id`;
+	const attrName = `data-${ directivePrefix }-router-region`;
 	dom.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {
 		const id = region.getAttribute( attrName );
 		regions[ id ] = toVdom( region );
@@ -49,7 +49,7 @@ const regionsToVdom = ( dom ) => {
 
 // Render all interactive regions contained in the given page.
 const renderRegions = ( page ) => {
-	const attrName = `data-${ directivePrefix }-navigation-id`;
+	const attrName = `data-${ directivePrefix }-router-region`;
 	document.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {
 		const id = region.getAttribute( attrName );
 		const fragment = getRegionRootFragment( region );

diff --git a/phpunit/blocks/render-query-test.php b/phpunit/blocks/render-query-test.php
@@ -69,7 +69,7 @@ public function test_rendering_query_with_enhanced_pagination() {
 
 		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
 		$this->assertSame( '{"loadingText":"Loading page, please wait.","loadedText":"Page Loaded."}', $p->get_attribute( 'data-wp-context' ) );
-		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-navigation-id' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
 		$this->assertSame( '{"namespace":"core/query"}', $p->get_attribute( 'data-wp-interactive' ) );
 
 		$p->next_tag( array( 'class_name' => 'wp-block-post' ) );
@@ -127,7 +127,7 @@ public function test_rendering_query_with_enhanced_pagination_auto_disabled_when
 		$p = new WP_HTML_Tag_Processor( $output );
 
 		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
-		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-navigation-id' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
 		$this->assertSame( 'true', $p->get_attribute( 'data-wp-navigation-disabled' ) );
 	}
 
@@ -205,7 +205,7 @@ public function test_rendering_query_with_enhanced_pagination_auto_disabled_when
 		$p = new WP_HTML_Tag_Processor( $output );
 
 		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
-		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-navigation-id' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
 		$this->assertSame( 'true', $p->get_attribute( 'data-wp-navigation-disabled' ) );
 	}
 
@@ -254,17 +254,17 @@ public function test_rendering_nested_queries_with_enhanced_pagination_auto_disa
 
 		// Query 0 contains a plugin block inside query-2 -> disabled.
 		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
-		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-navigation-id' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
 		$this->assertSame( 'true', $p->get_attribute( 'data-wp-navigation-disabled' ) );
 
 		// Query 1 does not contain a plugin block -> enabled.
 		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
-		$this->assertSame( 'query-1', $p->get_attribute( 'data-wp-navigation-id' ) );
+		$this->assertSame( 'query-1', $p->get_attribute( 'data-wp-router-region' ) );
 		$this->assertSame( null, $p->get_attribute( 'data-wp-navigation-disabled' ) );
 
 		// Query 2 contains a plugin block -> disabled.
 		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
-		$this->assertSame( 'query-2', $p->get_attribute( 'data-wp-navigation-id' ) );
+		$this->assertSame( 'query-2', $p->get_attribute( 'data-wp-router-region' ) );
 		$this->assertSame( 'true', $p->get_attribute( 'data-wp-navigation-disabled' ) );
 	}
 }