Navigation: add dedicated sidebar for managing layout of navigation m…

…enus (#39290) * Navigation: try adding dedicated sidebar for managing layout of navigation menus * Fix table width to avoid overflow * Iterate on var naming and code comments * Further naming refinement * More var renaming * Rename panel title for clarity * Improve a11y of component * Revert addition of fixed table layout. Introduces too many visual bugs * Wrap items to avoid off screen movers where possible * Move additional padding * Revert id on ListView This is now handled in #39494 * Use standard getEntityRecords and remove custom entity selector Now moved to #39498 * Add handling for no data or limited data * Collapse all Nav nodes by default * Only show empty message when there are no menus * Guard against editing unpublished Menus * Select Gallery block in list view correctly * Remove rebase artifact * Add empty message in case of empty menu Co-authored-by: Dave Smith <getdavemail@gmail.com>
WordPress · Mar 28, 2022 · e2af0b2 · e2af0b2
1 parent 081640b
commit e2af0b2
Show file tree

Hide file tree

Showing 14 changed files with 425 additions and 80 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/block-name-context.js b/packages/block-editor/src/components/block-toolbar/block-name-context.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const __unstableBlockNameContext = createContext( '' );
+
+export default __unstableBlockNameContext;
diff --git a/packages/block-editor/src/components/block-toolbar/block-toolbar-last-item.js b/packages/block-editor/src/components/block-toolbar/block-toolbar-last-item.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableBlockToolbarLastItem, Slot } = createSlotFill(
+	'__unstableBlockToolbarLastItem'
+);
+
+__unstableBlockToolbarLastItem.Slot = Slot;
+
+export default __unstableBlockToolbarLastItem;
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -19,11 +19,13 @@ import BlockMover from '../block-mover';
 import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
+import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
+import __unstableBlockNameContext from './block-name-context';
 
 export default function BlockToolbar( { hideDragHandle } ) {
 	const {
@@ -150,6 +152,11 @@ export default function BlockToolbar( { hideDragHandle } ) {
 						group="other"
 						className="block-editor-block-toolbar__slot"
 					/>
+					<__unstableBlockNameContext.Provider
+						value={ blockType?.name }
+					>
+						<__unstableBlockToolbarLastItem.Slot />
+					</__unstableBlockNameContext.Provider>
 				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -99,6 +99,8 @@ export { default as withColorContext } from './color-palette/with-color-context'
  */
 
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
+export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';
 export { default as __unstableInserterMenuExtension } from './inserter-menu-extension';
 export { default as __experimentalPreviewOptions } from './preview-options';
 export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -44,7 +44,6 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
@@ -287,10 +286,6 @@ function Navigation( {
 	const navRef = useRef();
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
 
-	const { listViewToolbarButton, listViewModal } = useListViewModal(
-		clientId
-	);
-
 	const {
 		convert,
 		status: classicMenuConversionStatus,
@@ -650,9 +645,7 @@ function Navigation( {
 							/>
 						</ToolbarGroup>
 					) }
-					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
 				</BlockControls>
-				{ listViewModal }
 				<InspectorControls>
 					{ hasSubmenuIndicatorSetting && (
 						<PanelBody title={ __( 'Display' ) }>

diff --git a/packages/block-library/src/navigation/edit/use-list-view-modal.js b/packages/block-library/src/navigation/edit/use-list-view-modal.js
diff --git a/packages/e2e-tests/specs/site-editor/style-variations.test.js b/packages/e2e-tests/specs/site-editor/style-variations.test.js
@@ -73,7 +73,7 @@ async function getCustomFontSizeValue() {
 async function getColorValue( colorType ) {
 	return page.evaluate( ( _colorType ) => {
 		return document.evaluate(
-			`substring-before(substring-after(//div[@aria-label="Settings"]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
+			`substring-before(substring-after(//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
 			document,
 			null,
 			XPathResult.ANY_TYPE,

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -15,13 +15,19 @@ import {
 	__experimentalLinkControl,
 	BlockInspector,
 	BlockTools,
+	__unstableBlockToolbarLastItem,
 	__unstableBlockSettingsMenuFirstItem,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
+	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
+import { listView } from '@wordpress/icons';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -93,6 +99,13 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		templateType
 	);
 	const { setPage } = useDispatch( editSiteStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const openNavigationSidebar = useCallback( () => {
+		enableComplementaryArea(
+			'core/edit-site',
+			'edit-site/navigation-menu'
+		);
+	}, [ enableComplementaryArea ] );
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -161,6 +174,22 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						<BlockInspectorButton onClick={ onClose } />
 					) }
 				</__unstableBlockSettingsMenuFirstItem>
+				<__unstableBlockToolbarLastItem>
+					<__unstableBlockNameContext.Consumer>
+						{ ( blockName ) =>
+							blockName === 'core/navigation' && (
+								<ToolbarGroup>
+									<ToolbarButton
+										className="components-toolbar__control"
+										label={ __( 'Open list view' ) }
+										onClick={ openNavigationSidebar }
+										icon={ listView }
+									/>
+								</ToolbarGroup>
+							)
+						}
+					</__unstableBlockNameContext.Consumer>
+				</__unstableBlockToolbarLastItem>
 			</BlockTools>
 			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>

diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -14,6 +14,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
+import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
@@ -77,6 +78,7 @@ export function SidebarComplementaryAreaFills() {
 				) }
 			</DefaultSidebar>
 			<GlobalStylesSidebar />
+			<NavigationMenuSidebar />
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexBlock, Flex } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { navigation } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DefaultSidebar from '../default-sidebar';
+import NavigationInspector from './navigation-inspector';
+
+export default function NavigationMenuSidebar() {
+	return (
+		<DefaultSidebar
+			className="edit-site-navigation-menu-sidebar"
+			identifier="edit-site/navigation-menu"
+			title={ __( 'Navigation Menus' ) }
+			icon={ navigation }
+			closeLabel={ __( 'Close navigation menu sidebar' ) }
+			panelClassName="edit-site-navigation-menu-sidebar__panel"
+			header={
+				<Flex>
+					<FlexBlock>
+						<strong>{ __( 'Navigation Menus' ) }</strong>
+					</FlexBlock>
+				</Flex>
+			}
+		>
+			<NavigationInspector />
+		</DefaultSidebar>
+	);
+}