Skip to content

Commit

Permalink
Interactivity Router: Replace data-wp-navigation-id with `data-wp-r…
Browse files Browse the repository at this point in the history 
…outer-region` (#58191)

* Replace all `navigation-id` with `router-region`

* Use `queryRef` to store a reference of the query block
  • Loading branch information
@DAreRodz
DAreRodz authored Jan 24, 2024
1 parent a11d04f commit 28e2bfe
Show file tree
Hide file tree
Showing 14 changed files with 34 additions and 31 deletions.
3 changes: 2 additions & 1 deletion packages/block-library/src/query/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
20 changes: 11 additions & 9 deletions packages/block-library/src/query/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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'
Expand All @@ -92,5 +89,10 @@ store( 'core/query', {
yield actions.prefetch( ref.href );
}
},
setQueryRef() {
const ctx = getContext();
const { ref } = getElement();
ctx.queryRef = ref;
},
},
} );
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
6 changes: 3 additions & 3 deletions packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions packages/interactivity-router/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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 );
Expand Down
12 changes: 6 additions & 6 deletions phpunit/blocks/render-query-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) );
Expand Down Expand Up @@ -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' ) );
}

Expand Down Expand Up @@ -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' ) );
}

Expand Down Expand Up @@ -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' ) );
}
}

1 comment on commit 28e2bfe

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 28e2bfe.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7646232218
📝 Reported issues:

Please sign in to comment.