@wordpress/block-library 8.4.0 → 8.5.0

package/src/list-item/edit.js

@@ -88,9 +88,16 @@ export default function ListItemEdit( {
 					placeholder={ placeholder || __( 'List' ) }
 					onSplit={ onSplit }
 					onMerge={ onMerge }
-					onReplace={ ( blocks, ...args ) => {
-						onReplace( convertToListItems( blocks ), ...args );
-					} }
+					onReplace={
+						onReplace
+							? ( blocks, ...args ) => {
+									onReplace(
+										convertToListItems( blocks ),
+										...args
+									);
+							  }
+							: undefined
+					}
 				/>
 				{ innerBlocksProps.children }
 			</li>

package/src/list-item/hooks/use-outdent-list-item.js

@@ -112,7 +112,8 @@ export default function useOutdentListItem( clientId ) {
 					getBlockIndex( parentListItemId ) + 1
 				);
 				if ( ! getBlockOrder( parentListId ).length ) {
-					removeBlock( parentListId );
+					const shouldSelectParent = false;
+					removeBlock( parentListId, shouldSelectParent );
 				}
 			} );
 		}, [] ),

package/src/loginout/edit.js

@@ -13,6 +13,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display login as form' ) }
 						checked={ displayLoginAsForm }
 						onChange={ () =>
@@ -22,6 +23,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Redirect to current URL' ) }
 						checked={ redirectToCurrent }
 						onChange={ () =>

package/src/media-text/edit.js

@@ -243,6 +243,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const mediaTextGeneralSettings = (
 		<PanelBody title={ __( 'Settings' ) }>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Stack on mobile' ) }
 				checked={ isStackedOnMobile }
 				onChange={ () =>
@@ -253,6 +254,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			/>
 			{ mediaType === 'image' && (
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Crop image to fill entire column' ) }
 					checked={ imageFill }
 					onChange={ () =>

package/src/missing/test/__snapshots__/edit.native.js.snap

@@ -6,7 +6,7 @@ exports[`Missing block renders without crashing 1`] = `
   accessibilityLabel="Help button"
   accessibilityRole="button"
   accessibilityState={
-    Object {
+    {
       "disabled": true,
     }
   }

package/src/more/edit.js

@@ -43,6 +43,7 @@ export default function MoreEdit( {
 			<InspectorControls>
 				<PanelBody>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __(
 							'Hide the excerpt on the full content page'
 						) }

package/src/navigation/edit/index.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
+	useCallback,
 	useState,
 	useEffect,
 	useRef,
@@ -40,7 +41,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 import { close, Icon } from '@wordpress/icons';
 
 /**
@@ -148,34 +149,6 @@ function Navigation( {
 		createNavigationMenu( '' );
 	};
 
-	useEffect( () => {
-		hideNavigationMenuStatusNotice();
-
-		if ( isCreatingNavigationMenu ) {
-			speak( __( `Creating Navigation Menu.` ) );
-		}
-
-		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
-				focusNavigationBlock: true,
-			} );
-
-			showNavigationMenuStatusNotice(
-				__( `Navigation Menu successfully created.` )
-			);
-		}
-
-		if ( createNavigationMenuIsError ) {
-			showNavigationMenuStatusNotice(
-				__( 'Failed to create Navigation Menu.' )
-			);
-		}
-	}, [
-		createNavigationMenuStatus,
-		createNavigationMenuError,
-		createNavigationMenuPost,
-	] );
-
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
@@ -237,6 +210,40 @@ function Navigation( {
 		[ navigationMenus ]
 	);
 
+	// This useEffect adds snackbar and speak status notices when menus are created.
+	// If there are no fallback navigation menus then we don't show these messages,
+	// because this means that we are creating the first, fallback navigation menu.
+	useEffect( () => {
+		hideNavigationMenuStatusNotice();
+
+		if ( fallbackNavigationMenus && isCreatingNavigationMenu ) {
+			speak( __( `Creating Navigation Menu.` ) );
+		}
+
+		if ( createNavigationMenuIsSuccess ) {
+			handleUpdateMenu( createNavigationMenuPost.id, {
+				focusNavigationBlock: true,
+			} );
+
+			if ( fallbackNavigationMenus ) {
+				showNavigationMenuStatusNotice(
+					__( `Navigation Menu successfully created.` )
+				);
+			}
+		}
+
+		if ( createNavigationMenuIsError ) {
+			showNavigationMenuStatusNotice(
+				__( 'Failed to create Navigation Menu.' )
+			);
+		}
+	}, [
+		createNavigationMenuStatus,
+		createNavigationMenuError,
+		createNavigationMenuPost,
+		fallbackNavigationMenus,
+	] );
+
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
 	// - the are uncontrolled inner blocks already present in the block.
 	// - the user is creating a new menu.
@@ -270,12 +277,24 @@ function Navigation( {
 		hasUncontrolledInnerBlocks,
 	] );
 
+	const isEntityAvailable =
+		! isNavigationMenuMissing && isNavigationMenuResolved;
+
+	// If the block has inner blocks, but no menu id, then these blocks are either:
+	// - inserted via a pattern.
+	// - inserted directly via Code View (or otherwise).
+	// - from an older version of navigation block added before the block used a wp_navigation entity.
+	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
+	// that automatically saves the menu as an entity when changes are made to the inner blocks.
+	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
+
 	useEffect( () => {
 		if (
+			ref ||
 			! hasResolvedNavigationMenus ||
 			isConvertingClassicMenu ||
 			fallbackNavigationMenus?.length > 0 ||
-			! classicMenus?.length
+			hasUnsavedBlocks
 		) {
 			return;
 		}
@@ -284,29 +303,46 @@ function Navigation( {
 		// a classic menu with a `primary` location or slug,
 		// then create a new navigation menu based on it.
 		// Otherwise, use the most recently created classic menu.
-		const primaryMenus = classicMenus.filter(
-			( classicMenu ) =>
-				classicMenu.locations.includes( 'primary' ) ||
-				classicMenu.slug === 'primary'
-		);
-
-		if ( primaryMenus.length ) {
-			convertClassicMenu(
-				primaryMenus[ 0 ].id,
-				primaryMenus[ 0 ].name,
-				'publish'
+		if ( classicMenus?.length ) {
+			const primaryMenus = classicMenus.filter(
+				( classicMenu ) =>
+					classicMenu.locations.includes( 'primary' ) ||
+					classicMenu.slug === 'primary'
 			);
+
+			if ( primaryMenus.length ) {
+				convertClassicMenu(
+					primaryMenus[ 0 ].id,
+					primaryMenus[ 0 ].name,
+					'publish'
+				);
+			} else {
+				classicMenus.sort( ( a, b ) => {
+					return b.id - a.id;
+				} );
+				convertClassicMenu(
+					classicMenus[ 0 ].id,
+					classicMenus[ 0 ].name,
+					'publish'
+				);
+			}
 		} else {
-			classicMenus.sort( ( a, b ) => {
-				return b.id - a.id;
-			} );
-			convertClassicMenu(
-				classicMenus[ 0 ].id,
-				classicMenus[ 0 ].name,
+			// If there are no fallback navigation menus and no classic menus,
+			// then create a new navigation menu.
+
+			// Check that we have a page-list block type.
+			let defaultBlocks = [];
+			if ( getBlockType( 'core/page-list' ) ) {
+				defaultBlocks = [ createBlock( 'core/page-list' ) ];
+			}
+
+			createNavigationMenu(
+				'Navigation', // TODO - use the template slug in future
+				defaultBlocks,
 				'publish'
 			);
 		}
-	}, [ hasResolvedNavigationMenus ] );
+	}, [ hasResolvedNavigationMenus, hasUnsavedBlocks ] );
 
 	const navRef = useRef();
 
@@ -326,22 +362,6 @@ function Navigation( {
 		classicMenus?.length === 0 &&
 		! hasUncontrolledInnerBlocks;
 
-	useEffect( () => {
-		if ( isPlaceholder ) {
-			/**
-			 *  this fallback only displays (both in editor and on front)
-			 *  the list of pages block if no menu is available as a fallback.
-			 *  We don't want the fallback to request a save,
-			 *  nor to be undoable, hence we mark it non persistent.
-			 */
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
-		}
-	}, [ clientId, isPlaceholder, ref ] );
-
-	const isEntityAvailable =
-		! isNavigationMenuMissing && isNavigationMenuResolved;
-
 	// "loading" state:
 	// - there is a menu creation process in progress.
 	// - there is a classic menu conversion process in progress.
@@ -393,16 +413,16 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
-	const handleUpdateMenu = (
-		menuId,
-		options = { focusNavigationBlock: false }
-	) => {
-		const { focusNavigationBlock } = options;
-		setRef( menuId );
-		if ( focusNavigationBlock ) {
-			selectBlock( clientId );
-		}
-	};
+	const handleUpdateMenu = useCallback(
+		( menuId, options = { focusNavigationBlock: false } ) => {
+			const { focusNavigationBlock } = options;
+			setRef( menuId );
+			if ( focusNavigationBlock ) {
+				selectBlock( clientId );
+			}
+		},
+		[ selectBlock, clientId ]
+	);
 
 	const onSelectClassicMenu = async ( classicMenu ) => {
 		const navMenu = await convertClassicMenu(
@@ -421,6 +441,40 @@ function Navigation( {
 		handleUpdateMenu( menuId );
 	};
 
+	useEffect( () => {
+		hideNavigationMenuStatusNotice();
+
+		if ( isCreatingNavigationMenu ) {
+			speak( __( `Creating Navigation Menu.` ) );
+		}
+
+		if ( createNavigationMenuIsSuccess ) {
+			handleUpdateMenu( createNavigationMenuPost.id, {
+				focusNavigationBlock: true,
+			} );
+
+			showNavigationMenuStatusNotice(
+				__( `Navigation Menu successfully created.` )
+			);
+		}
+
+		if ( createNavigationMenuIsError ) {
+			showNavigationMenuStatusNotice(
+				__( 'Failed to create Navigation Menu.' )
+			);
+		}
+	}, [
+		createNavigationMenuStatus,
+		createNavigationMenuError,
+		createNavigationMenuPost,
+		createNavigationMenuIsError,
+		createNavigationMenuIsSuccess,
+		isCreatingNavigationMenu,
+		handleUpdateMenu,
+		hideNavigationMenuStatusNotice,
+		showNavigationMenuStatusNotice,
+	] );
+
 	useEffect( () => {
 		hideClassicMenuConversionNotice();
 		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING ) {
@@ -598,6 +652,7 @@ function Navigation( {
 							<>
 								<h3>{ __( 'Submenus' ) }</h3>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ openSubmenusOnClick }
 									onChange={ ( value ) => {
 										setAttributes( {
@@ -611,6 +666,7 @@ function Navigation( {
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ showSubmenuIcon }
 									onChange={ ( value ) => {
 										setAttributes( {
@@ -682,14 +738,6 @@ function Navigation( {
 		</>
 	);
 
-	// If the block has inner blocks, but no menu id, then these blocks are either:
-	// - inserted via a pattern.
-	// - inserted directly via Code View (or otherwise).
-	// - from an older version of navigation block added before the block used a wp_navigation entity.
-	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
-	// that automatically saves the menu as an entity when changes are made to the inner blocks.
-	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
-
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 

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

@@ -65,7 +65,7 @@ function NavigationMenuSelector( {
 				};
 			} ) || []
 		);
-	}, [ currentMenuId, navigationMenus, actionLabel ] );
+	}, [ currentMenuId, navigationMenus, actionLabel, isCreatingMenu ] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;

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

@@ -17,6 +17,7 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Show icon button' ) }
 				help={ __(
 					'Configure the visual appearance of the button opening the overlay menu.'

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

@@ -38,7 +38,7 @@ export default function NavigationPlaceholder( {
 		if ( hasResolvedMenus ) {
 			speak( __( 'Navigation block setup options ready.' ) );
 		}
-	}, [ isResolvingMenus, isSelected ] );
+	}, [ hasResolvedMenus, isResolvingMenus, isSelected ] );
 
 	const isResolvingActions =
 		isResolvingMenus && isResolvingCanUserCreateNavigationMenu;

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

@@ -146,6 +146,7 @@ export default function UnsavedInnerBlocks( {
 
 		createNavigationMenu( null, blocks );
 	}, [
+		createNavigationMenu,
 		isDisabled,
 		isSaving,
 		hasResolvedDraftNavigationMenus,

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

@@ -120,56 +120,59 @@ function useConvertClassicToBlockMenu( clientId ) {
 		return navigationMenu;
 	}
 
-	const convert = useCallback( async ( menuId, menuName, postStatus ) => {
-		// Check whether this classic menu is being imported already.
-		if ( classicMenuBeingConvertedId === menuId ) {
-			return;
-		}
-
-		// Set the ID for the currently importing classic menu.
-		classicMenuBeingConvertedId = menuId;
-
-		if ( ! menuId || ! menuName ) {
-			setError( 'Unable to convert menu. Missing menu details.' );
-			setStatus( CLASSIC_MENU_CONVERSION_ERROR );
-			return;
-		}
-
-		setStatus( CLASSIC_MENU_CONVERSION_PENDING );
-		setError( null );
-
-		return await convertClassicMenuToBlockMenu(
-			menuId,
-			menuName,
-			postStatus
-		)
-			.then( ( navigationMenu ) => {
-				setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
-				// Reset the ID for the currently importing classic menu.
-				classicMenuBeingConvertedId = null;
-				return navigationMenu;
-			} )
-			.catch( ( err ) => {
-				setError( err?.message );
-				// Reset the ID for the currently importing classic menu.
+	const convert = useCallback(
+		async ( menuId, menuName, postStatus ) => {
+			// Check whether this classic menu is being imported already.
+			if ( classicMenuBeingConvertedId === menuId ) {
+				return;
+			}
+
+			// Set the ID for the currently importing classic menu.
+			classicMenuBeingConvertedId = menuId;
+
+			if ( ! menuId || ! menuName ) {
+				setError( 'Unable to convert menu. Missing menu details.' );
 				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+				return;
+			}
 
-				// Reset the ID for the currently importing classic menu.
-				classicMenuBeingConvertedId = null;
-
-				// 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,
-					}
-				);
-			} );
-	}, [] );
+			setStatus( CLASSIC_MENU_CONVERSION_PENDING );
+			setError( null );
+
+			return await convertClassicMenuToBlockMenu(
+				menuId,
+				menuName,
+				postStatus
+			)
+				.then( ( navigationMenu ) => {
+					setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+					// Reset the ID for the currently importing classic menu.
+					classicMenuBeingConvertedId = null;
+					return navigationMenu;
+				} )
+				.catch( ( err ) => {
+					setError( err?.message );
+					// Reset the ID for the currently importing classic menu.
+					setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+
+					// Reset the ID for the currently importing classic menu.
+					classicMenuBeingConvertedId = null;
+
+					// 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,
+						}
+					);
+				} );
+		},
+		[ convertClassicMenuToBlockMenu ]
+	);
 
 	return {
 		convert,

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

@@ -90,7 +90,7 @@ export default function useCreateNavigationMenu( clientId ) {
 					} );
 				} );
 		},
-		[ serialize, saveEntityRecord ]
+		[ serialize, saveEntityRecord, editEntityRecord, generateDefaultTitle ]
 	);
 
 	return {

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

@@ -75,5 +75,5 @@ export default function useGenerateDefaultNavigationTitle( clientId ) {
 				: title;
 
 		return titleWithCount || '';
-	}, [ isDisabled, area ] );
+	}, [ isDisabled, area, registry ] );
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticeStore } from '@wordpress/notices';
 
@@ -10,26 +10,29 @@ function useNavigationNotice( { name, message = '' } = {} ) {
 
 	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
 
-	const showNotice = ( customMsg ) => {
-		if ( noticeRef.current ) {
-			return;
-		}
+	const showNotice = useCallback(
+		( customMsg ) => {
+			if ( noticeRef.current ) {
+				return;
+			}
 
-		noticeRef.current = name;
+			noticeRef.current = name;
 
-		createWarningNotice( customMsg || message, {
-			id: noticeRef.current,
-			type: 'snackbar',
-		} );
-	};
+			createWarningNotice( customMsg || message, {
+				id: noticeRef.current,
+				type: 'snackbar',
+			} );
+		},
+		[ noticeRef, createWarningNotice ]
+	);
 
-	const hideNotice = () => {
+	const hideNotice = useCallback( () => {
 		if ( ! noticeRef.current ) {
 			return;
 		}
 		removeNotice( noticeRef.current );
 		noticeRef.current = null;
-	};
+	}, [ noticeRef, removeNotice ] );
 
 	return [ showNotice, hideNotice ];
 }