Navigation: Add a manage menus button to the menu selector dropdown (#…

…47005) Co-authored-by: Ben Dwyer <ben@escruffian.com>
WordPress · Jan 12, 2023 · 7c0f2dd · 7c0f2dd
1 parent 0a06e03
commit 7c0f2dd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/packages/block-library/src/navigation/edit/manage-menus-button.js b/packages/block-library/src/navigation/edit/manage-menus-button.js
@@ -2,20 +2,31 @@
  * WordPress dependencies
  */
 import { addQueryArgs } from '@wordpress/url';
-import { Button } from '@wordpress/components';
+import { Button, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const ManageMenusButton = ( { className = '', disabled } ) => (
-	<Button
-		variant="link"
-		disabled={ disabled }
-		className={ className }
-		href={ addQueryArgs( 'edit.php', {
-			post_type: 'wp_navigation',
-		} ) }
-	>
-		{ __( 'Manage menus' ) }
-	</Button>
-);
+const ManageMenusButton = ( {
+	className = '',
+	disabled,
+	isMenuItem = false,
+} ) => {
+	let ComponentName = Button;
+	if ( isMenuItem ) {
+		ComponentName = MenuItem;
+	}
+
+	return (
+		<ComponentName
+			variant="link"
+			disabled={ disabled }
+			className={ className }
+			href={ addQueryArgs( 'edit.php', {
+				post_type: 'wp_navigation',
+			} ) }
+		>
+			{ __( 'Manage menus' ) }
+		</ComponentName>
+	);
+};
 
 export default ManageMenusButton;
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -67,6 +67,7 @@ const ExperimentControls = ( props ) => {
 		onCreateNew,
 		onSelectClassicMenu,
 		onSelectNavigationMenu,
+		isManageMenusButtonDisabled,
 	} = props;
 
 	return (
@@ -88,6 +89,7 @@ const ExperimentControls = ( props ) => {
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					actionLabel={ actionLabel }
+					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 				/>
 			</HStack>
 			<ExperimentMainContent { ...props } />
@@ -116,6 +118,7 @@ const DefaultControls = ( props ) => {
 				createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
 				createNavigationMenuIsError={ createNavigationMenuIsError }
 				actionLabel={ actionLabel }
+				isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 			/>
 			<ManageMenusButton disabled={ isManageMenusButtonDisabled } />
 		</>

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -20,6 +20,7 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
  */
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
+import ManageMenusButton from './manage-menus-button';
 
 function NavigationMenuSelector( {
 	currentMenuId,
@@ -30,6 +31,7 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
 	toggleProps = {},
+	isManageMenusButtonDisabled,
 } ) {
 	const isOffCanvasNavigationEditorEnabled =
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
@@ -237,6 +239,14 @@ function NavigationMenuSelector( {
 							>
 								{ __( 'Create new menu' ) }
 							</MenuItem>
+							{ isOffCanvasNavigationEditorEnabled && (
+								<ManageMenusButton
+									isManageMenusButtonDisabled={
+										isManageMenusButtonDisabled
+									}
+									isMenuItem={ true }
+								/>
+							) }
 						</MenuGroup>
 					) }
 				</>