@wordpress/block-library 7.12.2-next.d6164808d3.0 → 7.14.0

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,17 @@
  * WordPress dependencies
  */
 import { SVG, Rect } from '@wordpress/primitives';
+import { Icon, menu, moreVertical, moreHorizontal } from '@wordpress/icons';
+
+export default function OverlayMenuIcon( { icon } ) {
+	if ( icon === 'menu' ) {
+		return <Icon icon={ menu } />;
+	} else if ( icon === 'more-vertical' ) {
+		return <Icon icon={ moreVertical } />;
+	} else if ( icon === 'more-horizontal' ) {
+		return <Icon icon={ moreHorizontal } />;
+	}
 
-export default function OverlayMenuIcon() {
 	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"

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

@@ -0,0 +1,57 @@
+/**
+ * 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" /> }
+				/>
+				<ToggleGroupControlOption
+					value="more-vertical"
+					aria-label={ __( 'more vertical' ) }
+					label={ <OverlayMenuIcon icon="more-vertical" /> }
+				/>
+				<ToggleGroupControlOption
+					value="more-horizontal"
+					aria-label={ __( 'more horizontal' ) }
+					label={ <OverlayMenuIcon icon="more-horizontal" /> }
+				/>
+			</ToggleGroupControl>
+		</>
+	);
+}

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

@@ -26,6 +26,7 @@ export default function ResponsiveWrapper( {
 	overlayBackgroundColor,
 	overlayTextColor,
 	hasIcon,
+	icon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -79,11 +80,11 @@ export default function ResponsiveWrapper( {
 			{ ! isOpen && (
 				<Button
 					aria-haspopup="true"
-					aria-label={ __( 'Open menu' ) }
+					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
-					{ hasIcon && <OverlayMenuIcon /> }
+					{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
 					{ ! hasIcon && (
 						<span className="wp-block-navigation__toggle_button_label">
 							{ __( 'Menu' ) }
@@ -104,10 +105,15 @@ export default function ResponsiveWrapper( {
 					<div { ...dialogProps }>
 						<Button
 							className="wp-block-navigation__responsive-container-close"
-							aria-label={ __( 'Close menu' ) }
+							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
 						>
-							<Icon icon={ close } />
+							{ hasIcon && <Icon icon={ close } /> }
+							{ ! hasIcon && (
+								<span className="wp-block-navigation__toggle_button_label">
+									{ __( 'Close' ) }
+								</span>
+							) }
 						</Button>
 						<div
 							className="wp-block-navigation__responsive-container-content"

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -42,7 +37,6 @@ const ALLOWED_BLOCKS = [
 ];
 
 export default function UnsavedInnerBlocks( {
-	blockProps,
 	blocks,
 	clientId,
 	hasSavedUnsavedInnerBlocks,
@@ -83,12 +77,17 @@ export default function UnsavedInnerBlocks( {
 	const isDisabled = useContext( Disabled.Context );
 	const savingLock = useRef( false );
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		renderAppender: hasSelection ? undefined : false,
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: shouldDirectInsert,
-	} );
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-navigation__container',
+		},
+		{
+			renderAppender: hasSelection ? undefined : false,
+			allowedBlocks: ALLOWED_BLOCKS,
+			__experimentalDefaultBlock: DEFAULT_BLOCK,
+			__experimentalDirectInsert: shouldDirectInsert,
+		}
+	);
 
 	const { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =
 		useSelect(
@@ -172,18 +171,9 @@ export default function UnsavedInnerBlocks( {
 	const Wrapper = isSaving ? Disabled : 'div';
 
 	return (
-		<Wrapper className="wp-block-navigation__unsaved-changes">
-			<div
-				className={ classnames(
-					'wp-block-navigation__unsaved-changes-overlay',
-					{
-						'is-saving': isSaving,
-					}
-				) }
-			>
-				<div { ...innerBlocksProps } />
-			</div>
+		<>
+			<Wrapper { ...innerBlocksProps } />
 			{ isSaving && <Spinner /> }
-		</Wrapper>
+		</>
 	);
 }

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

@@ -290,9 +290,8 @@ $color-control-label-height: 20px;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border: $border-width dashed currentColor;
-		opacity: 0.4;
 		pointer-events: none;
+		@include placeholder-style();
 
 		// Inherit border radius from style variations.
 		border-radius: inherit;
@@ -300,7 +299,6 @@ $color-control-label-height: 20px;
 
 	> svg {
 		fill: currentColor;
-		opacity: 0.4;
 	}
 }
 
@@ -568,21 +566,6 @@ body.editor-styles-wrapper
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
-.wp-block-navigation__unsaved-changes {
-	position: relative;
-
-	.components-spinner {
-		position: absolute;
-		top: calc(50% - #{$spinner-size} / 2);
-		left: calc(50% - #{$spinner-size} / 2);
-
-		// Delay showing the saving spinner until after 2 seconds.
-		// This should ensure it only shows for slow connections.
-		opacity: 0;
-		animation: 0.5s linear 2s normal forwards fadein;
-	}
-}
-
 @keyframes fadeouthalf {
 	0% {
 		opacity: 1;
@@ -592,11 +575,6 @@ body.editor-styles-wrapper
 	}
 }
 
-.wp-block-navigation__unsaved-changes-overlay.is-saving {
-	opacity: 1;
-	animation: 0.5s linear 2s normal forwards fadeouthalf;
-}
-
 .wp-block-navigation-delete-menu-button {
 	width: 100%;
 	justify-content: center;
@@ -606,6 +584,7 @@ body.editor-styles-wrapper
 .wp-block-navigation__overlay-menu-preview {
 	display: flex;
 	align-items: center;
+	justify-content: space-between;
 	width: 100%;
 	background-color: $gray-100;
 	padding: 0 $grid-unit-30;
@@ -631,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 } );