@wordpress/block-library 6.0.6 → 6.0.10

package/src/navigation/edit/index.js

@@ -34,6 +34,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToolbarGroup,
 	ToolbarDropdownMenu,
+	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -48,7 +49,6 @@ import ResponsiveWrapper from './responsive-wrapper';
 import NavigationInnerBlocks from './inner-blocks';
 import NavigationMenuSelector from './navigation-menu-selector';
 import NavigationMenuNameControl from './navigation-menu-name-control';
-import NavigationMenuPublishButton from './navigation-menu-publish-button';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 
@@ -118,13 +118,11 @@ function Navigation( {
 
 	const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu;
 
-	const navigationMenuId = navigationArea
-		? navigationAreaMenu
-		: attributes.navigationMenuId;
+	const ref = navigationArea ? navigationAreaMenu : attributes.ref;
 
-	const setNavigationMenuId = useCallback(
+	const setRef = useCallback(
 		( postId ) => {
-			setAttributes( { navigationMenuId: postId } );
+			setAttributes( { ref: postId } );
 			if ( navigationArea ) {
 				setAreaMenu( postId );
 			}
@@ -133,7 +131,7 @@ function Navigation( {
 	);
 
 	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		`navigationMenu/${ navigationMenuId }`
+		`navigationMenu/${ ref }`
 	);
 
 	const { innerBlocks, isInnerBlockSelected } = useSelect(
@@ -160,7 +158,7 @@ function Navigation( {
 		setHasSavedUnsavedInnerBlocks,
 	] = useState( false );
 
-	const isWithinUnassignedArea = navigationArea && ! navigationMenuId;
+	const isWithinUnassignedArea = navigationArea && ! ref;
 
 	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
 		! hasExistingNavItems || isWithinUnassignedArea
@@ -177,7 +175,7 @@ function Navigation( {
 		hasResolvedNavigationMenus,
 		navigationMenus,
 		navigationMenu,
-	} = useNavigationMenu( navigationMenuId );
+	} = useNavigationMenu( ref );
 
 	const navRef = useRef();
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
@@ -212,6 +210,29 @@ function Navigation( {
 		},
 	} );
 
+	const overlayClassnames = classnames( {
+		'has-text-color':
+			!! overlayTextColor.color || !! overlayTextColor?.class,
+		[ getColorClassName(
+			'color',
+			overlayTextColor?.slug
+		) ]: !! overlayTextColor?.slug,
+		'has-background':
+			!! overlayBackgroundColor.color || overlayBackgroundColor?.class,
+		[ getColorClassName(
+			'background-color',
+			overlayBackgroundColor?.slug
+		) ]: !! overlayBackgroundColor?.slug,
+	} );
+
+	const overlayStyles = {
+		color: ! overlayTextColor?.slug && overlayTextColor?.color,
+		backgroundColor:
+			! overlayBackgroundColor?.slug &&
+			overlayBackgroundColor?.color &&
+			overlayBackgroundColor.color,
+	};
+
 	// Turn on contrast checker for web only since it's not supported on mobile yet.
 	const enableContrastChecking = Platform.OS === 'web';
 
@@ -258,6 +279,27 @@ function Navigation( {
 		setIsPlaceholderShown( ! isEntityAvailable );
 	}, [ isEntityAvailable ] );
 
+	// If the ref no longer exists the reset the inner blocks
+	// to provide a clean slate.
+	useEffect( () => {
+		if ( ref === undefined && innerBlocks.length > 0 ) {
+			replaceInnerBlocks( clientId, [] );
+		}
+		// innerBlocks are intentionally not listed as deps. This function is only concerned
+		// with the snapshot from the time when ref became undefined.
+	}, [ clientId, ref, innerBlocks ] );
+
+	const startWithEmptyMenu = useCallback( () => {
+		if ( navigationArea ) {
+			setAreaMenu( 0 );
+		}
+		setAttributes( {
+			ref: undefined,
+		} );
+
+		setIsPlaceholderShown( true );
+	}, [ clientId ] );
+
 	// If the block has inner blocks, but no menu id, this was an older
 	// navigation block added before the block used a wp_navigation entity.
 	// Either this block was saved in the content or inserted by a pattern.
@@ -277,7 +319,7 @@ function Navigation( {
 				onSave={ ( post ) => {
 					setHasSavedUnsavedInnerBlocks( true );
 					// Switch to using the wp_navigation entity.
-					setNavigationMenuId( post.id );
+					setRef( post.id );
 				} }
 			/>
 		);
@@ -285,13 +327,16 @@ function Navigation( {
 
 	// Show a warning if the selected menu is no longer available.
 	// TODO - the user should be able to select a new one?
-	if ( navigationMenuId && isNavigationMenuMissing ) {
+	if ( ref && isNavigationMenuMissing ) {
 		return (
 			<div { ...blockProps }>
 				<Warning>
 					{ __(
-						'Navigation menu has been deleted or is unavailable'
+						'Navigation menu has been deleted or is unavailable. '
 					) }
+					<Button onClick={ startWithEmptyMenu } variant="link">
+						{ __( 'Create a new menu?' ) }
+					</Button>
 				</Warning>
 			</div>
 		);
@@ -312,11 +357,7 @@ function Navigation( {
 		: Placeholder;
 
 	return (
-		<EntityProvider
-			kind="postType"
-			type="wp_navigation"
-			id={ navigationMenuId }
-		>
+		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider>
 				<BlockControls>
 					{ ! isDraftNavigationMenu && isEntityAvailable && (
@@ -329,29 +370,16 @@ function Navigation( {
 								{ ( { onClose } ) => (
 									<NavigationMenuSelector
 										onSelect={ ( { id } ) => {
-											setNavigationMenuId( id );
+											setRef( id );
 											onClose();
 										} }
-										onCreateNew={ () => {
-											if ( navigationArea ) {
-												setAreaMenu( 0 );
-											}
-											setAttributes( {
-												navigationMenuId: undefined,
-											} );
-											setIsPlaceholderShown( true );
-										} }
+										onCreateNew={ startWithEmptyMenu }
 									/>
 								) }
 							</ToolbarDropdownMenu>
 						</ToolbarGroup>
 					) }
 					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
-					{ isDraftNavigationMenu && (
-						<ToolbarGroup>
-							<NavigationMenuPublishButton />
-						</ToolbarGroup>
-					) }
 				</BlockControls>
 				{ listViewModal }
 				<InspectorControls>
@@ -458,12 +486,11 @@ function Navigation( {
 						<NavigationMenuNameControl />
 						<NavigationMenuDeleteControl
 							onDelete={ () => {
-								replaceInnerBlocks( clientId, [] );
 								if ( navigationArea ) {
 									setAreaMenu( 0 );
 								}
 								setAttributes( {
-									navigationMenuId: undefined,
+									ref: undefined,
 								} );
 								setIsPlaceholderShown( true );
 							} }
@@ -471,17 +498,20 @@ function Navigation( {
 					</InspectorControls>
 				) }
 				<nav { ...blockProps }>
-					{ ! isEntityAvailable && isPlaceholderShown && (
+					{ isPlaceholderShown && (
 						<PlaceholderComponent
 							onFinish={ ( post ) => {
 								setIsPlaceholderShown( false );
-								setNavigationMenuId( post.id );
+								if ( post ) {
+									setRef( post.id );
+								}
 								selectBlock( clientId );
 							} }
 							canSwitchNavigationMenu={ canSwitchNavigationMenu }
 							hasResolvedNavigationMenus={
 								hasResolvedNavigationMenus
 							}
+							clientId={ clientId }
 						/>
 					) }
 					{ ! isEntityAvailable && ! isPlaceholderShown && (
@@ -494,6 +524,8 @@ function Navigation( {
 							isOpen={ isResponsiveMenuOpen }
 							isResponsive={ 'never' !== overlayMenu }
 							isHiddenByDefault={ 'always' === overlayMenu }
+							classNames={ overlayClassnames }
+							styles={ overlayStyles }
 						>
 							{ isEntityAvailable && (
 								<NavigationInnerBlocks

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

@@ -81,7 +81,8 @@ export default function NavigationInnerBlocks( {
 			blocks.every(
 				( { name } ) =>
 					name === 'core/navigation-link' ||
-					name === 'core/navigation-submenu'
+					name === 'core/navigation-submenu' ||
+					name === 'core/page-list'
 			),
 		[ blocks ]
 	);

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

@@ -13,13 +13,13 @@ import useNavigationMenu from '../use-navigation-menu';
 
 export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
 	const { navigationMenus } = useNavigationMenu();
-	const navigationMenuId = useEntityId( 'postType', 'wp_navigation' );
+	const ref = useEntityId( 'postType', 'wp_navigation' );
 
 	return (
 		<>
 			<MenuGroup>
 				<MenuItemsChoice
-					value={ navigationMenuId }
+					value={ ref }
 					onSelect={ ( selectedId ) =>
 						onSelect(
 							navigationMenus.find(

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { serialize, createBlock } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import {
 	Placeholder,
 	Button,
@@ -9,8 +9,6 @@ import {
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
 import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
@@ -23,8 +21,8 @@ import { decodeEntities } from '@wordpress/html-entities';
 import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
 import menuItemsToBlocks from '../../menu-items-to-blocks';
-import NavigationMenuNameModal from '../navigation-menu-name-modal';
 import useNavigationMenu from '../../use-navigation-menu';
+import useCreateNavigationMenu from '../use-create-navigation-menu';
 
 const ExistingMenusDropdown = ( {
 	canSwitchNavigationMenu,
@@ -90,51 +88,25 @@ const ExistingMenusDropdown = ( {
 };
 
 export default function NavigationPlaceholder( {
+	clientId,
 	onFinish,
 	canSwitchNavigationMenu,
 	hasResolvedNavigationMenus,
 } ) {
 	const [ selectedMenu, setSelectedMenu ] = useState();
-
 	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-
 	const [ menuName, setMenuName ] = useState( '' );
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
-	const [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState(
-		false
-	);
-
-	const [ createEmpty, setCreateEmpty ] = useState( false );
-
-	const { saveEntityRecord } = useDispatch( coreStore );
-
-	// This callback uses data from the two placeholder steps and only creates
-	// a new navigation menu when the user completes the final step.
-	const createNavigationMenu = useCallback(
-		async ( title = __( 'Untitled Navigation Menu' ), blocks = [] ) => {
-			const record = {
-				title,
-				content: serialize( blocks ),
-				status: 'publish',
-			};
-
-			const navigationMenu = await saveEntityRecord(
-				'postType',
-				'wp_navigation',
-				record
-			);
-
-			return navigationMenu;
-		},
-		[ serialize, saveEntityRecord ]
-	);
-
-	const onFinishMenuCreation = async ( navigationMenuTitle, blocks ) => {
+	const onFinishMenuCreation = async (
+		blocks,
+		navigationMenuTitle = null
+	) => {
 		const navigationMenu = await createNavigationMenu(
 			navigationMenuTitle,
 			blocks
 		);
-		onFinish( navigationMenu );
+		onFinish( navigationMenu, blocks );
 	};
 
 	const {
@@ -152,7 +124,7 @@ export default function NavigationPlaceholder( {
 	const createFromMenu = useCallback(
 		( name ) => {
 			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-			onFinishMenuCreation( name, blocks );
+			onFinishMenuCreation( blocks, name );
 		},
 		[ menuItems, menuItemsToBlocks, onFinish ]
 	);
@@ -170,14 +142,13 @@ export default function NavigationPlaceholder( {
 		setMenuName( name );
 	};
 
-	const onCreateEmptyMenu = ( name ) => {
-		onFinishMenuCreation( name, [] );
+	const onCreateEmptyMenu = () => {
+		onFinishMenuCreation( [] );
 	};
 
-	const onCreateAllPages = ( name ) => {
+	const onCreateAllPages = () => {
 		const block = [ createBlock( 'core/page-list' ) ];
-		onFinishMenuCreation( name, block );
-		setIsNewMenuModalVisible( true );
+		onFinishMenuCreation( block );
 	};
 
 	useEffect( () => {
@@ -225,10 +196,7 @@ export default function NavigationPlaceholder( {
 								<>
 									<Button
 										variant="tertiary"
-										onClick={ () => {
-											setIsNewMenuModalVisible( true );
-											setCreateEmpty( false );
-										} }
+										onClick={ onCreateAllPages }
 									>
 										{ __( 'Add all pages' ) }
 									</Button>
@@ -237,10 +205,7 @@ export default function NavigationPlaceholder( {
 							) : undefined }
 							<Button
 								variant="tertiary"
-								onClick={ () => {
-									setIsNewMenuModalVisible( true );
-									setCreateEmpty( true );
-								} }
+								onClick={ onCreateEmptyMenu }
 							>
 								{ __( 'Start empty' ) }
 							</Button>
@@ -248,17 +213,6 @@ export default function NavigationPlaceholder( {
 					</div>
 				</Placeholder>
 			) }
-			{ isNewMenuModalVisible && (
-				<NavigationMenuNameModal
-					title={ __( 'Create your new navigation menu' ) }
-					onRequestClose={ () => {
-						setIsNewMenuModalVisible( false );
-					} }
-					onFinish={
-						createEmpty ? onCreateEmptyMenu : onCreateAllPages
-					}
-				/>
-			) }
 		</>
 	);
 }

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

@@ -18,12 +18,15 @@ export default function ResponsiveWrapper( {
 	isResponsive,
 	onToggle,
 	isHiddenByDefault,
+	classNames,
+	styles,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
 	}
 	const responsiveContainerClasses = classnames(
 		'wp-block-navigation__responsive-container',
+		classNames,
 		{
 			'is-menu-open': isOpen,
 			'hidden-by-default': isHiddenByDefault,
@@ -61,7 +64,11 @@ export default function ResponsiveWrapper( {
 				</Button>
 			) }
 
-			<div className={ responsiveContainerClasses } id={ modalId }>
+			<div
+				className={ responsiveContainerClasses }
+				style={ styles }
+				id={ modalId }
+			>
 				<div
 					className="wp-block-navigation__responsive-close"
 					tabIndex="-1"

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

@@ -7,18 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useInnerBlocksProps } from '@wordpress/block-editor';
-import { serialize } from '@wordpress/blocks';
 import { Disabled, Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useContext, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
-import useTemplatePartAreaLabel from '../use-template-part-area-label';
+import useCreateNavigationMenu from './use-create-navigation-menu';
 
 const NOOP = () => {};
 const EMPTY_OBJECT = {};
@@ -51,7 +49,6 @@ export default function UnsavedInnerBlocks( {
 		onChange: NOOP,
 		onInput: NOOP,
 	} );
-	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const {
 		isSaving,
@@ -83,29 +80,7 @@ export default function UnsavedInnerBlocks( {
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const createNavigationMenu = useCallback(
-		async ( title ) => {
-			const record = {
-				title,
-				content: serialize( blocks ),
-				status: 'draft',
-			};
-
-			const navigationMenu = await saveEntityRecord(
-				'postType',
-				'wp_navigation',
-				record
-			);
-
-			return navigationMenu;
-		},
-		[ blocks, serialize, saveEntityRecord ]
-	);
-
-	// Because we can't conditionally call hooks, pass an undefined client id
-	// arg to bypass the expensive `useTemplateArea` code. The hook will return
-	// early.
-	const area = useTemplatePartAreaLabel( isDisabled ? undefined : clientId );
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( async () => {
@@ -134,33 +109,7 @@ export default function UnsavedInnerBlocks( {
 		}
 
 		savingLock.current = true;
-		const title = area
-			? sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( '%s navigation' ),
-					area
-			  )
-			: // translators: 'navigation' as in website navigation.
-			  __( 'Navigation' );
-
-		// Determine how many menus start with the automatic title.
-		const matchingMenuTitleCount = [
-			...draftNavigationMenus,
-			...navigationMenus,
-		].reduce(
-			( count, menu ) =>
-				menu?.title?.raw?.startsWith( title ) ? count + 1 : count,
-			0
-		);
-
-		// Append a number to the end of the title if a menu with
-		// the same name exists.
-		const titleWithCount =
-			matchingMenuTitleCount > 0
-				? `${ title } ${ matchingMenuTitleCount + 1 }`
-				: title;
-
-		const menu = await createNavigationMenu( titleWithCount );
+		const menu = await createNavigationMenu( null, blocks );
 		onSave( menu );
 		savingLock.current = false;
 	}, [
@@ -172,7 +121,7 @@ export default function UnsavedInnerBlocks( {
 		navigationMenus,
 		hasSelection,
 		createNavigationMenu,
-		area,
+		blocks,
 	] );
 
 	return (

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { serialize } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useGenerateDefaultNavigationTitle from './use-generate-default-navigation-title';
+
+export default function useCreateNavigationMenu( clientId ) {
+	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(
+		async ( title = null, blocks = [] ) => {
+			if ( ! title ) {
+				title = await generateDefaultTitle();
+			}
+			const record = {
+				title,
+				content: serialize( blocks ),
+				status: 'publish',
+			};
+
+			return await saveEntityRecord(
+				'postType',
+				'wp_navigation',
+				record
+			);
+		},
+		[ serialize, saveEntityRecord ]
+	);
+}

package/src/navigation/edit/use-generate-default-navigation-title.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useRegistry } from '@wordpress/data';
+import { useContext, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useTemplatePartAreaLabel from '../use-template-part-area-label';
+
+const DRAFT_MENU_PARAMS = [
+	'postType',
+	'wp_navigation',
+	{ status: 'draft', per_page: -1 },
+];
+
+const PUBLISHED_MENU_PARAMS = [
+	'postType',
+	'wp_navigation',
+	{ per_page: -1, status: 'publish' },
+];
+
+export default function useGenerateDefaultNavigationTitle( clientId ) {
+	// The block will be disabled in a block preview, use this as a way of
+	// avoiding the side-effects of this component for block previews.
+	const isDisabled = useContext( Disabled.Context );
+
+	// Because we can't conditionally call hooks, pass an undefined client id
+	// arg to bypass the expensive `useTemplateArea` code. The hook will return
+	// early.
+	const area = useTemplatePartAreaLabel( isDisabled ? undefined : clientId );
+
+	const registry = useRegistry();
+	return useCallback( async () => {
+		// Ensure other navigation menus have loaded so an
+		// accurate name can be created.
+		if ( isDisabled ) {
+			return '';
+		}
+		const { getEntityRecords } = registry.resolveSelect( coreStore );
+
+		const [ draftNavigationMenus, navigationMenus ] = await Promise.all( [
+			getEntityRecords( ...DRAFT_MENU_PARAMS ),
+			getEntityRecords( ...PUBLISHED_MENU_PARAMS ),
+		] );
+
+		const title = area
+			? sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( '%s navigation' ),
+					area
+			  )
+			: // translators: 'navigation' as in website navigation.
+			  __( 'Navigation' );
+
+		// Determine how many menus start with the automatic title.
+		const matchingMenuTitleCount = [
+			...draftNavigationMenus,
+			...navigationMenus,
+		].reduce(
+			( count, menu ) =>
+				menu?.title?.raw?.startsWith( title ) ? count + 1 : count,
+			0
+		);
+
+		// Append a number to the end of the title if a menu with
+		// the same name exists.
+		const titleWithCount =
+			matchingMenuTitleCount > 0
+				? `${ title } ${ matchingMenuTitleCount + 1 }`
+				: title;
+
+		return titleWithCount || '';
+	}, [ isDisabled, area ] );
+}