Navigation: Implement redesign of Navigation Editor

packages/components/src/select-control/index.js

@@ -41,6 +41,7 @@ function SelectControl(
 		options = [],
 		size = 'default',
 		value: valueProp,
+		labelPosition,
 		...props
 	},
 	ref
@@ -100,6 +101,7 @@ function SelectControl(
 						<Icon icon={ chevronDown } size={ 18 } />
 					</DownArrowWrapper>
 				}
+				labelPosition={ labelPosition }
 			>
 				<Select
 					{ ...props }

packages/edit-navigation/src/components/editor/block-view.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { WritingFlow, ObserveTyping, BlockList } from '@wordpress/block-editor';
+import { Spinner } from '@wordpress/components';
+
+export default function BlockView( { isPending } ) {
+	const rootClientId = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlocks()[ 0 ]?.clientId,
+		[]
+	);
+
+	const { selectBlock } = useDispatch( 'core/block-editor' );
+
+	// Select the root Navigation block when it becomes available.
+	useEffect( () => {
+		if ( rootClientId ) {
+			selectBlock( rootClientId );
+		}
+	}, [ rootClientId, selectBlock ] );
+
+	return (
+		<div className="edit-navigation-editor__block-view">
+			{ isPending ? (
+				<Spinner />
+			) : (
+				<div className="editor-styles-wrapper">
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList />
+						</ObserveTyping>
+					</WritingFlow>
+				</div>
+			) }
+		</div>
+	);
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import BlockView from './block-view';
+import ListView from './list-view';
+
+export default function Editor( { isPending, blocks } ) {
+	return (
+		<div className="edit-navigation-editor">
+			<BlockView isPending={ isPending } />
+			<ListView isPending={ isPending } blocks={ blocks } />
+		</div>
+	);
+}

packages/edit-navigation/src/components/editor/list-view.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
+import { __experimentalBlockNavigationTree } from '@wordpress/block-editor';
+
+export default function ListView( { isPending, blocks } ) {
+	const [ selectedBlockId, setSelectedBlockId ] = useState(
+		blocks[ 0 ]?.clientId
+	);
+
+	return (
+		<div className="edit-navigation-editor__list-view">
+			<h3 className="edit-navigation-editor__list-view-title">
+				{ __( 'List view' ) }
+			</h3>
+			{ isPending ? (
+				<Spinner />
+			) : (
+				<__experimentalBlockNavigationTree
+					blocks={ blocks }
+					selectedBlockClientId={ selectedBlockId }
+					selectBlock={ setSelectedBlockId }
+					__experimentalFeatures
+					showNestedBlocks
+					showAppender
+					showBlockMovers
+				/>
+			) }
+		</div>
+	);
+}

packages/edit-navigation/src/components/editor/style.scss

@@ -0,0 +1,45 @@
+.edit-navigation-editor {
+	margin: $grid-unit-20;
+
+	@include break-medium() {
+		align-items: flex-start;
+		display: flex;
+	}
+}
+
+.edit-navigation-editor__block-view {
+	@include break-medium() {
+		flex-grow: 1;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 10px auto;
+	}
+}
+
+.edit-navigation-editor__list-view {
+	border-top: 1px solid $gray-200;
+	margin-top: $grid-unit-20;
+	padding-top: $grid-unit-20;
+
+	@include break-medium() {
+		border-left: 1px solid $gray-200;
+		border-top: none;
+		margin-left: $grid-unit-20;
+		margin-top: 0;
+		padding-left: $grid-unit-20;
+		padding-top: 0;
+		width: 300px;
+	}
+
+	.edit-navigation-editor__list-view-title {
+		font-size: 1.2em;
+		margin: 0;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 100px auto;
+	}
+}

packages/edit-navigation/src/components/header/add-menu-form.js

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { some } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { TextControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+const menuNameMatches = ( menuName ) => ( menu ) =>
+	menu.name.toLowerCase() === menuName.toLowerCase();
+
+export default function AddMenuForm( { menus, onCreate } ) {
+	const [ menuName, setMenuName ] = useState( '' );
+
+	const { createErrorNotice, createInfoNotice } = useDispatch(
+		'core/notices'
+	);
+
+	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+
+	const { saveMenu } = useDispatch( 'core' );
+
+	const createMenu = async ( event ) => {
+		event.preventDefault();
+
+		if ( ! menuName.length ) {
+			return;
+		}
+
+		if ( some( menus, menuNameMatches( menuName ) ) ) {
+			const message = sprintf(
+				// translators: %s: the name of a menu.
+				__(
+					'The menu name %s conflicts with another menu name. Please try another.'
+				),
+				menuName
+			);
+			createErrorNotice( message, { id: 'edit-navigation-error' } );
+			return;
+		}
+
+		setIsCreatingMenu( true );
+
+		const menu = await saveMenu( { name: menuName } );
+		if ( menu ) {
+			createInfoNotice( __( 'Menu created' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+			onCreate( menu.id );
+		}
+
+		setIsCreatingMenu( false );
+	};
+
+	return (
+		<form onSubmit={ createMenu }>
+			<TextControl
+				// Disable reason: The name field should receive focus when
+				// component mounts.
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus
+				label={ __( 'Menu name' ) }
+				value={ menuName }
+				onChange={ setMenuName }
+			/>
+
+			<Button
+				className="edit-navigation-header__create-menu-button"
+				type="submit"
+				isPrimary
+				disabled={ ! menuName.length }
+				isBusy={ isCreatingMenu }
+			>
+				{ __( 'Create menu' ) }
+			</Button>
+		</form>
+	);
+}

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

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { Button, SelectControl, Dropdown } 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', '<' );
+
+	return (
+		<div className="edit-navigation-header">
+			<h1 className="edit-navigation-header__title">
+				{ __( 'Navigation' ) }
+			</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>
+
+				<Dropdown
+					position="bottom center"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							isTertiary
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Add new' ) }
+						</Button>
+					) }
+					renderContent={ () => (
+						<AddMenuForm
+							menus={ menus }
+							onCreate={ onSelectMenu }
+						/>
+					) }
+				/>
+
+				<Dropdown
+					contentClassName="edit-navigation-header__manage-locations"
+					position="bottom center"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							isTertiary
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Manage locations' ) }
+						</Button>
+					) }
+					renderContent={ () => <ManageLocations /> }
+				/>
+			</div>
+		</div>
+	);
+}