Use a DropdownMenu for menu selection in the navigation screen (#25390)

* Add menu selection button * Update copy * Make the change menu button disabled when clicking it would have no action * Update selected menu when creating a menu or any change external to the selector * Add explanatory comment * Switch to a dropdown menu for menu selector * Add header showing currently edited menu * Move dropdown menu back into main header file * Align items left and add create menu header * Change text to No menus available
WordPress · Oct 20, 2020 · e8556c9 · e8556c9
1 parent 26d2b0a
commit e8556c9
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 33 deletions.
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
@@ -1,18 +1,48 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { Button, SelectControl, Dropdown } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	Dropdown,
+	DropdownMenu,
+	MenuGroup,
+	MenuItemsChoice,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ManageLocations from './manage-locations';
 import AddMenuForm from './add-menu-form';
 
-export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
-	const isMobileViewport = useViewportMatch( 'small', '<' );
+export default function Header( {
+	menus,
+	selectedMenuId,
+	onSelectMenu,
+	isPending,
+} ) {
+	const selectedMenu = find( menus, { id: selectedMenuId } );
+	const menuName = selectedMenu ? selectedMenu.name : undefined;
+	let actionHeaderText;
+
+	if ( menuName ) {
+		actionHeaderText = sprintf(
+			// translators: Name of the menu being edited, e.g. 'Main Menu'.
+			__( 'Editing: %s' ),
+			menuName
+		);
+	} else if ( isPending ) {
+		// Loading text won't be displayed if menus are preloaded.
+		actionHeaderText = __( 'Loading …' );
+	} else {
+		actionHeaderText = __( 'No menus available' );
+	}
 
 	return (
 		<div className="edit-navigation-header">
@@ -21,28 +51,36 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 			</h1>
 
 			<div className="edit-navigation-header__actions">
-				<div className="edit-navigation-header__current-menu">
-					<SelectControl
-						label={ __( 'Currently editing' ) }
-						hideLabelFromVision={ isMobileViewport }
-						disabled={ ! menus?.length }
-						value={ selectedMenuId ?? 0 }
-						options={
-							menus?.length
-								? menus.map( ( menu ) => ( {
-										value: menu.id,
-										label: menu.name,
-								  } ) )
-								: [
-										{
-											value: 0,
-											label: '-',
-										},
-								  ]
-						}
-						onChange={ onSelectMenu }
-					/>
-				</div>
+				<h2 className="edit-navigation-header__action_header">
+					{ actionHeaderText }
+				</h2>
+
+				<DropdownMenu
+					icon={ null }
+					toggleProps={ {
+						showTooltip: false,
+						children: __( 'Select menu' ),
+						isTertiary: true,
+						disabled: ! menus,
+						__experimentalIsFocusable: true,
+					} }
+					popoverProps={ {
+						position: 'bottom center',
+					} }
+				>
+					{ () => (
+						<MenuGroup>
+							<MenuItemsChoice
+								value={ selectedMenuId }
+								onSelect={ onSelectMenu }
+								choices={ menus.map( ( menu ) => ( {
+									value: menu.id,
+									label: menu.name,
+								} ) ) }
+							/>
+						</MenuGroup>
+					) }
+				</DropdownMenu>
 
 				<Dropdown
 					position="bottom center"

diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
@@ -12,19 +12,25 @@
 
 // Lining up all the actions in a nice row.
 .edit-navigation-header__actions {
-	align-items: center;
 	display: flex;
+	align-items: baseline;
+	margin-top: $grid-unit-10;
+
+	.edit-navigation-header__action_header {
+		font-weight: normal;
+		font-size: inherit;
+		margin: 0;
+	}
 
 	// Spacing out the actions a little.
-	.edit-navigation-header__current-menu,
+	.edit-navigation-header__action_header,
 	.components-dropdown {
 		margin-right: $grid-unit-20;
 	}
-}
 
-// The select menu for choosing which menu to edit.
-.edit-navigation-header__current-menu .components-base-control__field {
-	margin: 0;
+	.components-dropdown:last-child {
+		margin-right: 0;
+	}
 }
 
 .edit-navigation-header__create-menu-button {

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -53,6 +53,7 @@ export default function Layout( { blockEditorSettings } ) {
 
 						<div className="edit-navigation-layout">
 							<Header
+								isPending={ ! navigationPost }
 								menus={ menus }
 								selectedMenuId={ selectedMenuId }
 								onSelectMenu={ selectMenu }