From 7738a3718cdd6b24b1636fb9c4c68ab8e93a7a72 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 28 Feb 2024 12:02:07 +0100
Subject: [PATCH] Restore site editor navigation panel edit button.

---
 .../edit-button.js                            | 23 +++++++
 .../single-navigation-menu.js                 |  3 +
 .../site-editor/navigation-editor.spec.js     | 67 +++++++++++++++++--
 3 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js
new file mode 100644
index 0000000000000..91999e3566c57
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { pencil } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SidebarButton from '../sidebar-button';
+import { useLink } from '../routes/link';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+
+export default function EditButton( { postId } ) {
+	const linkInfo = useLink( {
+		postId,
+		postType: NAVIGATION_POST_TYPE,
+		canvas: 'edit',
+	} );
+	return (
+		<SidebarButton { ...linkInfo } label={ __( 'Edit' ) } icon={ pencil } />
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
index e6348531516f6..c382a47ec653e 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
+
 /**
  * Internal dependencies
  */
@@ -10,6 +11,7 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav
 import ScreenNavigationMoreMenu from './more-menu';
 import NavigationMenuEditor from './navigation-menu-editor';
 import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
+import EditButton from './edit-button';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -29,6 +31,7 @@ export default function SingleNavigationMenu( {
 						onSave={ handleSave }
 						onDuplicate={ handleDuplicate }
 					/>
+					<EditButton postId={ navigationMenu?.id } />
 				</>
 			}
 			title={ buildNavigationLabel(
diff --git a/test/e2e/specs/site-editor/navigation-editor.spec.js b/test/e2e/specs/site-editor/navigation-editor.spec.js
index 0761f35535ba8..344f776c71e02 100644
--- a/test/e2e/specs/site-editor/navigation-editor.spec.js
+++ b/test/e2e/specs/site-editor/navigation-editor.spec.js
@@ -19,7 +19,7 @@ test.describe( 'Editing Navigation Menus', () => {
 		requestUtils,
 		editor,
 	} ) => {
-		await test.step( 'Check Navigation block is present and locked', async () => {
+		await test.step( 'Manually browse to focus mode for a Navigation Menu', async () => {
 			// create a Navigation Menu called "Test Menu" using the REST API helpers
 			const createdMenu = await requestUtils.createNavigationMenu( {
 				title: 'Primary Menu',
@@ -34,12 +34,69 @@ test.describe( 'Editing Navigation Menus', () => {
 					'<!-- wp:navigation-link {"label":"Another Item","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
 			} );
 
-			await admin.visitSiteEditor( {
-				postId: createdMenu?.id,
-				postType: 'wp_navigation',
-				canvas: 'edit',
+			// We could Navigate directly to editing the Navigation Menu but we intentionally do not do this.
+			//
+			// Why? To provide coverage for a bug that caused the Navigation Editor behaviours to fail
+			// only when navigating through the editor screens (rather than going directly to the editor by URL).
+			// See: https://github.com/WordPress/gutenberg/pull/56856.
+			//
+			// Example (what we could do):
+			// await admin.visitSiteEditor( {
+			// 	postId: createdMenu?.id,
+			// 	postType: 'wp_navigation',
+			// } );
+			//
+			await admin.visitSiteEditor();
+
+			const editorSidebar = page.getByRole( 'region', {
+				name: 'Navigation',
 			} );
 
+			await editorSidebar
+				.getByRole( 'button', {
+					name: 'Navigation',
+				} )
+				.click();
+
+			// Wait for list of Navigations to appear.
+			await expect(
+				editorSidebar.getByRole( 'heading', {
+					name: 'Navigation',
+					level: 1,
+				} )
+			).toBeVisible();
+
+			await expect( page ).toHaveURL(
+				`wp-admin/site-editor.php?path=%2Fnavigation`
+			);
+
+			await editorSidebar
+				.getByRole( 'button', {
+					name: 'Primary Menu',
+				} )
+				.click();
+
+			await expect( page ).toHaveURL(
+				`wp-admin/site-editor.php?postId=${ createdMenu?.id }&postType=wp_navigation`
+			);
+
+			// Wait for list of Navigations to appear.
+			await expect(
+				editorSidebar.getByRole( 'heading', {
+					name: 'Primary Menu',
+					level: 1,
+				} )
+			).toBeVisible();
+
+			// Switch to editing the Navigation Menu
+			await editorSidebar
+				.getByRole( 'link', {
+					name: 'Edit',
+				} )
+				.click();
+		} );
+
+		await test.step( 'Check Navigation block is present and locked', async () => {
 			// Open List View.
 			await pageUtils.pressKeys( 'access+o' );