Site Editor: Fix focus mode navigation (#67458)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: carolinan <[email protected]>
WordPress · Dec 5, 2024 · c3529ad · c3529ad
1 parent 5742e9d
commit c3529ad
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
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
@@ -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
@@ -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
@@ -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' );
+	} );
+} );