@wordpress/block-library 7.0.2 → 7.1.0

package/src/navigation/edit/placeholder/index.js

@@ -1,117 +1,94 @@
 /**
  * WordPress dependencies
  */
-import { Placeholder, Button, DropdownMenu } from '@wordpress/components';
+import { Placeholder, Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
+import { speak } from '@wordpress/a11y';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-
 import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
-import useNavigationMenu from '../../use-navigation-menu';
-import useCreateNavigationMenu from '../use-create-navigation-menu';
 import NavigationMenuSelector from '../navigation-menu-selector';
 
 export default function NavigationPlaceholder( {
+	isSelected,
+	currentMenuId,
 	clientId,
-	onFinish,
-	canSwitchNavigationMenu,
-	hasResolvedNavigationMenus,
 	canUserCreateNavigationMenu = false,
+	isResolvingCanUserCreateNavigationMenu,
+	onFinish,
+	onCreateEmpty,
 } ) {
-	const createNavigationMenu = useCreateNavigationMenu( clientId );
+	const { isResolvingMenus, hasResolvedMenus } = useNavigationEntities();
 
-	const onFinishMenuCreation = async (
-		blocks,
-		navigationMenuTitle = null
-	) => {
-		if ( ! canUserCreateNavigationMenu ) {
+	useEffect( () => {
+		if ( ! isSelected ) {
 			return;
 		}
 
-		const navigationMenu = await createNavigationMenu(
-			navigationMenuTitle,
-			blocks
-		);
-		onFinish( navigationMenu, blocks );
-	};
-
-	const {
-		isResolvingPages,
-		isResolvingMenus,
-		hasMenus,
-	} = useNavigationEntities();
-
-	const isStillLoading = isResolvingPages || isResolvingMenus;
-
-	const onCreateEmptyMenu = () => {
-		onFinishMenuCreation( [] );
-	};
-
-	const { navigationMenus } = useNavigationMenu();
+		if ( isResolvingMenus ) {
+			speak( __( 'Loading Navigation block setup options.' ) );
+		}
 
-	const hasNavigationMenus = !! navigationMenus?.length;
+		if ( hasResolvedMenus ) {
+			speak( __( 'Navigation block setup options ready.' ) );
+		}
+	}, [ isResolvingMenus, isSelected ] );
 
-	const showSelectMenus =
-		( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
-		( hasNavigationMenus || hasMenus );
+	const isResolvingActions =
+		isResolvingMenus && isResolvingCanUserCreateNavigationMenu;
 
 	return (
 		<>
-			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
-				<PlaceholderPreview isLoading />
-			) }
-			{ hasResolvedNavigationMenus && ! isStillLoading && (
-				<Placeholder className="wp-block-navigation-placeholder">
-					<PlaceholderPreview />
-					<div className="wp-block-navigation-placeholder__controls">
-						<div className="wp-block-navigation-placeholder__actions">
-							<div className="wp-block-navigation-placeholder__actions__indicator">
-								<Icon icon={ navigation } />{ ' ' }
-								{ __( 'Navigation' ) }
-							</div>
+			<Placeholder className="wp-block-navigation-placeholder">
+				{
+					// The <PlaceholderPreview> component is displayed conditionally via CSS depending on
+					// whether the block is selected or not. This is achieved via CSS to avoid
+					// component re-renders
+				 }
+				<PlaceholderPreview isVisible={ ! isSelected } />
+				<div
+					aria-hidden={ ! isSelected ? true : undefined }
+					className="wp-block-navigation-placeholder__controls"
+				>
+					<div className="wp-block-navigation-placeholder__actions">
+						<div className="wp-block-navigation-placeholder__actions__indicator">
+							<Icon icon={ navigation } /> { __( 'Navigation' ) }
+						</div>
 
-							<hr />
+						<hr />
 
-							{ showSelectMenus ? (
-								<>
-									<DropdownMenu
-										text={ __( 'Select menu' ) }
-										icon={ null }
-										toggleProps={ {
-											variant: 'tertiary',
-											iconPosition: 'right',
-											className:
-												'wp-block-navigation-placeholder__actions__dropdown',
-										} }
-										popoverProps={ { isAlternate: true } }
-									>
-										{ () => (
-											<NavigationMenuSelector
-												clientId={ clientId }
-												onSelect={ onFinish }
-											/>
-										) }
-									</DropdownMenu>
-									<hr />
-								</>
-							) : undefined }
+						{ isResolvingActions && <Spinner /> }
 
-							{ canUserCreateNavigationMenu && (
-								<Button
-									variant="tertiary"
-									onClick={ onCreateEmptyMenu }
-								>
-									{ __( 'Start empty' ) }
-								</Button>
-							) }
-						</div>
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							clientId={ clientId }
+							onSelect={ onFinish }
+							toggleProps={ {
+								variant: 'tertiary',
+								iconPosition: 'right',
+								className:
+									'wp-block-navigation-placeholder__actions__dropdown',
+							} }
+						/>
+
+						<hr />
+
+						{ canUserCreateNavigationMenu && (
+							<Button
+								variant="tertiary"
+								onClick={ onCreateEmpty }
+							>
+								{ __( 'Start empty' ) }
+							</Button>
+						) }
 					</div>
-				</Placeholder>
-			) }
+				</div>
+			</Placeholder>
 		</>
 	);
 }

package/src/navigation/edit/placeholder/placeholder-preview.js

@@ -1,21 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { Icon, navigation } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
-const PlaceholderPreview = ( { isLoading } ) => {
+const PlaceholderPreview = ( { isVisible = true } ) => {
 	return (
 		<div
-			className={ classnames(
-				'wp-block-navigation-placeholder__preview',
-				{ 'is-loading': isLoading }
-			) }
+			aria-hidden={ ! isVisible ? true : undefined }
+			className="wp-block-navigation-placeholder__preview"
 		>
 			<div className="wp-block-navigation-placeholder__actions__indicator">
 				<Icon icon={ navigation } />

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

@@ -72,7 +72,9 @@ export default function UnsavedInnerBlocks( {
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const createNavigationMenu = useCreateNavigationMenu( clientId );
+	const { create: createNavigationMenu } = useCreateNavigationMenu(
+		clientId
+	);
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( async () => {

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

@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useCreateNavigationMenu from './use-create-navigation-menu';
+import menuItemsToBlocks from '../menu-items-to-blocks';
+
+export const CLASSIC_MENU_CONVERSION_SUCCESS = 'success';
+export const CLASSIC_MENU_CONVERSION_ERROR = 'error';
+export const CLASSIC_MENU_CONVERSION_PENDING = 'pending';
+export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
+
+function useConvertClassicToBlockMenu( clientId ) {
+	const { create: createNavigationMenu } = useCreateNavigationMenu(
+		clientId
+	);
+	const registry = useRegistry();
+
+	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
+	const [ value, setValue ] = useState( null );
+	const [ error, setError ] = useState( null );
+
+	async function convertClassicMenuToBlockMenu( menuId, menuName ) {
+		let navigationMenu;
+		let classicMenuItems;
+
+		// 1. Fetch the classic Menu items.
+		try {
+			classicMenuItems = await registry
+				.resolveSelect( coreStore )
+				.getMenuItems( {
+					menus: menuId,
+					per_page: -1,
+					context: 'view',
+				} );
+		} catch ( err ) {
+			throw new Error(
+				sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( `Unable to fetch classic menu "%s" from API.` ),
+					menuName
+				),
+				{
+					cause: err,
+				}
+			);
+		}
+
+		// Handle offline response which resolves to `null`.
+		if ( classicMenuItems === null ) {
+			throw new Error(
+				sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( `Unable to fetch classic menu "%s" from API.` ),
+					menuName
+				)
+			);
+		}
+
+		// 2. Convert the classic items into blocks.
+		const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
+
+		// 3. Create the `wp_navigation` Post with the blocks.
+		try {
+			navigationMenu = await createNavigationMenu(
+				menuName,
+				innerBlocks
+			);
+		} catch ( err ) {
+			throw new Error(
+				sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( `Unable to create Navigation Menu "%s".` ),
+					menuName
+				),
+				{
+					cause: err,
+				}
+			);
+		}
+
+		return navigationMenu;
+	}
+
+	const convert = useCallback(
+		( menuId, menuName ) => {
+			if ( ! menuId || ! menuName ) {
+				setError( 'Unable to convert menu. Missing menu details.' );
+				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+				return;
+			}
+
+			setStatus( CLASSIC_MENU_CONVERSION_PENDING );
+			setValue( null );
+			setError( null );
+
+			convertClassicMenuToBlockMenu( menuId, menuName )
+				.then( ( navMenu ) => {
+					setValue( navMenu );
+					setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+				} )
+				.catch( ( err ) => {
+					setError( err?.message );
+					setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+
+					// Rethrow error for debugging.
+					throw new Error(
+						sprintf(
+							// translators: %s: the name of a menu (e.g. Header navigation).
+							__( `Unable to create Navigation Menu "%s".` ),
+							menuName
+						),
+						{
+							cause: err,
+						}
+					);
+				} );
+		},
+		[ clientId ]
+	);
+
+	return {
+		convert,
+		status,
+		value,
+		error,
+	};
+}
+
+export default useConvertClassicToBlockMenu;

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

@@ -4,23 +4,58 @@
 import { serialize } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useGenerateDefaultNavigationTitle from './use-generate-default-navigation-title';
 
+export const CREATE_NAVIGATION_MENU_SUCCESS = 'success';
+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 ) {
+	const [ status, setStatus ] = useState( CREATE_NAVIGATION_MENU_IDLE );
+	const [ value, setValue ] = useState( null );
+	const [ error, setError ] = useState( null );
+
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const generateDefaultTitle = useGenerateDefaultNavigationTitle( clientId );
 
 	// This callback uses data from the two placeholder steps and only creates
 	// a new navigation menu when the user completes the final step.
-	return useCallback(
+	const create = useCallback(
 		async ( title = null, blocks = [] ) => {
+			// Guard against creating Navigations without a title.
+			// Note you can pass no title, but if one is passed it must be
+			// a string otherwise the title may end up being empty.
+			if ( title && typeof title !== 'string' ) {
+				setError(
+					'Invalid title supplied when creating Navigation Menu.'
+				);
+				setStatus( CREATE_NAVIGATION_MENU_ERROR );
+				throw new Error(
+					`Value of supplied title argument was not a string.`
+				);
+			}
+
+			setStatus( CREATE_NAVIGATION_MENU_PENDING );
+			setValue( null );
+			setError( null );
+
 			if ( ! title ) {
-				title = await generateDefaultTitle();
+				title = await generateDefaultTitle().catch( ( err ) => {
+					setError( err?.message );
+					setStatus( CREATE_NAVIGATION_MENU_ERROR );
+					throw new Error(
+						'Failed to create title when saving new Navigation Menu.',
+						{
+							cause: err,
+						}
+					);
+				} );
 			}
 			const record = {
 				title,
@@ -28,12 +63,28 @@ export default function useCreateNavigationMenu( clientId ) {
 				status: 'publish',
 			};
 
-			return await saveEntityRecord(
-				'postType',
-				'wp_navigation',
-				record
-			);
+			// Return affords ability to await on this function directly
+			return saveEntityRecord( 'postType', 'wp_navigation', record )
+				.then( ( response ) => {
+					setValue( response );
+					setStatus( CREATE_NAVIGATION_MENU_SUCCESS );
+					return response;
+				} )
+				.catch( ( err ) => {
+					setError( err?.message );
+					setStatus( CREATE_NAVIGATION_MENU_ERROR );
+					throw new Error( 'Unable to save new Navigation Menu', {
+						cause: err,
+					} );
+				} );
 		},
 		[ serialize, saveEntityRecord ]
 	);
+
+	return {
+		create,
+		status,
+		value,
+		error,
+	};
 }

package/src/navigation/edit/use-navigation-notice.js

@@ -5,19 +5,19 @@ import { useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticeStore } from '@wordpress/notices';
 
-function useNavigationNotice( { name, message } = {} ) {
+function useNavigationNotice( { name, message = '' } = {} ) {
 	const noticeRef = useRef();
 
 	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
 
-	const showNotice = () => {
+	const showNotice = ( customMsg ) => {
 		if ( noticeRef.current ) {
 			return;
 		}
 
 		noticeRef.current = name;
 
-		createWarningNotice( message, {
+		createWarningNotice( customMsg || message, {
 			id: noticeRef.current,
 			type: 'snackbar',
 		} );

package/src/navigation/editor.scss

@@ -119,7 +119,6 @@
 	display: none;
 }
 
-
 /**
  * Colors Selector component
  */
@@ -262,6 +261,10 @@ $color-control-label-height: 20px;
 	}
 }
 
+.wp-block-navigation-placeholder .components-spinner {
+	margin-top: 0;
+}
+
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -558,6 +561,12 @@ body.editor-styles-wrapper
 	}
 }
 
+// Space spinner to give it breathing
+// room when block is selected and has focus outline.
+.wp-block-navigation .components-spinner {
+	padding: $grid-unit-10 $grid-unit-15;
+}
+
 .wp-block-navigation__unsaved-changes {
 	position: relative;
 
@@ -608,3 +617,16 @@ body.editor-styles-wrapper
 		background-color: $white;
 	}
 }
+
+// Temp - hide toolbar component when Nav Menu Selector is empty.
+// TODO - extract state to common hook or parent component to avoid render.
+.wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty {
+	display: none;
+}
+
+// Temp - hide adjacent <hr>s when Nav Menu Selector is empty.
+// TODO - extract state to common hook or parent component to avoid render of <hr>.
+.wp-block-navigation-placeholder__actions hr + hr {
+	display: none;
+}
+

package/src/navigation/menu-items-to-blocks.js

@@ -78,7 +78,7 @@ function mapMenuItemsToBlocks( menuItems ) {
 		// Create block with nested "innerBlocks".
 		const block = createBlock( blockType, attributes, nestedBlocks );
 
-		// Create mapping for menuItem -> block
+		// Create mapping for menuItem -> block.
 		mapping[ menuItem.id ] = block.clientId;
 
 		return block;

package/src/navigation/test/menu-items-to-blocks.js

@@ -320,7 +320,7 @@ describe( 'converting menu items to blocks', () => {
 				type_label: 'Custom Link',
 				object: 'custom',
 				parent: 0,
-				menu_order: 0, // capturing 0 edge case.
+				menu_order: 0, // Capturing 0 edge case.
 				target: '',
 				classes: [ '' ],
 				xfn: [ '' ],

package/src/navigation/use-navigation-entities.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseEntityRecords as useEntityRecords,
+} from '@wordpress/core-data';
 
 /**
  * @typedef {Object} NavigationEntitiesData
@@ -34,31 +37,17 @@ export default function useNavigationEntities( menuId ) {
 }
 
 function useMenuEntities() {
-	const { menus, isResolvingMenus, hasResolvedMenus } = useSelect(
-		( select ) => {
-			const { getMenus, isResolving, hasFinishedResolution } = select(
-				coreStore
-			);
-
-			const menusParameters = [ { per_page: -1, context: 'view' } ];
-
-			return {
-				menus: getMenus( ...menusParameters ),
-				isResolvingMenus: isResolving( 'getMenus', menusParameters ),
-				hasResolvedMenus: hasFinishedResolution(
-					'getMenus',
-					menusParameters
-				),
-			};
-		},
-		[]
+	const { records, isResolving, hasResolved } = useEntityRecords(
+		'root',
+		'menu',
+		{ per_page: -1, context: 'view' }
 	);
 
 	return {
-		menus,
-		isResolvingMenus,
-		hasResolvedMenus,
-		hasMenus: !! ( hasResolvedMenus && menus?.length ),
+		menus: records,
+		isResolvingMenus: isResolving,
+		hasResolvedMenus: hasResolved,
+		hasMenus: !! ( hasResolved && records?.length ),
 	};
 }
 
@@ -100,45 +89,22 @@ function useMenuItemEntities( menuId ) {
 }
 
 function usePageEntities() {
-	const { pages, isResolvingPages, hasResolvedPages } = useSelect(
-		( select ) => {
-			const {
-				getEntityRecords,
-				isResolving,
-				hasFinishedResolution,
-			} = select( coreStore );
-
-			const pagesParameters = [
-				'postType',
-				'page',
-				{
-					parent: 0,
-					order: 'asc',
-					orderby: 'id',
-					per_page: -1,
-					context: 'view',
-				},
-			];
-
-			return {
-				pages: getEntityRecords( ...pagesParameters ) || null,
-				isResolvingPages: isResolving(
-					'getEntityRecords',
-					pagesParameters
-				),
-				hasResolvedPages: hasFinishedResolution(
-					'getEntityRecords',
-					pagesParameters
-				),
-			};
-		},
-		[]
+	const { records, isResolving, hasResolved } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			parent: 0,
+			order: 'asc',
+			orderby: 'id',
+			per_page: -1,
+			context: 'view',
+		}
 	);
 
 	return {
-		pages,
-		isResolvingPages,
-		hasResolvedPages,
-		hasPages: !! ( hasResolvedPages && pages?.length ),
+		pages: records,
+		isResolvingPages: isResolving,
+		hasResolvedPages: hasResolved,
+		hasPages: !! ( hasResolved && records?.length ),
 	};
 }

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

@@ -12,6 +12,7 @@ export default function useNavigationMenu( ref ) {
 				getEditedEntityRecord,
 				getEntityRecords,
 				hasFinishedResolution,
+				isResolving,
 				canUser,
 			} = select( coreStore );
 
@@ -80,6 +81,10 @@ export default function useNavigationMenu( ref ) {
 					[ 'delete', 'navigation', ref ]
 				),
 				canUserCreateNavigationMenu: canUser( 'create', 'navigation' ),
+				isResolvingCanUserCreateNavigationMenu: isResolving(
+					'canUser',
+					[ 'create', 'navigation' ]
+				),
 				hasResolvedCanUserCreateNavigationMenu: hasFinishedResolution(
 					'canUser',
 					[ 'create', 'navigation' ]

package/src/navigation-link/fallback-variations.js

@@ -12,7 +12,7 @@ import {
 // FALLBACK: this is only used when the server does not understand the variations property in the
 // register_block_type call. see navigation-link/index.php.
 // Delete this file when supported WP ranges understand the `variations` property when passed to
-// register_block_type in index.php
+// register_block_type in index.php.
 const fallbackVariations = [
 	{
 		name: 'link',