From 2ed11048d84be3fa7d6b60780ca6234140085c1a Mon Sep 17 00:00:00 2001
From: Mike Schroder <mschrode@umich.edu>
Date: Tue, 27 Apr 2021 17:32:10 +0900
Subject: [PATCH] Show Block Inspector when menu name is clicked.

---
 .../src/components/name-display/index.js       | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/edit-navigation/src/components/name-display/index.js b/packages/edit-navigation/src/components/name-display/index.js
index 18e6d41eb37fea..52d04e55a783bb 100644
--- a/packages/edit-navigation/src/components/name-display/index.js
+++ b/packages/edit-navigation/src/components/name-display/index.js
@@ -4,6 +4,10 @@
 import { useContext } from '@wordpress/element';
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { BlockControls } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { sprintf, __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -13,9 +17,13 @@ import {
 	useMenuEntityProp,
 	IsMenuNameControlFocusedContext,
 } from '../../hooks';
+import {
+	COMPLEMENTARY_AREA_SCOPE,
+	COMPLEMENTARY_AREA_ID,
+} from '../../constants';
 
-import { sprintf, __ } from '@wordpress/i18n';
 export default function NameDisplay() {
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const [ menuId ] = useSelectedMenuId();
 	const [ name ] = useMenuEntityProp( 'name', menuId );
 	const [ , setIsMenuNameEditFocused ] = useContext(
@@ -33,7 +41,13 @@ export default function NameDisplay() {
 						__( `Edit menu name: %s` ),
 						menuName
 					) }
-					onClick={ () => setIsMenuNameEditFocused( true ) }
+					onClick={ () => {
+						enableComplementaryArea(
+							COMPLEMENTARY_AREA_SCOPE,
+							COMPLEMENTARY_AREA_ID
+						);
+						setIsMenuNameEditFocused( true );
+					} }
 				>
 					{ menuName }
 				</ToolbarButton>