Add e2e tests for the global inserter to the Nav Editor screen

packages/e2e-tests/specs/experiments/navigation-editor.test.js

@@ -9,6 +9,11 @@ import {
 	visitAdminPage,
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { find } from 'puppeteer-testing-library';
 
 /**
  * Internal dependencies
@@ -590,10 +595,12 @@ describe( 'Navigation editor', () => {
 			}
 		}
 
+		// eslint-disable-next-line jest/no-disabled-tests
 		it.skip( 'should not prompt to confirm unsaved changes for the newly selected menu', async () => {
 			await assertIsDirty( false );
 		} );
 
+		// eslint-disable-next-line jest/no-disabled-tests
 		it.skip( 'should prompt to confirm unsaved changes when menu name is edited', async () => {
 			await page.type(
 				'.edit-navigation-name-editor__text-control input',
@@ -603,4 +610,115 @@ describe( 'Navigation editor', () => {
 			await assertIsDirty( true );
 		} );
 	} );
+
+	describe( 'Sidebar inserter', () => {
+		const initialMenu = {
+			id: 4,
+			description: '',
+			name: 'Main Menu',
+			slug: 'main-menu',
+			meta: [],
+			auto_add: false,
+		};
+
+		it( 'disables inserter toggle when Navigation block is in placeholder state', async () => {
+			await setUpResponseMocking( [
+				...getMenuMocks( {
+					GET: [ initialMenu ],
+					POST: initialMenu,
+				} ),
+				...getMenuItemMocks( { GET: [] } ),
+			] );
+
+			await visitNavigationEditor();
+
+			// Wait for the block to be present.
+			await expect( {
+				role: 'document',
+				name: 'Block: Navigation',
+			} ).toBeFound();
+
+			// Check for the placeholder state
+			await expect( {
+				role: 'button',
+				name: 'Start blank',
+			} ).toBeFound();
+
+			// Expect the block inserter to be disabled.
+			await expect( {
+				name: 'Toggle block inserter',
+				disabled: true,
+				role: 'button',
+			} ).toBeFound();
+		} );
+
+		it( 'enables inserter toggle when Navigation block is in editable state', async () => {
+			await setUpResponseMocking( [
+				...getMenuMocks( {
+					GET: [ initialMenu ],
+					POST: initialMenu,
+				} ),
+				...getMenuItemMocks( { GET: menuItemsFixture } ),
+			] );
+
+			await visitNavigationEditor();
+
+			// Wait for the block to be present.
+			await expect( {
+				role: 'document',
+				name: 'Block: Navigation',
+			} ).toBeFound();
+
+			// Expect the block inserter to be found.
+			await expect( {
+				name: 'Toggle block inserter',
+				role: 'button',
+			} ).toBeFound();
+
+			// Work around bug where `find` with `disabled=false` doesn't return anything.
+			const isEnabled = await page.$eval(
+				'[aria-label="Toggle block inserter"]',
+				( element ) => ! element.disabled
+			);
+
+			expect( isEnabled ).toBeTruthy();
+		} );
+
+		it( 'inserter toggle toggles the inserter sidebar open and closed', async () => {
+			await setUpResponseMocking( [
+				...getMenuMocks( {
+					GET: [ initialMenu ],
+					POST: initialMenu,
+				} ),
+				...getMenuItemMocks( { GET: menuItemsFixture } ),
+			] );
+
+			await visitNavigationEditor();
+
+			// Wait for the block to be present.
+			await expect( {
+				role: 'document',
+				name: 'Block: Navigation',
+			} ).toBeFound();
+
+			// Expect inserter sidebar to **not** be in the DOM.
+			await expect( {
+				role: 'region',
+				name: 'Block library',
+			} ).not.toBeFound();
+
+			const inserterToggle = await find( {
+				name: 'Toggle block inserter',
+				role: 'button',
+			} );
+
+			await inserterToggle.click();
+
+			// Expect the inserter sidebar to be present in the DOM.
+			await expect( {
+				role: 'region',
+				name: 'Block library',
+			} ).toBeFound();
+		} );
+	} );
 } );

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

@@ -14,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import SaveButton from './save-button';
 import UndoButton from './undo-button';
 import RedoButton from './redo-button';
+import InserterToggle from './inserter-toggle';
 import MenuSwitcher from '../menu-switcher';
 import { useMenuEntityProp } from '../../hooks';
 
@@ -26,7 +27,9 @@ export default function Header( {
 	navigationPost,
 } ) {
 	const isMediumViewport = useViewportMatch( 'medium' );
+
 	const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
+
 	let actionHeaderText;
 
 	if ( menuName ) {
@@ -44,23 +47,31 @@ export default function Header( {
 
 	return (
 		<div className="edit-navigation-header">
-			{ isMediumViewport && (
-				<div className="edit-navigation-header__toolbar-wrapper">
+			<div className="edit-navigation-header__toolbar-wrapper">
+				{ isMediumViewport && (
 					<h1 className="edit-navigation-header__title">
 						{ __( 'Navigation' ) }
 					</h1>
-					<NavigableToolbar
-						className="edit-navigation-header__toolbar"
-						aria-label={ __( 'Document tools' ) }
-					>
-						<UndoButton />
-						<RedoButton />
-					</NavigableToolbar>
-				</div>
-			) }
+				) }
+
+				<NavigableToolbar
+					className="edit-navigation-header__toolbar"
+					aria-label={ __( 'Document tools' ) }
+				>
+					<InserterToggle />
+					{ isMediumViewport && (
+						<>
+							<UndoButton />
+							<RedoButton />
+						</>
+					) }
+				</NavigableToolbar>
+			</div>
+
 			<h2 className="edit-navigation-header__subtitle">
 				{ isMenuSelected && decodeEntities( actionHeaderText ) }
 			</h2>
+
 			{ isMenuSelected && (
 				<div className="edit-navigation-header__actions">
 					<DropdownMenu

packages/edit-navigation/src/components/header/inserter-toggle.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { Button, ToolbarItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { plus } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationEditorRootBlock } from '../../hooks';
+import { store as editNavigationStore } from '../../store';
+
+function InserterToggle() {
+	const { navBlockClientId } = useNavigationEditorRootBlock();
+
+	const { isInserterOpened, hasInserterItems } = useSelect(
+		( select ) => {
+			return {
+				hasInserterItems: select( blockEditorStore ).hasInserterItems(
+					navBlockClientId
+				),
+				isInserterOpened: select(
+					editNavigationStore
+				).isInserterOpened(),
+			};
+		},
+		[ navBlockClientId ]
+	);
+
+	const { setIsInserterOpened } = useDispatch( editNavigationStore );
+
+	return (
+		<ToolbarItem
+			as={ Button }
+			className="edit-navigation-header-inserter-toggle"
+			variant="primary"
+			isPressed={ isInserterOpened }
+			onMouseDown={ ( event ) => {
+				event.preventDefault();
+			} }
+			onClick={ () => setIsInserterOpened( ! isInserterOpened ) }
+			icon={ plus }
+			/* translators: button label text should, if possible, be under 16
+					characters. */
+			label={ _x(
+				'Toggle block inserter',
+				'Generic label for block inserter button'
+			) }
+			disabled={ ! hasInserterItems }
+		/>
+	);
+}
+
+export default InserterToggle;

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

@@ -75,3 +75,34 @@
 		display: none;
 	}
 }
+
+
+// INSERTER TOGGLE
+.edit-navigation-header-inserter-toggle {
+
+	svg {
+		transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+		@include reduce-motion("transition");
+	}
+
+	// Make the button appear like a "X" close button.
+	&.is-pressed {
+		svg {
+			transform: rotate(45deg);
+		}
+	}
+}
+
+// INSERTER PANEL
+.edit-navigation-layout__inserter-panel-header {
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	display: flex;
+	justify-content: flex-end;
+
+	// Hide close button within panel on larger screens as this
+	// action is provided by the inserter toggle or ESC key.
+	@include break-medium() {
+		display: none;
+	}
+}

packages/edit-navigation/src/components/inserter-sidebar/index.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { close } from '@wordpress/icons';
+import {
+	__experimentalLibrary as Library,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import {
+	useViewportMatch,
+	__experimentalUseDialog as useDialog,
+} from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editNavigationStore } from '../../store';
+import { useNavigationEditorRootBlock } from '../../hooks';
+
+const SHOW_PREVIEWS = false;
+
+function InserterSidebar() {
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	const {
+		navBlockClientId,
+		lastNavBlockItemIndex,
+	} = useNavigationEditorRootBlock();
+
+	const { hasInserterItems, selectedBlockClientId } = useSelect(
+		( select ) => {
+			return {
+				hasInserterItems: select( blockEditorStore ).hasInserterItems(
+					navBlockClientId
+				),
+				selectedBlockClientId: select(
+					blockEditorStore
+				).getSelectedBlock()?.clientId,
+			};
+		},
+		[ navBlockClientId ]
+	);
+
+	const { setIsInserterOpened } = useDispatch( editNavigationStore );
+
+	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
+		onClose: () => setIsInserterOpened( false ),
+	} );
+
+	// Only concerned with whether there are items to display. If not then
+	// we shouldn't render.
+	if ( ! hasInserterItems ) {
+		return null;
+	}
+
+	const shouldInsertInNavBlock =
+		! selectedBlockClientId || navBlockClientId === selectedBlockClientId;
+
+	return (
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="edit-navigation-layout__inserter-panel"
+		>
+			<div className="edit-navigation-layout__inserter-panel-header">
+				<Button
+					icon={ close }
+					onClick={ () => setIsInserterOpened( false ) }
+				/>
+			</div>
+			<div className="edit-navigation-layout__inserter-panel-content">
+				<Library
+					// If the root Nav block is selected then any items inserted by the
+					// global inserter should append after the last nav item. Otherwise
+					// simply allow default Gutenberg behaviour.
+					rootClientId={
+						shouldInsertInNavBlock ? navBlockClientId : undefined
+					} // If set, insertion will be into the block with this ID.
+					__experimentalInsertionIndex={
+						// If set, insertion will be into this explicit position.
+						shouldInsertInNavBlock
+							? lastNavBlockItemIndex
+							: undefined
+					}
+					shouldFocusBlock={ isMobileViewport }
+					showInserterHelpPanel={ SHOW_PREVIEWS }
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default InserterSidebar;