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/index.js

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

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

@@ -0,0 +1,32 @@
+/**
+ * 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>{ __( '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,39 @@
+.edit-navigation-editor {
+	margin: $grid-unit-20;
+
+	@include break-medium() {
+		align-items: flex-start;
+		display: flex;
+	}
+}
+
+.edit-navigation-editor__list-view {
+	padding-left: $grid-unit-20;
+	margin-left: $grid-unit-20;
+	border-left: 1px solid $gray-200;
+
+	@include break-medium() {
+		width: 300px;
+	}
+
+	h3 {
+		font-size: 15px;
+		margin: 0;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 100px auto;
+	}
+}
+
+.edit-navigation-editor__visual-view {
+	@include break-medium() {
+		flex-grow: 1;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 10px auto;
+	}
+}

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

@@ -0,0 +1,38 @@
+/**
+ * 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 VisualView( { 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__visual-view">
+			{ isPending ? (
+				<Spinner />
+			) : (
+				<div className="editor-styles-wrapper">
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList />
+						</ObserveTyping>
+					</WritingFlow>
+				</div>
+			) }
+		</div>
+	);
+}

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

@@ -0,0 +1,90 @@
+/**
+ * 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
+			className="edit-navigation-header__add-menu-form"
+			onSubmit={ createMenu }
+		>
+			<TextControl
+				className="edit-navigation-header__add-menu-name-field"
+				// Disable reason: The name field should receive focus when
+				// component mounts.
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus
+				label={ __( 'New menu name' ) }
+				placeholder={ __( 'New menu name' ) }
+				hideLabelFromVision
+				value={ menuName }
+				onChange={ setMenuName }
+			/>
+
+			<Button
+				className="edit-navigation-header__add-menu-create-button"
+				type="submit"
+				isPrimary
+				disabled={ ! menuName.length }
+				isBusy={ isCreatingMenu }
+			>
+				{ __( 'Create menu' ) }
+			</Button>
+		</form>
+	);
+}

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

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Spinner,
+	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,
+	onCancelAddingMenu,
+} ) {
+	return (
+		<div className="edit-navigation-header">
+			<h1>{ __( 'Navigation' ) }</h1>
+
+			<div className="edit-navigation-header__actions">
+				{ menus ? (
+					<div className="edit-navigation-header__current-menu">
+						<SelectControl
+							className="edit-navigation-toolbar__menu-select"
+							label={ __( 'Currently editing' ) }
+							disabled={ ! menus.length }
+							value={ selectedMenuId ?? 0 }
+							options={
+								menus.length
+									? menus.map( ( menu ) => ( {
+											value: menu.id,
+											label: menu.name + ' (Primary)', //Just a reminder to show the menu location, if set.
+									  } ) )
+									: [
+											{
+												value: 0,
+												label: __(
+													'— Select navigation —'
+												),
+											},
+									  ]
+							}
+							onChange={ onSelectMenu }
+						/>
+					</div>
+				) : (
+					<Spinner />
+				) }
+
+				<Dropdown
+					contentClassName="edit-navigation-header__add-new-form"
+					position="bottom center"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							isTertiary
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Add new' ) }
+						</Button>
+					) }
+					renderContent={ () => (
+						<AddMenuForm
+							menus={ menus }
+							onCancel={ onCancelAddingMenu }
+							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>
+	);
+}