From 8d343d155c7577d46aea33e708dceb39c571cc80 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 2 Dec 2024 12:26:27 +0100
Subject: [PATCH] Site Editor: Fix focus mode navigation (#67458)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
---
 .../use-navigate-to-entity-record.js          |  2 +-
 packages/router/src/router.tsx                |  1 +
 .../template-part-focus-mode.spec.js          | 50 +++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/specs/site-editor/template-part-focus-mode.spec.js

diff --git a/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js b/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js
index 8cc7fdaefe2d9..66be70fcd4e2e 100644
--- a/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js
+++ b/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js
@@ -17,7 +17,7 @@ export default function useNavigateToEntityRecord() {
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
 			history.navigate(
-				`/${ params.postType }/${ params.id }?canvas=edit&focusMode=true`
+				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`
 			);
 		},
 		[ history ]
diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
index 34cc542c7b573..2ac7974b4dfbc 100644
--- a/packages/router/src/router.tsx
+++ b/packages/router/src/router.tsx
@@ -146,6 +146,7 @@ export function useHistory() {
 	return useMemo(
 		() => ( {
 			navigate,
+			back: history.back,
 		} ),
 		[ navigate ]
 	);
diff --git a/test/e2e/specs/site-editor/template-part-focus-mode.spec.js b/test/e2e/specs/site-editor/template-part-focus-mode.spec.js
new file mode 100644
index 0000000000000..29e6788779ed9
--- /dev/null
+++ b/test/e2e/specs/site-editor/template-part-focus-mode.spec.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Template Part Focus mode', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Should navigate to template part and back.', async ( {
+		admin,
+		page,
+		editor,
+	} ) => {
+		await admin.visitAdminPage( 'site-editor.php?canvas=edit' );
+		await editor.setPreferences( 'core/edit-site', {
+			welcomeGuide: false,
+		} );
+
+		// Check that we're editing the template
+		await expect( page.locator( 'h1' ) ).toContainText( 'Blog Home' );
+		await expect( page.locator( 'h1' ) ).toContainText( 'Template' );
+
+		// Click Template Part
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Header',
+			} )
+			.click();
+
+		// Navigate to Focus mode
+		await editor.clickBlockToolbarButton( 'Edit' );
+
+		// Check if focus mode is active
+		await expect( page.locator( 'h1' ) ).toContainText( 'Header' );
+		await expect( page.locator( 'h1' ) ).toContainText( 'Template Part' );
+
+		// Go back
+		await page.getByRole( 'button', { name: 'Back' } ).click();
+
+		// Check that we're editing the template
+		await expect( page.locator( 'h1' ) ).toContainText( 'Blog Home' );
+		await expect( page.locator( 'h1' ) ).toContainText( 'Template' );
+	} );
+} );