@wordpress/block-library 7.13.1-next.957ca95e4c.0 → 7.14.1

package/src/navigation/edit/navigation-menu-selector.js

@@ -5,12 +5,15 @@ import {
 	MenuGroup,
 	MenuItem,
 	MenuItemsChoice,
-	ToolbarDropdownMenu,
+	DropdownMenu,
+	Button,
+	VisuallyHidden,
 } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import { addQueryArgs } from '@wordpress/url';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,36 +21,55 @@ import { forwardRef, useMemo } from '@wordpress/element';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
-function NavigationMenuSelector(
-	{
-		currentMenuId,
-		onSelectNavigationMenu,
-		onSelectClassicMenu,
-		onCreateNew,
-		showManageActions = false,
-		actionLabel,
-		toggleProps = {},
-	},
-	forwardedRef
-) {
+function NavigationMenuSelector( {
+	currentMenuId,
+	onSelectNavigationMenu,
+	onSelectClassicMenu,
+	onCreateNew,
+	actionLabel,
+	createNavigationMenuIsSuccess,
+	createNavigationMenuIsError,
+	toggleProps = {},
+} ) {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
+	const [ selectorLabel, setSelectorLabel ] = useState( '' );
+	const [ isPressed, setIsPressed ] = useState( false );
+	const [ enableOptions, setEnableOptions ] = useState( false );
+	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+
 	actionLabel = actionLabel || createActionLabel;
 
 	const { menus: classicMenus } = useNavigationEntities();
 
 	const {
 		navigationMenus,
+		hasResolvedNavigationMenus,
+		isNavigationMenuResolved,
 		canUserCreateNavigationMenu,
-		canUserUpdateNavigationMenu,
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
+	const [ currentTitle ] = useEntityProp(
+		'postType',
+		'wp_navigation',
+		'title'
+	);
+
+	const shouldEnableMenuSelector =
+		( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
+		hasResolvedNavigationMenus &&
+		! isCreatingMenu;
+
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title } ) => {
 				const label = decodeEntities( title.rendered );
+				if ( id === currentMenuId && ! isCreatingMenu ) {
+					setSelectorLabel( currentTitle );
+					setEnableOptions( shouldEnableMenuSelector );
+				}
 				return {
 					value: id,
 					label,
@@ -55,32 +77,93 @@ function NavigationMenuSelector(
 				};
 			} ) || []
 		);
-	}, [ navigationMenus ] );
+	}, [
+		currentTitle,
+		currentMenuId,
+		navigationMenus,
+		createNavigationMenuIsSuccess,
+		isNavigationMenuResolved,
+		hasResolvedNavigationMenus,
+	] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
 	const showNavigationMenus = !! canSwitchNavigationMenu;
 	const showClassicMenus = !! canUserCreateNavigationMenu;
-	const hasManagePermissions =
-		canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
-
-	// Show the selector if:
-	// - has switch or create permissions and there are block or classic menus.
-	// - user has create or update permissions and component should show the menu actions.
-	const showSelectMenus =
-		( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
-			( hasNavigationMenus || hasClassicMenus ) ) ||
-		( hasManagePermissions && showManageActions );
-
-	if ( ! showSelectMenus ) {
-		return null;
+
+	const noMenuSelected = hasNavigationMenus && ! currentMenuId;
+	const noBlockMenus = ! hasNavigationMenus && hasResolvedNavigationMenus;
+	const menuUnavailable =
+		hasResolvedNavigationMenus && currentMenuId === null;
+
+	useEffect( () => {
+		if ( ! hasResolvedNavigationMenus ) {
+			setSelectorLabel( __( 'Loading …' ) );
+		} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
+			setSelectorLabel( __( 'Select menu' ) );
+			setEnableOptions( shouldEnableMenuSelector );
+		}
+
+		if (
+			isCreatingMenu &&
+			( createNavigationMenuIsSuccess || createNavigationMenuIsError )
+		) {
+			setIsCreatingMenu( false );
+		}
+	}, [
+		currentMenuId,
+		hasNavigationMenus,
+		hasResolvedNavigationMenus,
+		createNavigationMenuIsSuccess,
+		isNavigationMenuResolved,
+	] );
+
+	toggleProps = {
+		...toggleProps,
+		className: 'wp-block-navigation__navigation-selector-button',
+		children: (
+			<>
+				<VisuallyHidden as="span">
+					{ __( 'Select Menu' ) }
+				</VisuallyHidden>
+				<Icon
+					icon={ isPressed ? chevronUp : chevronDown }
+					className="wp-block-navigation__navigation-selector-button__icon"
+				/>
+			</>
+		),
+		isBusy: ! enableOptions,
+		disabled: ! enableOptions,
+		__experimentalIsFocusable: true,
+		onClick: () => {
+			setIsPressed( ! isPressed );
+		},
+	};
+
+	if ( ! hasNavigationMenus && ! hasClassicMenus ) {
+		return (
+			<Button
+				className="wp-block-navigation__navigation-selector-button--createnew"
+				isBusy={ ! enableOptions }
+				disabled={ ! enableOptions }
+				__experimentalIsFocusable
+				onClick={ () => {
+					onCreateNew();
+					setIsCreatingMenu( true );
+					setSelectorLabel( __( 'Loading …' ) );
+					setEnableOptions( false );
+				} }
+			>
+				{ __( 'Create new menu' ) }
+			</Button>
+		);
 	}
 
 	return (
-		<ToolbarDropdownMenu
-			ref={ forwardedRef }
-			label={ __( 'Select Menu' ) }
-			text={ __( 'Select Menu' ) }
+		<DropdownMenu
+			className="wp-block-navigation__navigation-selector"
+			label={ selectorLabel }
+			text={ selectorLabel }
 			icon={ null }
 			toggleProps={ toggleProps }
 		>
@@ -91,7 +174,6 @@ function NavigationMenuSelector(
 							<MenuItemsChoice
 								value={ currentMenuId }
 								onSelect={ ( menuId ) => {
-									onClose();
 									onSelectNavigationMenu( menuId );
 								} }
 								choices={ menuChoices }
@@ -99,14 +181,18 @@ function NavigationMenuSelector(
 						</MenuGroup>
 					) }
 					{ showClassicMenus && hasClassicMenus && (
-						<MenuGroup label={ __( 'Classic Menus' ) }>
+						<MenuGroup label={ __( 'Import Classic Menus' ) }>
 							{ classicMenus?.map( ( menu ) => {
 								const label = decodeEntities( menu.name );
 								return (
 									<MenuItem
 										onClick={ () => {
-											onClose();
+											setSelectorLabel(
+												__( 'Loading …' )
+											);
+											setEnableOptions( false );
 											onSelectClassicMenu( menu );
+											onClose();
 										} }
 										key={ menu.id }
 										aria-label={ sprintf(
@@ -121,26 +207,25 @@ function NavigationMenuSelector(
 						</MenuGroup>
 					) }
 
-					{ showManageActions && hasManagePermissions && (
+					{ canUserCreateNavigationMenu && (
 						<MenuGroup label={ __( 'Tools' ) }>
-							{ canUserCreateNavigationMenu && (
-								<MenuItem onClick={ onCreateNew }>
-									{ __( 'Create new menu' ) }
-								</MenuItem>
-							) }
 							<MenuItem
-								href={ addQueryArgs( 'edit.php', {
-									post_type: 'wp_navigation',
-								} ) }
+								onClick={ () => {
+									onClose();
+									onCreateNew();
+									setIsCreatingMenu( true );
+									setSelectorLabel( __( 'Loading …' ) );
+									setEnableOptions( false );
+								} }
 							>
-								{ __( 'Manage menus' ) }
+								{ __( 'Create new menu' ) }
 							</MenuItem>
 						</MenuGroup>
 					) }
 				</>
 			) }
-		</ToolbarDropdownMenu>
+		</DropdownMenu>
 	);
 }
 
-export default forwardRef( NavigationMenuSelector );
+export default NavigationMenuSelector;

package/src/navigation/edit/overlay-menu-icon.js

@@ -2,8 +2,13 @@
  * WordPress dependencies
  */
 import { SVG, Rect } from '@wordpress/primitives';
+import { Icon, menu } from '@wordpress/icons';
+
+export default function OverlayMenuIcon( { icon } ) {
+	if ( icon === 'menu' ) {
+		return <Icon icon={ menu } />;
+	}
 
-export default function OverlayMenuIcon() {
 	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"

package/src/navigation/edit/overlay-menu-preview.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
+export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
+	return (
+		<>
+			<ToggleControl
+				label={ __( 'Show icon button' ) }
+				help={ __(
+					'Configure the visual appearance of the button opening the overlay menu.'
+				) }
+				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
+				checked={ hasIcon }
+			/>
+
+			<ToggleGroupControl
+				label={ __( 'Icon' ) }
+				value={ icon }
+				onChange={ ( value ) => setAttributes( { icon: value } ) }
+				isBlock
+			>
+				<ToggleGroupControlOption
+					value="handle"
+					aria-label={ __( 'handle' ) }
+					label={ <OverlayMenuIcon icon="handle" /> }
+				/>
+				<ToggleGroupControlOption
+					value="menu"
+					aria-label={ __( 'menu' ) }
+					label={ <OverlayMenuIcon icon="menu" /> }
+				/>
+			</ToggleGroupControl>
+		</>
+	);
+}

package/src/navigation/edit/responsive-wrapper.js

@@ -26,6 +26,7 @@ export default function ResponsiveWrapper( {
 	overlayBackgroundColor,
 	overlayTextColor,
 	hasIcon,
+	icon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -83,7 +84,7 @@ export default function ResponsiveWrapper( {
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
-					{ hasIcon && <OverlayMenuIcon /> }
+					{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
 					{ ! hasIcon && (
 						<span className="wp-block-navigation__toggle_button_label">
 							{ __( 'Menu' ) }

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -18,9 +18,16 @@ export const CLASSIC_MENU_CONVERSION_PENDING = 'pending';
 export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
 
 function useConvertClassicToBlockMenu( clientId ) {
-	const { create: createNavigationMenu } =
-		useCreateNavigationMenu( clientId );
+	/*
+	 * The wp_navigation post is created as a draft so the changes on the frontend and
+	 * the site editor are not permanent without a save interaction done by the user.
+	 */
+	const { create: createNavigationMenu } = useCreateNavigationMenu(
+		clientId,
+		'draft'
+	);
 	const registry = useRegistry();
+	const { editEntityRecord } = useDispatch( coreStore );
 
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
 	const [ error, setError ] = useState( null );
@@ -71,6 +78,23 @@ function useConvertClassicToBlockMenu( clientId ) {
 				menuName,
 				innerBlocks
 			);
+
+			/**
+			 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
+			 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
+			 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
+			 * without user interaction.
+			 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
+			 */
+			await editEntityRecord(
+				'postType',
+				'wp_navigation',
+				navigationMenu.id,
+				{
+					status: 'publish',
+				},
+				{ throwOnError: true }
+			);
 		} catch ( err ) {
 			throw new Error(
 				sprintf(

package/src/navigation/edit/use-create-navigation-menu.js

@@ -16,7 +16,10 @@ export const CREATE_NAVIGATION_MENU_ERROR = 'error';
 export const CREATE_NAVIGATION_MENU_PENDING = 'pending';
 export const CREATE_NAVIGATION_MENU_IDLE = 'idle';
 
-export default function useCreateNavigationMenu( clientId ) {
+export default function useCreateNavigationMenu(
+	clientId,
+	postStatus = 'publish'
+) {
 	const [ status, setStatus ] = useState( CREATE_NAVIGATION_MENU_IDLE );
 	const [ value, setValue ] = useState( null );
 	const [ error, setError ] = useState( null );
@@ -60,7 +63,7 @@ export default function useCreateNavigationMenu( clientId ) {
 			const record = {
 				title,
 				content: serialize( blocks ),
-				status: 'publish',
+				status: postStatus,
 			};
 
 			// Return affords ability to await on this function directly

package/src/navigation/editor.scss

@@ -610,3 +610,22 @@ body.editor-styles-wrapper
 	display: none;
 }
 
+/**
+ * Navigation selector styles
+ */
+.wp-block-navigation__navigation-selector {
+	margin-bottom: $grid-unit-20;
+	width: 100%;
+}
+
+.wp-block-navigation__navigation-selector-button {
+	border: 1px solid;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.wp-block-navigation__navigation-selector-button--createnew {
+	border: 1px solid;
+	margin-bottom: $grid-unit-20;
+	width: 100%;
+}

package/src/navigation/index.js

@@ -7,6 +7,7 @@ import { navigation as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
@@ -50,3 +51,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/navigation/index.php

@@ -469,27 +469,25 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 		// Only published posts are valid. If this is changed then a corresponding change
 		// must also be implemented in `use-navigation-menu.js`.
-		if ( 'publish' !== $navigation_post->post_status ) {
-			return '';
-		}
+		if ( 'publish' === $navigation_post->post_status ) {
+			$nav_menu_name = $navigation_post->post_title;
 
-		$nav_menu_name = $navigation_post->post_title;
-
-		if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {
-			++$seen_menu_names[ $nav_menu_name ];
-		} else {
-			$seen_menu_names[ $nav_menu_name ] = 1;
-		}
+			if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {
+				++$seen_menu_names[ $nav_menu_name ];
+			} else {
+				$seen_menu_names[ $nav_menu_name ] = 1;
+			}
 
-		$parsed_blocks = parse_blocks( $navigation_post->post_content );
+			$parsed_blocks = parse_blocks( $navigation_post->post_content );
 
-		// 'parse_blocks' includes a null block with '\n\n' as the content when
-		// it encounters whitespace. This code strips it.
-		$compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
+			// 'parse_blocks' includes a null block with '\n\n' as the content when
+			// it encounters whitespace. This code strips it.
+			$compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
-		// TODO - this uses the full navigation block attributes for the
-		// context which could be refined.
-		$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
+			// TODO - this uses the full navigation block attributes for the
+			// context which could be refined.
+			$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
+		}
 	}
 
 	// If there are no inner blocks then fallback to rendering an appropriate fallback.
@@ -504,9 +502,18 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		}
 
 		$inner_blocks = new WP_Block_List( $fallback_blocks, $attributes );
-
 	}
 
+	/**
+	 * Filter navigation block $inner_blocks.
+	 * Allows modification of a navigation block menu items.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param \WP_Block_List $inner_blocks
+	 */
+	$inner_blocks = apply_filters( 'block_core_navigation_render_inner_blocks', $inner_blocks );
+
 	$layout_justification = array(
 		'left'          => 'items-justified-left',
 		'right'         => 'items-justified-right',
@@ -558,10 +565,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			$is_list_open       = false;
 			$inner_blocks_html .= '</ul>';
 		}
-		if ( 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name ) {
-			$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block->render() . '</li>';
+		$inner_block_content = $inner_block->render();
+		if ( 'core/site-title' === $inner_block->name || ( 'core/site-logo' === $inner_block->name && $inner_block_content ) ) {
+			$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
 		} else {
-			$inner_blocks_html .= $inner_block->render();
+			$inner_blocks_html .= $inner_block_content;
 		}
 	}
 
@@ -610,8 +618,13 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$is_hidden_by_default ? 'always-shown' : '',
 	);
 
-	$should_display_icon_label   = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
-	$toggle_button_icon          = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+	$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
+	$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+	if ( isset( $attributes['icon'] ) ) {
+		if ( 'menu' === $attributes['icon'] ) {
+			$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
+		}
+	}
 	$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
 	$toggle_close_button_icon    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 	$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );

package/src/navigation/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/navigation/style.scss

@@ -326,7 +326,6 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container,
 .wp-block-navigation__responsive-close,
 .wp-block-navigation__responsive-dialog,
-.wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
 .wp-block-navigation__container,
 .wp-block-navigation__responsive-container-content {
@@ -431,6 +430,16 @@ button.wp-block-navigation-item__content {
  * Mobile menu.
  */
 
+@keyframes overlay-menu__fade-in-animation {
+	from {
+		opacity: 0;
+		transform: translateY(0.5em);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -468,6 +477,11 @@ button.wp-block-navigation-item__content {
 		flex-direction: column;
 		background-color: inherit;
 
+		// Animation.
+		animation: overlay-menu__fade-in-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: var(--wp--style--root--padding-top, 2rem);
 		padding-right: var(--wp--style--root--padding-right, 2rem);
@@ -675,7 +689,8 @@ button.wp-block-navigation-item__content {
 }
 
 // Adjust open dialog top margin when admin-bar is visible.
-.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+// Needs to be scoped to .is-menu-open, or it will shift the position of any other navigations that may be present.
+.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
 	margin-top: $admin-bar-height-big;
 
 	// Handle smaller admin-bar.

package/src/navigation/test/use-navigation-menu.js

@@ -36,16 +36,16 @@ function resolveRecords( registry, menus ) {
 	dispatch.startResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: 'publish' },
+		{ per_page: -1, status: [ 'publish', 'draft' ] },
 	] );
 	dispatch.finishResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: 'publish' },
+		{ per_page: -1, status: [ 'publish', 'draft' ] },
 	] );
 	dispatch.receiveEntityRecords( 'postType', 'wp_navigation', menus, {
 		per_page: -1,
-		status: 'publish',
+		status: [ 'publish', 'draft' ],
 	} );
 }
 
@@ -161,12 +161,12 @@ describe( 'useNavigationMenus', () => {
 		} );
 	} );
 
-	it( 'Should return null for the menu when menu status is "draft"', () => {
+	it( 'Should return the menu when menu status is "draft"', () => {
 		const navigationMenuDraft = { id: 4, title: 'Menu 3', status: 'draft' };
 		const testMenus = [ ...navigationMenus, navigationMenuDraft ];
 		resolveRecords( registry, testMenus );
 		expect( useNavigationMenu( 4 ) ).toEqual( {
-			navigationMenu: null,
+			navigationMenu: navigationMenuDraft,
 			navigationMenus: testMenus,
 			canSwitchNavigationMenu: true,
 			canUserCreateNavigationMenu: false,