From 28e2bfe5851ea4f4bb9d3ad882a1846524fd7787 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 24 Jan 2024 22:05:29 +0100 Subject: [PATCH] Interactivity Router: Replace `data-wp-navigation-id` with `data-wp-router-region` (#58191) * Replace all `navigation-id` with `router-region` * Use `queryRef` to store a reference of the query block --- packages/block-library/src/query/index.php | 3 ++- packages/block-library/src/query/view.js | 20 ++++++++++--------- .../directive-context/render.php | 2 +- .../directive-context/view.js | 2 +- .../directive-each/render.php | 2 +- .../interactive-blocks/directive-each/view.js | 2 +- .../directive-key/render.php | 2 +- .../interactive-blocks/directive-key/view.js | 2 +- .../directive-run/render.php | 2 +- .../interactive-blocks/directive-run/view.js | 2 +- .../router-navigate/render.php | 2 +- .../router-regions/render.php | 6 +++--- packages/interactivity-router/src/index.js | 6 +++--- phpunit/blocks/render-query-test.php | 12 +++++------ 14 files changed, 34 insertions(+), 31 deletions(-) diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php index 0239fadc6bf0af..5d509607a7dc88 100644 --- a/packages/block-library/src/query/index.php +++ b/packages/block-library/src/query/index.php @@ -28,7 +28,8 @@ 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'] ); + $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 index 89eb8198d1805c..85cd16d9e14225 100644 --- 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-navigation-id]' )?.dataset - .wpNavigationDisabled; + const { queryRef } = ctx; + const isDisabled = queryRef?.dataset.wpNavigationDisabled; if ( isValidLink( ref ) && isValidEvent( event ) && ! isDisabled ) { event.preventDefault(); - const id = ref.closest( '[data-wp-navigation-id]' ).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-navigation-id=${ 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-navigation-id]' )?.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; + }, }, } ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php index b60be101a42d1f..c0b01bfea95fcb 100644 --- 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 @@
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js index 83683a00aff12a..7238185bac3aa1 100644 --- 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 = `
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php index 1a48611d51ea56..3d018bca46d060 100644 --- 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 @@
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js index b38f531caee967..20e8fcec4b0d96 100644 --- 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 = `
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php index d28002c1377925..422d6ac5eadaa7 100644 --- 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 @@
  • 2
    • diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js index ed51a4bd2e76e0..40fc83621d8127 100644 --- 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 = `
    • 1
      • diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php index 237a3634b74522..eeb63e64eb0d52 100644 --- 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 @@
      diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js index f98701c1afe51a..5151fb4c6db102 100644 --- 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 = `
      diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php index 560958e8a0d6b0..b3b967164e99ad 100644 --- 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 @@

      diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php index ebffbab0636c69..1389eb6dade52d 100644 --- 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 @@

      Region 1

      Region 2

      Nested region

      { }; // 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 index 796c4ae098867c..76dbf537e78684 100644 --- 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' ) ); } }