Move theme location settings to navigation editor sidebar

packages/edit-navigation/src/components/header/index.js

@@ -6,15 +6,14 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Button, Dropdown, DropdownMenu } from '@wordpress/components';
+import { DropdownMenu } from '@wordpress/components';
 import { PinnedItems } from '@wordpress/interface';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import SaveButton from './save-button';
-import ManageLocations from './manage-locations';
 import MenuSwitcher from '../menu-switcher';
 
 export default function Header( {
@@ -85,23 +84,6 @@ export default function Header( {
 						) }
 					</DropdownMenu>
 
-					<Dropdown
-						contentClassName="edit-navigation-header__manage-locations"
-						position="bottom left"
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<Button
-								isTertiary
-								aria-expanded={ isOpen }
-								onClick={ onToggle }
-							>
-								{ __( 'Manage locations' ) }
-							</Button>
-						) }
-						renderContent={ () => (
-							<ManageLocations menus={ menus } />
-						) }
-					/>
-
 					<SaveButton navigationPost={ navigationPost } />
 					<PinnedItems.Slot scope="core/edit-navigation" />
 				</div>

packages/edit-navigation/src/components/inspector-additions/index.js

@@ -9,11 +9,20 @@ import { InspectorControls } from '@wordpress/block-editor';
  */
 import AutoAddPagesPanel from './auto-add-pages-panel';
 import DeleteMenuPanel from './delete-menu-panel';
+import ManageLocations from './manage-locations';
 import { NameEditor } from '../name-editor';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function InspectorAdditions( { menuId, onDeleteMenu } ) {
+export default function InspectorAdditions( {
+	menuId,
+	menus,
+	onDeleteMenu,
+	onSelectMenu,
+	isManageLocationsModalOpen,
+	closeManageLocationsModal,
+	openManageLocationsModal,
+} ) {
 	const selectedBlock = useSelect(
 		( select ) => select( 'core/block-editor' ).getSelectedBlock(),
 		[]
@@ -25,11 +34,21 @@ export default function InspectorAdditions( { menuId, onDeleteMenu } ) {
 
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Menu Settings' ) }>
+			<PanelBody title={ __( 'Menu settings' ) }>
 				<NameEditor />
 				<AutoAddPagesPanel menuId={ menuId } />
 				<DeleteMenuPanel onDeleteMenu={ onDeleteMenu } />
 			</PanelBody>
+			<PanelBody title={ __( 'Theme locations' ) }>
+				<ManageLocations
+					menus={ menus }
+					selectedMenuId={ menuId }
+					onSelectMenu={ onSelectMenu }
+					isModalOpen={ isManageLocationsModalOpen }
+					closeModal={ closeManageLocationsModal }
+					openModal={ openManageLocationsModal }
+				/>
+			</PanelBody>
 		</InspectorControls>
 	);
 }

packages/edit-navigation/src/components/inspector-additions/manage-locations.js

@@ -0,0 +1,154 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Spinner,
+	SelectControl,
+	CheckboxControl,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useMenuLocations } from '../../hooks';
+
+export default function ManageLocations( {
+	onSelectMenu,
+	isModalOpen,
+	openModal,
+	closeModal,
+	menus,
+	selectedMenuId,
+} ) {
+	const {
+		menuLocations,
+		assignMenuToLocation,
+		toggleMenuLocationAssignment,
+	} = useMenuLocations();
+
+	if ( ! menuLocations ) {
+		return <Spinner />;
+	}
+
+	if ( ! menuLocations.length ) {
+		return <p>{ __( 'There are no available menu locations.' ) }</p>;
+	}
+
+	const themeLocationCountTextMain = sprintf(
+		// translators: Number of available theme locations.
+		__(
+			'Your current theme provides %d different locations to place menu.'
+		),
+		menuLocations.length
+	);
+
+	const themeLocationCountTextModal = sprintf(
+		// translators: Number of available theme locations.
+		__(
+			'Your current theme supports %d different locations. Select which menu appears in each location.'
+		),
+		menuLocations.length
+	);
+
+	const menusWithSelection = menuLocations.map( ( { name, menu } ) => {
+		const menuOnLocation = menus
+			.filter( ( { id } ) => ! [ 0, selectedMenuId ].includes( id ) )
+			.find( ( { id } ) => id === menu );
+
+		return (
+			<li
+				key={ name }
+				className="edit-navigation-manage-locations__checklist-item"
+			>
+				<CheckboxControl
+					className="edit-navigation-manage-locations__menu-location-checkbox"
+					checked={ menu === selectedMenuId }
+					onChange={ () =>
+						toggleMenuLocationAssignment( name, selectedMenuId )
+					}
+					label={ name }
+					help={
+						menuOnLocation &&
+						sprintf(
+							// translators: menu name.
+							__( 'Currently using %s' ),
+							menuOnLocation.name
+						)
+					}
+				/>
+			</li>
+		);
+	} );
+
+	const menuLocationCard = menuLocations.map( ( menuLocation ) => (
+		<div
+			key={ menuLocation.name }
+			className="edit-navigation-manage-locations__menu-entry"
+		>
+			<SelectControl
+				key={ menuLocation.name }
+				className="edit-navigation-manage-locations__select-menu"
+				label={ menuLocation.description }
+				labelPosition="top"
+				value={ menuLocation.menu }
+				options={ [
+					{ value: 0, label: __( '-' ), key: 0 },
+					...menus.map( ( { id, name } ) => ( {
+						key: id,
+						value: id,
+						label: name,
+					} ) ),
+				] }
+				onChange={ ( menuId ) => {
+					assignMenuToLocation( menuLocation.name, Number( menuId ) );
+				} }
+			/>
+			<Button
+				isSecondary
+				style={ {
+					visibility: !! menuLocation.menu ? 'visible' : 'hidden',
+				} }
+				className="edit-navigation-manage-locations__edit-button"
+				onClick={ () => (
+					closeModal(), onSelectMenu( menuLocation.menu )
+				) }
+			>
+				{ __( 'Edit' ) }
+			</Button>
+		</div>
+	) );
+
+	return (
+		<>
+			<div className="edit-navigation-manage-locations__theme-location-text-main">
+				{ themeLocationCountTextMain }
+			</div>
+			<ul className="edit-navigation-manage-locations__checklist">
+				{ menusWithSelection }
+			</ul>
+			<Button
+				isSecondary
+				className="edit-navigation-manage-locations__open-menu-locations-modal-button"
+				aria-expanded={ isModalOpen }
+				onClick={ openModal }
+			>
+				{ __( 'Manage locations' ) }
+			</Button>
+			{ isModalOpen && (
+				<Modal
+					className="edit-navigation-manage-locations__modal"
+					title={ __( 'Manage locations' ) }
+					onRequestClose={ closeModal }
+				>
+					<div className="edit-navigation-manage-locations__theme-location-text-modal">
+						{ themeLocationCountTextModal }
+					</div>
+					{ menuLocationCard }
+				</Modal>
+			) }
+		</>
+	);
+}

packages/edit-navigation/src/components/inspector-additions/style.scss

@@ -1,3 +1,46 @@
 .edit-navigation-inspector-additions__delete-menu-panel {
 	text-align: center;
 }
+
+.edit-navigation-manage-locations__modal {
+	max-width: 360px;
+}
+
+.edit-navigation-manage-locations__delete-menu-panel {
+	text-align: center;
+}
+
+.edit-navigation-manage-locations__menu-entry .components-base-control {
+	width: 100%;
+}
+
+.edit-navigation-manage-locations__edit-button {
+	flex: 1;
+}
+
+.edit-navigation-manage-locations__menu-entry {
+	display: flex;
+	margin-bottom: $grid-unit-15;
+	margin-top: $grid-unit-15;
+	.components-custom-select-control,
+	.components-custom-select-control__button {
+		width: 100%;
+	}
+	button {
+		height: 100%;
+	}
+}
+
+.edit-navigation-manage-locations__select-menu {
+	padding-right: $grid-unit-10;
+}
+
+.edit-navigation-manage-locations__open-menu-locations-modal-button {
+	width: 100%;
+	justify-content: center;
+}
+
+.edit-navigation-manage-locations__theme-location-text-main,
+.edit-navigation-manage-locations__theme-location-text-modal {
+	margin-bottom: $grid-unit-30;
+}

packages/edit-navigation/src/components/layout/index.js

@@ -74,6 +74,9 @@ export default function Layout( { blockEditorSettings } ) {
 		navigationPost,
 		selectMenu,
 		deleteMenu,
+		openManageLocationsModal,
+		closeManageLocationsModal,
+		isManageLocationsModalOpen,
 	} = useNavigationEditor();
 
 	const [ blocks, onInput, onChange ] = useNavigationBlockEditor(
@@ -167,6 +170,19 @@ export default function Layout( { blockEditorSettings } ) {
 															blocks={ blocks }
 														/>
 														<InspectorAdditions
+															isManageLocationsModalOpen={
+																isManageLocationsModalOpen
+															}
+															openManageLocationsModal={
+																openManageLocationsModal
+															}
+															closeManageLocationsModal={
+																closeManageLocationsModal
+															}
+															onSelectMenu={
+																selectMenu
+															}
+															menus={ menus }
 															menuId={
 																selectedMenuId
 															}