Reposition navigation selector (#45555)

* Adds the gutenberg-off-canvas-navigation-editor experiment * add list view to navigation block * adds a selectBlockInCanvas to allow control on block selection from list view * reposition navigation selector in panel more menu * Update packages/block-library/src/navigation/edit/index.js * Update packages/block-library/src/navigation/edit/index.js * Update packages/block-editor/src/components/off-canvas-editor/block.js * Update packages/block-editor/src/components/off-canvas-editor/block.js * Update packages/block-library/src/navigation/edit/index.js * Update packages/block-library/src/navigation/edit/index.js * Replace double conditions with ternaries Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: Alex Lende <[email protected]>
WordPress · Nov 9, 2022 · dc7a241 · dc7a241
1 parent 68ee5cc
commit dc7a241
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 139 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -32,6 +32,8 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Button,
 	Spinner,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
@@ -650,56 +652,82 @@ function Navigation( {
 	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
 	// that automatically saves the menu as an entity when changes are made to the inner blocks.
 	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
+
+	const WrappedNavigationMenuSelector = ( { currentMenuId } ) => (
+		<NavigationMenuSelector
+			currentMenuId={ currentMenuId }
+			clientId={ clientId }
+			onSelectNavigationMenu={ ( menuId ) => {
+				handleUpdateMenu( menuId );
+			} }
+			onSelectClassicMenu={ async ( classicMenu ) => {
+				const navMenu = await convertClassicMenu(
+					classicMenu.id,
+					classicMenu.name,
+					'draft'
+				);
+				if ( navMenu ) {
+					handleUpdateMenu( navMenu.id, {
+						focusNavigationBlock: true,
+					} );
+				}
+			} }
+			onCreateNew={ createUntitledEmptyNavigationMenu }
+			createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+			createNavigationMenuIsError={ createNavigationMenuIsError }
+			/* translators: %s: The name of a menu. */
+			actionLabel={ __( "Switch to '%s'" ) }
+		/>
+	);
+
 	if ( hasUnsavedBlocks ) {
 		return (
 			<TagName { ...blockProps }>
 				<InspectorControls>
-					<PanelBody title={ __( 'Menu' ) }>
-						<NavigationMenuSelector
-							currentMenuId={ ref }
-							clientId={ clientId }
-							onSelectNavigationMenu={ ( menuId ) => {
-								handleUpdateMenu( menuId );
-							} }
-							onSelectClassicMenu={ async ( classicMenu ) => {
-								const navMenu = await convertClassicMenu(
-									classicMenu.id,
-									classicMenu.name,
-									'draft'
-								);
-								if ( navMenu ) {
-									handleUpdateMenu( navMenu.id, {
-										focusNavigationBlock: true,
-									} );
-								}
-							} }
-							onCreateNew={ createUntitledEmptyNavigationMenu }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							/* translators: %s: The name of a menu. */
-							actionLabel={ __( "Switch to '%s'" ) }
-						/>
-						{ isOffCanvasNavigationEditorEnabled && (
-							<OffCanvasEditor
-								blocks={ innerBlocks }
-								isExpanded={ true }
-								selectBlockInCanvas={ false }
-							/>
-						) }
-						{ ! isOffCanvasNavigationEditorEnabled && (
-							<Button
-								variant="link"
-								disabled={
-									! hasManagePermissions ||
-									! hasResolvedNavigationMenus
-								}
-								href={ addQueryArgs( 'edit.php', {
-									post_type: 'wp_navigation',
-								} ) }
-							>
-								{ __( 'Manage menus' ) }
-							</Button>
+					<PanelBody
+						title={
+							isOffCanvasNavigationEditorEnabled
+								? null
+								: __( 'Menu' )
+						}
+					>
+						{ isOffCanvasNavigationEditorEnabled ? (
+							<>
+								<HStack className="wp-block-navigation-off-canvas-editor__header">
+									<Heading
+										className="wp-block-navigation-off-canvas-editor__title"
+										level={ 2 }
+									>
+										{ __( 'Menu' ) }
+									</Heading>
+									<WrappedNavigationMenuSelector
+										currentMenuId={ ref }
+									/>
+								</HStack>
+								<OffCanvasEditor
+									blocks={ innerBlocks }
+									isExpanded={ true }
+									selectBlockInCanvas={ false }
+								/>
+							</>
+						) : (
+							<>
+								<WrappedNavigationMenuSelector
+									currentMenuId={ ref }
+								/>
+								<Button
+									variant="link"
+									disabled={
+										! hasManagePermissions ||
+										! hasResolvedNavigationMenus
+									}
+									href={ addQueryArgs( 'edit.php', {
+										post_type: 'wp_navigation',
+									} ) }
+								>
+									{ __( 'Manage menus' ) }
+								</Button>
+							</>
 						) }
 					</PanelBody>
 				</InspectorControls>
@@ -746,45 +774,46 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<InspectorControls>
-					<PanelBody title={ __( 'Menu' ) }>
-						<NavigationMenuSelector
-							currentMenuId={ null }
-							clientId={ clientId }
-							onSelectNavigationMenu={ ( menuId ) => {
-								handleUpdateMenu( menuId );
-							} }
-							onSelectClassicMenu={ async ( classicMenu ) => {
-								const navMenu = await convertClassicMenu(
-									classicMenu.id,
-									classicMenu.name,
-									'draft'
-								);
-								if ( navMenu ) {
-									handleUpdateMenu( navMenu.id, {
-										focusNavigationBlock: true,
-									} );
-								}
-							} }
-							onCreateNew={ createUntitledEmptyNavigationMenu }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							/* translators: %s: The name of a menu. */
-							actionLabel={ __( "Switch to '%s'" ) }
-						/>
-						{ ! isOffCanvasNavigationEditorEnabled && (
-							<Button
-								variant="link"
-								disabled={
-									! hasManagePermissions ||
-									! hasResolvedNavigationMenus
-								}
-								href={ addQueryArgs( 'edit.php', {
-									post_type: 'wp_navigation',
-								} ) }
-							>
-								{ __( 'Manage menus' ) }
-							</Button>
+					<PanelBody
+						title={
+							isOffCanvasNavigationEditorEnabled
+								? null
+								: __( 'Menu' )
+						}
+					>
+						{ isOffCanvasNavigationEditorEnabled ? (
+							<>
+								<HStack className="wp-block-navigation-off-canvas-editor__header">
+									<Heading
+										className="wp-block-navigation-off-canvas-editor__title"
+										level={ 2 }
+									>
+										{ __( 'Menu' ) }
+									</Heading>
+									<WrappedNavigationMenuSelector
+										currentMenuId={ null }
+									/>
+								</HStack>
+								<p>Select or create a menu</p>
+							</>
+						) : (
+							<>
+								<WrappedNavigationMenuSelector
+									currentMenuId={ null }
+								/>
+								<Button
+									variant="link"
+									disabled={
+										! hasManagePermissions ||
+										! hasResolvedNavigationMenus
+									}
+									href={ addQueryArgs( 'edit.php', {
+										post_type: 'wp_navigation',
+									} ) }
+								>
+									{ __( 'Manage menus' ) }
+								</Button>
+							</>
 						) }
 					</PanelBody>
 				</InspectorControls>
@@ -863,55 +892,50 @@ function Navigation( {
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider uniqueId={ recursionId }>
 				<InspectorControls>
-					<PanelBody title={ __( 'Menu' ) }>
-						<NavigationMenuSelector
-							currentMenuId={ ref }
-							clientId={ clientId }
-							onSelectNavigationMenu={ ( menuId ) => {
-								handleUpdateMenu( menuId );
-							} }
-							onSelectClassicMenu={ async ( classicMenu ) => {
-								const navMenu = await convertClassicMenu(
-									classicMenu.id,
-									classicMenu.name,
-									'draft'
-								);
-								if ( navMenu ) {
-									handleUpdateMenu( navMenu.id, {
-										focusNavigationBlock: true,
-									} );
-								}
-							} }
-							onCreateNew={ createUntitledEmptyNavigationMenu }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							createNavigationMenuIsError={
-								createNavigationMenuIsError
-							}
-							/* translators: %s: The name of a menu. */
-							actionLabel={ __( "Switch to '%s'" ) }
-						/>
-						{ isOffCanvasNavigationEditorEnabled && (
-							<OffCanvasEditor
-								blocks={ innerBlocks }
-								isExpanded={ true }
-								selectBlockInCanvas={ false }
-							/>
-						) }
-						{ ! isOffCanvasNavigationEditorEnabled && (
-							<Button
-								variant="link"
-								disabled={
-									! hasManagePermissions ||
-									! hasResolvedNavigationMenus
-								}
-								href={ addQueryArgs( 'edit.php', {
-									post_type: 'wp_navigation',
-								} ) }
-							>
-								{ __( 'Manage menus' ) }
-							</Button>
+					<PanelBody
+						title={
+							isOffCanvasNavigationEditorEnabled
+								? null
+								: __( 'Menu' )
+						}
+					>
+						{ isOffCanvasNavigationEditorEnabled ? (
+							<>
+								<HStack className="wp-block-navigation-off-canvas-editor__header">
+									<Heading
+										className="wp-block-navigation-off-canvas-editor__title"
+										level={ 2 }
+									>
+										{ __( 'Menu' ) }
+									</Heading>
+									<WrappedNavigationMenuSelector
+										currentMenuId={ ref }
+									/>
+								</HStack>
+								<OffCanvasEditor
+									blocks={ innerBlocks }
+									isExpanded={ true }
+									selectBlockInCanvas={ false }
+								/>
+							</>
+						) : (
+							<>
+								<WrappedNavigationMenuSelector
+									currentMenuId={ ref }
+								/>
+								<Button
+									variant="link"
+									disabled={
+										! hasManagePermissions ||
+										! hasResolvedNavigationMenus
+									}
+									href={ addQueryArgs( 'edit.php', {
+										post_type: 'wp_navigation',
+									} ) }
+								>
+									{ __( 'Manage menus' ) }
+								</Button>
+							</>
 						) }
 					</PanelBody>
 				</InspectorControls>

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -10,7 +10,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
+import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -31,6 +31,9 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsError,
 	toggleProps = {},
 } ) {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -161,11 +164,19 @@ function NavigationMenuSelector( {
 
 	return (
 		<DropdownMenu
-			className="wp-block-navigation__navigation-selector"
+			className={
+				isOffCanvasNavigationEditorEnabled
+					? ''
+					: 'wp-block-navigation__navigation-selector'
+			}
 			label={ selectorLabel }
-			text={ selectorLabel }
-			icon={ null }
-			toggleProps={ toggleProps }
+			text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
+			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
+			toggleProps={
+				isOffCanvasNavigationEditorEnabled
+					? { isSmall: true }
+					: toggleProps
+			}
 		>
 			{ ( { onClose } ) => (
 				<>

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -540,6 +540,13 @@ body.editor-styles-wrapper
 	color: inherit;
 }
 
+.components-heading.wp-block-navigation-off-canvas-editor__title {
+	margin: 0;
+}
+.wp-block-navigation-off-canvas-editor__header {
+	margin-bottom: $grid-unit-10;
+}
+
 // Customize the mobile editing.
 // This can be revisited in the future, but for now, inherit design from the parent.
 .is-menu-open .wp-block-navigation__responsive-container-content * {