@wordpress/block-library 6.0.7 → 6.0.11

package/src/navigation/deprecated.js

@@ -21,32 +21,131 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = {
 	textTransform: 'var:preset|text-transform|',
 };
 
+const migrateIdToRef = ( { navigationMenuId, ...attributes } ) => {
+	return {
+		...attributes,
+		ref: navigationMenuId,
+	};
+};
+
 const migrateWithLayout = ( attributes ) => {
 	if ( !! attributes.layout ) {
 		return attributes;
 	}
 
-	const { itemsJustification, orientation } = attributes;
-
-	const updatedAttributes = {
-		...attributes,
-	};
+	const {
+		itemsJustification,
+		orientation,
+		...updatedAttributes
+	} = attributes;
 
 	if ( itemsJustification || orientation ) {
 		Object.assign( updatedAttributes, {
 			layout: {
 				type: 'flex',
-				justifyContent: itemsJustification || 'left',
-				orientation: orientation || 'horizontal',
+				setCascadingProperties: 'true',
+				...( itemsJustification && {
+					justifyContent: itemsJustification,
+				} ),
+				...( orientation && { orientation } ),
 			},
 		} );
-		delete updatedAttributes.itemsJustification;
-		delete updatedAttributes.orientation;
 	}
 
 	return updatedAttributes;
 };
 
+const v6 = {
+	attributes: {
+		navigationMenuId: {
+			type: 'number',
+		},
+		textColor: {
+			type: 'string',
+		},
+		customTextColor: {
+			type: 'string',
+		},
+		rgbTextColor: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		rgbBackgroundColor: {
+			type: 'string',
+		},
+		showSubmenuIcon: {
+			type: 'boolean',
+			default: true,
+		},
+		openSubmenusOnClick: {
+			type: 'boolean',
+			default: false,
+		},
+		overlayMenu: {
+			type: 'string',
+			default: 'mobile',
+		},
+		__unstableLocation: {
+			type: 'string',
+		},
+		overlayBackgroundColor: {
+			type: 'string',
+		},
+		customOverlayBackgroundColor: {
+			type: 'string',
+		},
+		overlayTextColor: {
+			type: 'string',
+		},
+		customOverlayTextColor: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+		inserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalTextTransform: true,
+			__experimentalFontFamily: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		spacing: {
+			blockGap: true,
+			units: [ 'px', 'em', 'rem', 'vh', 'vw' ],
+			__experimentalDefaultControls: {
+				blockGap: true,
+			},
+		},
+		__experimentalLayout: {
+			allowSwitching: false,
+			allowInheriting: false,
+			default: {
+				type: 'flex',
+				setCascadingProperties: true,
+			},
+		},
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+	isEligible: ( { navigationMenuId } ) => !! navigationMenuId,
+	migrate: migrateIdToRef,
+};
+
 const v5 = {
 	attributes: {
 		navigationMenuId: {
@@ -135,7 +234,7 @@ const v5 = {
 	},
 	isEligible: ( { itemsJustification, orientation } ) =>
 		!! itemsJustification || !! orientation,
-	migrate: migrateWithLayout,
+	migrate: compose( migrateIdToRef, migrateWithLayout ),
 };
 
 const v4 = {
@@ -218,7 +317,7 @@ const v4 = {
 	save() {
 		return <InnerBlocks.Content />;
 	},
-	migrate: compose( migrateWithLayout, migrateFontFamily ),
+	migrate: compose( migrateIdToRef, migrateWithLayout, migrateFontFamily ),
 	isEligible( { style } ) {
 		return style?.typography?.fontFamily;
 	},
@@ -259,6 +358,7 @@ const migrateTypographyPresets = function ( attributes ) {
 };
 
 const deprecated = [
+	v6,
 	v5,
 	v4,
 	// Remove `isResponsive` attribute.
@@ -336,6 +436,7 @@ const deprecated = [
 			return attributes.isResponsive;
 		},
 		migrate: compose(
+			migrateIdToRef,
 			migrateWithLayout,
 			migrateFontFamily,
 			migrateIsResponsive
@@ -410,6 +511,7 @@ const deprecated = [
 			return false;
 		},
 		migrate: compose(
+			migrateIdToRef,
 			migrateWithLayout,
 			migrateFontFamily,
 			migrateTypographyPresets
@@ -454,7 +556,7 @@ const deprecated = [
 			html: false,
 			inserter: true,
 		},
-		migrate( attributes ) {
+		migrate: compose( migrateIdToRef, ( attributes ) => {
 			return {
 				...omit( attributes, [ 'rgbTextColor', 'rgbBackgroundColor' ] ),
 				customTextColor: attributes.textColor
@@ -464,7 +566,7 @@ const deprecated = [
 					? undefined
 					: attributes.rgbBackgroundColor,
 			};
-		},
+		} ),
 		save() {
 			return <InnerBlocks.Content />;
 		},

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"