Navigation: Removes the header from the navigation list view in the e…

…xperiment (WordPress#46070) * Navigation: Removes the header from the navigation list view * Add a visually hidden menu header for accessiblity
mpkelly · Dec 7, 2022 · bebe6bc · bebe6bc
1 parent 985d6a5
commit bebe6bc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 78 deletions.
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -5,11 +5,7 @@ import {
 	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	__experimentalHStack as HStack,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
+import { PanelBody, VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -22,7 +18,6 @@ const MenuInspectorControls = ( {
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
 	currentMenuId = null,
-	isNavigationMenuMissing,
 	innerBlocks,
 	isManageMenusButtonDisabled,
 	onCreateNew,
@@ -44,61 +39,37 @@ const MenuInspectorControls = ( {
 					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>
-							<NavigationMenuSelector
-								currentMenuId={ currentMenuId }
-								onSelectClassicMenu={ onSelectClassicMenu }
-								onSelectNavigationMenu={
-									onSelectNavigationMenu
-								}
-								onCreateNew={ onCreateNew }
-								createNavigationMenuIsSuccess={
-									createNavigationMenuIsSuccess
-								}
-								createNavigationMenuIsError={
-									createNavigationMenuIsError
-								}
-								actionLabel={ actionLabel }
-							/>
-						</HStack>
-						{ currentMenuId && isNavigationMenuMissing ? (
-							<p>{ __( 'Select or create a menu' ) }</p>
-						) : (
-							<OffCanvasEditor
-								blocks={ innerBlocks }
-								isExpanded={ true }
-								selectBlockInCanvas={ false }
-							/>
-						) }
-					</>
-				) : (
-					<>
-						<NavigationMenuSelector
-							currentMenuId={ currentMenuId }
-							onSelectClassicMenu={ onSelectClassicMenu }
-							onSelectNavigationMenu={ onSelectNavigationMenu }
-							onCreateNew={ onCreateNew }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							createNavigationMenuIsError={
-								createNavigationMenuIsError
-							}
-							actionLabel={ actionLabel }
+				<>
+					{ isOffCanvasNavigationEditorEnabled && (
+						<VisuallyHidden as="h2">
+							{ __( 'Menu' ) }
+						</VisuallyHidden>
+					) }
+					<NavigationMenuSelector
+						currentMenuId={ currentMenuId }
+						onSelectClassicMenu={ onSelectClassicMenu }
+						onSelectNavigationMenu={ onSelectNavigationMenu }
+						onCreateNew={ onCreateNew }
+						createNavigationMenuIsSuccess={
+							createNavigationMenuIsSuccess
+						}
+						createNavigationMenuIsError={
+							createNavigationMenuIsError
+						}
+						actionLabel={ actionLabel }
+					/>
+					{ isOffCanvasNavigationEditorEnabled ? (
+						<OffCanvasEditor
+							blocks={ innerBlocks }
+							isExpanded={ true }
+							selectBlockInCanvas={ false }
 						/>
+					) : (
 						<ManageMenusButton
 							disabled={ isManageMenusButtonDisabled }
 						/>
-					</>
-				) }
+					) }
+				</>
 			</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, moreVertical } from '@wordpress/icons';
+import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -31,9 +31,6 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsError,
 	toggleProps = {},
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -143,11 +140,7 @@ function NavigationMenuSelector( {
 		},
 	};
 
-	if (
-		! hasNavigationMenus &&
-		! hasClassicMenus &&
-		! isOffCanvasNavigationEditorEnabled
-	) {
+	if ( ! hasNavigationMenus && ! hasClassicMenus ) {
 		return (
 			<Button
 				className="wp-block-navigation__navigation-selector-button--createnew"
@@ -168,23 +161,15 @@ function NavigationMenuSelector( {
 
 	return (
 		<DropdownMenu
-			className={
-				isOffCanvasNavigationEditorEnabled
-					? ''
-					: 'wp-block-navigation__navigation-selector'
-			}
+			className="wp-block-navigation__navigation-selector"
 			label={ selectorLabel }
 			text={
 				<span className="wp-block-navigation__navigation-selector-button__label">
-					{ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
+					{ selectorLabel }
 				</span>
 			}
-			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
-			toggleProps={
-				isOffCanvasNavigationEditorEnabled
-					? { isSmall: true }
-					: toggleProps
-			}
+			icon={ null }
+			toggleProps={ toggleProps }
 		>
 			{ ( { onClose } ) => (
 				<>