Fix: - Update the title when using enhanced pagination. (#55446)

* Add title update when using enhanced pagination * Simplify code * Use innertext to prevent character encoding * Add changelog * Add e2e test * Fix code review recommendations
WordPress · Oct 20, 2023 · 6a2c92b · 6a2c92b
1 parent 127f7d4
commit 6a2c92b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git 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)

diff --git a/packages/interactivity/src/router.js b/packages/interactivity/src/router.js
@@ -55,8 +55,8 @@ const regionsToVdom = ( dom ) => {
 		const id = region.getAttribute( attrName );
 		regions[ id ] = toVdom( region );
 	} );
-
-	return { regions };
+	const title = dom.querySelector( 'title' )?.innerText;
+	return { regions, title };
 };
 
 // Prefetch a page. We store the promise to avoid triggering a second fetch for
@@ -76,6 +76,9 @@ const renderRegions = ( page ) => {
 		const fragment = getRegionRootFragment( region );
 		render( page.regions[ id ], fragment );
 	} );
+	if ( page.title ) {
+		document.title = page.title;
+	}
 };
 
 // Variable to store the current navigation.

diff --git 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: `<!-- wp:${ block } /-->`,
 			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
@@ -97,4 +97,18 @@ test.describe( 'Router regions', () => {
 		await page.getByTestId( 'back' ).click();
 		await expect( nestedRegionSsr ).toHaveText( 'content from page 1' );
 	} );
+
+	test( 'Page title is updated 2', async ( { page } ) => {
+		await expect( page ).toHaveTitle(
+			'router regions – page 1 – gutenberg'
+		);
+		await page.getByTestId( 'next' ).click();
+		await expect( page ).toHaveTitle(
+			'router regions – page 2 – gutenberg'
+		);
+		await page.getByTestId( 'back' ).click();
+		await expect( page ).toHaveTitle(
+			'router regions – page 1 – gutenberg'
+		);
+	} );
 } );