Use queryRef to store a reference of the query block

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

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
@@ -29,6 +29,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 			// Add the necessary directives.
 			$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/query"}' );
 			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
+			$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
 			// 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,15 +31,12 @@ store( 'core/query', {
 		*navigate( event ) {
 			const ctx = getContext();
 			const { ref } = getElement();
-			const isDisabled = ref.closest( '[data-wp-router-region]' )?.dataset
-				.wpNavigationDisabled;
+			const { queryRef } = ctx;
+			const isDisabled = queryRef?.dataset.wpNavigationDisabled;
 
 			if ( isValidLink( ref ) && isValidEvent( event ) && ! isDisabled ) {
 				event.preventDefault();
 
-				const id = ref.closest( '[data-wp-router-region]' ).dataset
-					.wpNavigationId;
-
 				// Don't announce the navigation immediately, wait 400 ms.
 				const timeout = setTimeout( () => {
 					ctx.message = ctx.loadingText;
@@ -65,14 +62,14 @@ store( 'core/query', {
 				ctx.url = ref.href;
 
 				// Focus the first anchor of the Query block.
-				const firstAnchor = `[data-wp-router-region=${ id }] .wp-block-post-template a[href]`;
-				document.querySelector( firstAnchor )?.focus();
+				const firstAnchor = `.wp-block-post-template a[href]`;
+				queryRef.querySelector( firstAnchor )?.focus();
 			}
 		},
 		*prefetch() {
+			const { queryRef } = getContext();
 			const { ref } = getElement();
-			const isDisabled = ref.closest( '[data-wp-router-region]' )?.dataset
-				.wpNavigationDisabled;
+			const isDisabled = queryRef?.dataset.wpNavigationDisabled;
 			if ( isValidLink( ref ) && ! isDisabled ) {
 				const { actions } = yield import(
 					'@wordpress/interactivity-router'
@@ -92,5 +89,10 @@ store( 'core/query', {
 				yield actions.prefetch( ref.href );
 			}
 		},
+		setQueryRef() {
+			const ctx = getContext();
+			const { ref } = getElement();
+			ctx.queryRef = ref;
+		},
 	},
 } );