Restore site editor navigation panel edit button.

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 } />
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -3,13 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
+
 /**
  * Internal dependencies
  */
 import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
 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(

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' );