From 951f90e8fd092ad5ad6881934e39c265082d9c9b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 18 Oct 2023 13:18:09 +0200 Subject: [PATCH 1/6] Add title update when using enhanced pagination --- packages/interactivity/src/router.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/interactivity/src/router.js b/packages/interactivity/src/router.js index ee9755126994e3..f470f64c148cb7 100644 --- a/packages/interactivity/src/router.js +++ b/packages/interactivity/src/router.js @@ -50,13 +50,14 @@ const fetchPage = async ( url, { html } ) => { // `navigation-id` directive. const regionsToVdom = ( dom ) => { const regions = {}; + const titles = {}; const attrName = `data-${ directivePrefix }-navigation-id`; dom.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => { const id = region.getAttribute( attrName ); regions[ id ] = toVdom( region ); + titles[ id ] = dom.querySelectorAll( 'title' )[ 0 ].innerHTML || null; } ); - - return { regions }; + return { regions, titles }; }; // Prefetch a page. We store the promise to avoid triggering a second fetch for @@ -75,6 +76,9 @@ const renderRegions = ( page ) => { const id = region.getAttribute( attrName ); const fragment = getRegionRootFragment( region ); render( page.regions[ id ], fragment ); + if ( page.titles[ id ] ) { + document.title = page.titles[ id ]; + } } ); }; From fe746a9571ec674057d05b22927309bc161c479a Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 18 Oct 2023 13:35:17 +0200 Subject: [PATCH 2/6] Simplify code --- packages/interactivity/src/router.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/interactivity/src/router.js b/packages/interactivity/src/router.js index f470f64c148cb7..f3a07b004cdaf6 100644 --- a/packages/interactivity/src/router.js +++ b/packages/interactivity/src/router.js @@ -50,14 +50,13 @@ const fetchPage = async ( url, { html } ) => { // `navigation-id` directive. const regionsToVdom = ( dom ) => { const regions = {}; - const titles = {}; const attrName = `data-${ directivePrefix }-navigation-id`; dom.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => { const id = region.getAttribute( attrName ); regions[ id ] = toVdom( region ); - titles[ id ] = dom.querySelectorAll( 'title' )[ 0 ].innerHTML || null; } ); - return { regions, titles }; + const title = dom.querySelector( 'title' ).innerHTML || null; + return { regions, title }; }; // Prefetch a page. We store the promise to avoid triggering a second fetch for @@ -76,8 +75,8 @@ const renderRegions = ( page ) => { const id = region.getAttribute( attrName ); const fragment = getRegionRootFragment( region ); render( page.regions[ id ], fragment ); - if ( page.titles[ id ] ) { - document.title = page.titles[ id ]; + if ( page.title ) { + document.title = page.title; } } ); }; From e00ae58dc9e4ea612b930547b487d23c69d29a2e Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 18 Oct 2023 16:02:26 +0200 Subject: [PATCH 3/6] Use innertext to prevent character encoding --- packages/interactivity/src/router.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interactivity/src/router.js b/packages/interactivity/src/router.js index f3a07b004cdaf6..0403734461de72 100644 --- a/packages/interactivity/src/router.js +++ b/packages/interactivity/src/router.js @@ -55,7 +55,7 @@ const regionsToVdom = ( dom ) => { const id = region.getAttribute( attrName ); regions[ id ] = toVdom( region ); } ); - const title = dom.querySelector( 'title' ).innerHTML || null; + const title = dom.querySelector( 'title' ).innerText || null; return { regions, title }; }; From 6f75a57b99a16510440af282c054518cec703663 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 19 Oct 2023 15:17:33 +0200 Subject: [PATCH 4/6] Add changelog --- packages/interactivity/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 2e1a6b8683c7fa..43453df262d491 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -16,6 +16,7 @@ - Remove `role` attribute when set to `null` in `data-wp-bind`. ([#54608](https://github.com/WordPress/gutenberg/pull/54608)) - Add `timeout` option to `navigate()`, with a default value of `10000` milliseconds. ([#54474](https://github.com/WordPress/gutenberg/pull/54474)) +- Update the title when using enhanced pagination. ([#55446](https://github.com/WordPress/gutenberg/pull/55446)) ## 2.2.0 (2023-08-31) From 6994f94cf58ca65c8117c376881c9853dddbd54b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 19 Oct 2023 18:35:25 +0200 Subject: [PATCH 5/6] Add e2e test --- .../fixtures/interactivity-utils.ts | 1 + .../specs/interactivity/router-regions.spec.ts | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts index fc0dc4b30d664e..44507ad34813e8 100644 --- a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts +++ b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts @@ -47,6 +47,7 @@ export default class InteractivityUtils { content: ``, status: 'publish' as 'publish', date_gmt: '2023-01-01T00:00:00', + title: alias, }; const { link } = await this.requestUtils.createPost( payload ); diff --git a/test/e2e/specs/interactivity/router-regions.spec.ts b/test/e2e/specs/interactivity/router-regions.spec.ts index cbe66b7bd1b217..263e55d41ac676 100644 --- a/test/e2e/specs/interactivity/router-regions.spec.ts +++ b/test/e2e/specs/interactivity/router-regions.spec.ts @@ -97,4 +97,21 @@ test.describe( 'Router regions', () => { await page.getByTestId( 'back' ).click(); await expect( nestedRegionSsr ).toHaveText( 'content from page 1' ); } ); + + test( 'Page title is updated', async ( { page } ) => { + expect( await page.title() ).toBe( + 'router regions – page 1 – gutenberg' + ); + await page.getByTestId( 'next' ).click(); + await page.waitForFunction( + () => document.title === 'router regions – page 2 – gutenberg' + ); + expect( await page.title() ).toBe( + 'router regions – page 2 – gutenberg' + ); + await page.getByTestId( 'back' ).click(); + expect( await page.title() ).toBe( + 'router regions – page 1 – gutenberg' + ); + } ); } ); From 10cddb427cf415f9f9ebe2795a60ba45738ddda3 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 20 Oct 2023 10:17:57 +0200 Subject: [PATCH 6/6] Fix code review recommendations --- packages/interactivity/CHANGELOG.md | 5 ++++- packages/interactivity/src/router.js | 8 ++++---- test/e2e/specs/interactivity/router-regions.spec.ts | 11 ++++------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 43453df262d491..a7f3180b2172ab 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fix + +- Update the title when using enhanced pagination. ([#55446](https://github.com/WordPress/gutenberg/pull/55446)) + ## 2.5.0 (2023-10-18) ## 2.4.0 (2023-10-05) @@ -16,7 +20,6 @@ - Remove `role` attribute when set to `null` in `data-wp-bind`. ([#54608](https://github.com/WordPress/gutenberg/pull/54608)) - Add `timeout` option to `navigate()`, with a default value of `10000` milliseconds. ([#54474](https://github.com/WordPress/gutenberg/pull/54474)) -- Update the title when using enhanced pagination. ([#55446](https://github.com/WordPress/gutenberg/pull/55446)) ## 2.2.0 (2023-08-31) diff --git a/packages/interactivity/src/router.js b/packages/interactivity/src/router.js index 0403734461de72..68d1bc677addf3 100644 --- a/packages/interactivity/src/router.js +++ b/packages/interactivity/src/router.js @@ -55,7 +55,7 @@ const regionsToVdom = ( dom ) => { const id = region.getAttribute( attrName ); regions[ id ] = toVdom( region ); } ); - const title = dom.querySelector( 'title' ).innerText || null; + const title = dom.querySelector( 'title' )?.innerText; return { regions, title }; }; @@ -75,10 +75,10 @@ const renderRegions = ( page ) => { const id = region.getAttribute( attrName ); const fragment = getRegionRootFragment( region ); render( page.regions[ id ], fragment ); - if ( page.title ) { - document.title = page.title; - } } ); + if ( page.title ) { + document.title = page.title; + } }; // Variable to store the current navigation. diff --git a/test/e2e/specs/interactivity/router-regions.spec.ts b/test/e2e/specs/interactivity/router-regions.spec.ts index 263e55d41ac676..f1ea308d6c2563 100644 --- a/test/e2e/specs/interactivity/router-regions.spec.ts +++ b/test/e2e/specs/interactivity/router-regions.spec.ts @@ -98,19 +98,16 @@ test.describe( 'Router regions', () => { await expect( nestedRegionSsr ).toHaveText( 'content from page 1' ); } ); - test( 'Page title is updated', async ( { page } ) => { - expect( await page.title() ).toBe( + test( 'Page title is updated 2', async ( { page } ) => { + await expect( page ).toHaveTitle( 'router regions – page 1 – gutenberg' ); await page.getByTestId( 'next' ).click(); - await page.waitForFunction( - () => document.title === 'router regions – page 2 – gutenberg' - ); - expect( await page.title() ).toBe( + await expect( page ).toHaveTitle( 'router regions – page 2 – gutenberg' ); await page.getByTestId( 'back' ).click(); - expect( await page.title() ).toBe( + await expect( page ).toHaveTitle( 'router regions – page 1 – gutenberg' ); } );