From 358ee772aa2a1bc763d3be236c76a1221263dab5 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@escruffian.com>
Date: Tue, 3 Jan 2023 16:32:02 +0000
Subject: [PATCH 1/3] Navigation: Show the loading indictor when users add a
 new navigation menu

---
 .../src/navigation/edit/index.js              |  3 ++
 .../edit/menu-inspector-controls.js           | 32 +++++++++++++------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 3a4f09ccfd0411..2855bc5e2b9ba7 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -727,6 +727,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				{ stylingInspectorControls }
 				<ResponsiveWrapper
@@ -768,6 +769,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				<Warning>
 					{ __(
@@ -842,6 +844,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				{ stylingInspectorControls }
 				{ isEntityAvailable && (
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 72d011f3a4e757..4653d1a60b0242 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -10,6 +10,7 @@ import {
 	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
+	Spinner,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -31,6 +32,7 @@ const MenuInspectorControls = ( {
 	onCreateNew,
 	onSelectClassicMenu,
 	onSelectNavigationMenu,
+	isLoading,
 } ) => {
 	const isOffCanvasNavigationEditorEnabled =
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
@@ -50,6 +52,25 @@ const MenuInspectorControls = ( {
 		[ clientId ]
 	);
 
+	const experimentMainContent = () => {
+		if ( currentMenuId && isNavigationMenuMissing ) {
+			<p>{ __( 'Select or create a menu' ) }</p>;
+		}
+
+		if ( isLoading ) {
+			return <Spinner />;
+		}
+
+		return (
+			<OffCanvasEditor
+				blocks={ clientIdsTree }
+				isExpanded={ true }
+				selectBlockInCanvas={ false }
+				LeafMoreMenu={ LeafMoreMenu }
+			/>
+		);
+	};
+
 	return (
 		<InspectorControls __experimentalGroup={ menuControlsSlot }>
 			<PanelBody
@@ -82,16 +103,7 @@ const MenuInspectorControls = ( {
 								actionLabel={ actionLabel }
 							/>
 						</HStack>
-						{ currentMenuId && isNavigationMenuMissing ? (
-							<p>{ __( 'Select or create a menu' ) }</p>
-						) : (
-							<OffCanvasEditor
-								blocks={ clientIdsTree }
-								isExpanded={ true }
-								selectBlockInCanvas={ false }
-								LeafMoreMenu={ LeafMoreMenu }
-							/>
-						) }
+						{ experimentMainContent() }
 					</>
 				) : (
 					<>

From 7ebfcf8f29f9d75bcb65b3919caf677a276e8380 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@escruffian.com>
Date: Wed, 4 Jan 2023 13:30:51 +0000
Subject: [PATCH 2/3] add missing return

---
 .../src/navigation/edit/menu-inspector-controls.js              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 4653d1a60b0242..325f0c364c526e 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -54,7 +54,7 @@ const MenuInspectorControls = ( {
 
 	const experimentMainContent = () => {
 		if ( currentMenuId && isNavigationMenuMissing ) {
-			<p>{ __( 'Select or create a menu' ) }</p>;
+			return <p>{ __( 'Select or create a menu' ) }</p>;
 		}
 
 		if ( isLoading ) {

From ad2a07cb3ccbf050fa381d91aa8192a4dc9e41d6 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@escruffian.com>
Date: Wed, 4 Jan 2023 13:53:16 +0000
Subject: [PATCH 3/3] refactor to use more components

---
 .../edit/menu-inspector-controls.js           | 168 ++++++++++--------
 1 file changed, 92 insertions(+), 76 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 325f0c364c526e..ff7faddd5822ba 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -22,26 +22,15 @@ import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
 import { LeafMoreMenu } from '../leaf-more-menu';
 
-const MenuInspectorControls = ( {
+/* translators: %s: The name of a menu. */
+const actionLabel = __( "Switch to '%s'" );
+
+const ExperimentMainContent = ( {
 	clientId,
-	createNavigationMenuIsSuccess,
-	createNavigationMenuIsError,
-	currentMenuId = null,
-	isNavigationMenuMissing,
-	isManageMenusButtonDisabled,
-	onCreateNew,
-	onSelectClassicMenu,
-	onSelectNavigationMenu,
+	currentMenuId,
 	isLoading,
+	isNavigationMenuMissing,
 } ) => {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
-		? 'list'
-		: undefined;
-	/* translators: %s: The name of a menu. */
-	const actionLabel = __( "Switch to '%s'" );
-
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(
@@ -52,24 +41,93 @@ const MenuInspectorControls = ( {
 		[ clientId ]
 	);
 
-	const experimentMainContent = () => {
-		if ( currentMenuId && isNavigationMenuMissing ) {
-			return <p>{ __( 'Select or create a menu' ) }</p>;
-		}
+	if ( currentMenuId && isNavigationMenuMissing ) {
+		return <p>{ __( 'Select or create a menu' ) }</p>;
+	}
+
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
+	return (
+		<OffCanvasEditor
+			blocks={ clientIdsTree }
+			isExpanded={ true }
+			selectBlockInCanvas={ false }
+			LeafMoreMenu={ LeafMoreMenu }
+		/>
+	);
+};
+
+const ExperimentControls = ( props ) => {
+	const {
+		createNavigationMenuIsSuccess,
+		createNavigationMenuIsError,
+		currentMenuId = null,
+		onCreateNew,
+		onSelectClassicMenu,
+		onSelectNavigationMenu,
+	} = props;
 
-		if ( isLoading ) {
-			return <Spinner />;
-		}
+	return (
+		<>
+			<HStack className="wp-block-navigation-off-canvas-editor__header">
+				<Heading
+					className="wp-block-navigation-off-canvas-editor__title"
+					level={ 2 }
+				>
+					{ __( 'Menu' ) }
+				</Heading>
+				<NavigationMenuSelector
+					currentMenuId={ currentMenuId }
+					onSelectClassicMenu={ onSelectClassicMenu }
+					onSelectNavigationMenu={ onSelectNavigationMenu }
+					onCreateNew={ onCreateNew }
+					createNavigationMenuIsSuccess={
+						createNavigationMenuIsSuccess
+					}
+					createNavigationMenuIsError={ createNavigationMenuIsError }
+					actionLabel={ actionLabel }
+				/>
+			</HStack>
+			<ExperimentMainContent { ...props } />
+		</>
+	);
+};
 
-		return (
-			<OffCanvasEditor
-				blocks={ clientIdsTree }
-				isExpanded={ true }
-				selectBlockInCanvas={ false }
-				LeafMoreMenu={ LeafMoreMenu }
+const DefaultControls = ( props ) => {
+	const {
+		createNavigationMenuIsSuccess,
+		createNavigationMenuIsError,
+		currentMenuId = null,
+		isManageMenusButtonDisabled,
+		onCreateNew,
+		onSelectClassicMenu,
+		onSelectNavigationMenu,
+	} = props;
+
+	return (
+		<>
+			<NavigationMenuSelector
+				currentMenuId={ currentMenuId }
+				onSelectClassicMenu={ onSelectClassicMenu }
+				onSelectNavigationMenu={ onSelectNavigationMenu }
+				onCreateNew={ onCreateNew }
+				createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+				createNavigationMenuIsError={ createNavigationMenuIsError }
+				actionLabel={ actionLabel }
 			/>
-		);
-	};
+			<ManageMenusButton disabled={ isManageMenusButtonDisabled } />
+		</>
+	);
+};
+
+const MenuInspectorControls = ( props ) => {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
+		? 'list'
+		: undefined;
 
 	return (
 		<InspectorControls __experimentalGroup={ menuControlsSlot }>
@@ -79,51 +137,9 @@ const MenuInspectorControls = ( {
 				}
 			>
 				{ isOffCanvasNavigationEditorEnabled ? (
-					<>
-						<HStack className="wp-block-navigation-off-canvas-editor__header">
-							<Heading
-								className="wp-block-navigation-off-canvas-editor__title"
-								level={ 2 }
-							>
-								{ __( 'Menu' ) }
-							</Heading>
-							<NavigationMenuSelector
-								currentMenuId={ currentMenuId }
-								onSelectClassicMenu={ onSelectClassicMenu }
-								onSelectNavigationMenu={
-									onSelectNavigationMenu
-								}
-								onCreateNew={ onCreateNew }
-								createNavigationMenuIsSuccess={
-									createNavigationMenuIsSuccess
-								}
-								createNavigationMenuIsError={
-									createNavigationMenuIsError
-								}
-								actionLabel={ actionLabel }
-							/>
-						</HStack>
-						{ experimentMainContent() }
-					</>
+					<ExperimentControls { ...props } />
 				) : (
-					<>
-						<NavigationMenuSelector
-							currentMenuId={ currentMenuId }
-							onSelectClassicMenu={ onSelectClassicMenu }
-							onSelectNavigationMenu={ onSelectNavigationMenu }
-							onCreateNew={ onCreateNew }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							createNavigationMenuIsError={
-								createNavigationMenuIsError
-							}
-							actionLabel={ actionLabel }
-						/>
-						<ManageMenusButton
-							disabled={ isManageMenusButtonDisabled }
-						/>
-					</>
+					<DefaultControls { ...props } />
 				) }
 			</PanelBody>
 		</InspectorControls>