Try always generating navigation post title (#36760)

* Try always generating navigation title * Show placeholder preview * Add useCreateNavigationMenu * Update packages/block-library/src/navigation/edit/use-default-navigation-title.js * Fix placeholder and remove unecessary logic. * Pass clientId to placeholder. * Reset inner blocks when creating new menu * Only consider published Navigations as valid * Correct bug with checking status of Nav post * UX to allow creating new menu if associated Nav post not found Previously you could get into an error state if the Nav block referenced a Nav Post which had been deleted. You could not recover from this as the UI provided no way to "start over". This addition affords that ability. * Switch to useGenerateDefaultNavigationTitle * Wrap createNewMenu in useCallback * Rename createNewMenu to startWithEmptyMenu Co-authored-by: Adam Zieliński <adam@adamziel.com> Co-authored-by: Dave Smith <getdavemail@gmail.com>
WordPress · Nov 28, 2021 · ee297a9 · ee297a9
1 parent 7d47338
commit ee297a9
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 264 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/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';
 
@@ -281,6 +281,17 @@ function Navigation( {
 		setIsPlaceholderShown( ! isEntityAvailable );
 	}, [ isEntityAvailable ] );
 
+	const startWithEmptyMenu = useCallback( () => {
+		replaceInnerBlocks( clientId, [] );
+		if ( navigationArea ) {
+			setAreaMenu( 0 );
+		}
+		setAttributes( {
+			navigationMenuId: 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.
@@ -306,6 +317,23 @@ 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 ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __(
+						'Navigation menu has been deleted or is unavailable. '
+					) }
+					<Button onClick={ startWithEmptyMenu } variant="link">
+						{ __( 'Create a new menu?' ) }
+					</Button>
+				</Warning>
+			</div>
+		);
+	}
+
 	if ( isEntityAvailable && hasAlreadyRendered ) {
 		return (
 			<div { ...blockProps }>
@@ -341,26 +369,13 @@ function Navigation( {
 											setNavigationMenuId( 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>
@@ -480,17 +495,20 @@ function Navigation( {
 					</InspectorControls>
 				) }
 				<nav { ...blockProps }>
-					{ ! isEntityAvailable && isPlaceholderShown && (
+					{ isPlaceholderShown && (
 						<PlaceholderComponent
 							onFinish={ ( post ) => {
 								setIsPlaceholderShown( false );
-								setNavigationMenuId( post.id );
+								if ( post ) {
+									setNavigationMenuId( post.id );
+								}
 								selectBlock( clientId );
 							} }
 							canSwitchNavigationMenu={ canSwitchNavigationMenu }
 							hasResolvedNavigationMenus={
 								hasResolvedNavigationMenus
 							}
+							clientId={ clientId }
 						/>
 					) }
 					{ ! isEntityAvailable && ! isPlaceholderShown && (

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-modal.js b/packages/block-library/src/navigation/edit/navigation-menu-name-modal.js
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-publish-button.js b/packages/block-library/src/navigation/edit/navigation-menu-publish-button.js
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -1,16 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { serialize, createBlock } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import {
 	Placeholder,
 	Button,
 	DropdownMenu,
 	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,28 +205,14 @@ export default function NavigationPlaceholder( {
 							) : undefined }
 							<Button
 								variant="tertiary"
-								onClick={ () => {
-									setIsNewMenuModalVisible( true );
-									setCreateEmpty( true );
-								} }
+								onClick={ onCreateEmptyMenu }
 							>
 								{ __( 'Start empty' ) }
 							</Button>
 						</div>
 					</div>
 				</Placeholder>
 			) }
-			{ isNewMenuModalVisible && (
-				<NavigationMenuNameModal
-					title={ __( 'Create your new navigation menu' ) }
-					onRequestClose={ () => {
-						setIsNewMenuModalVisible( false );
-					} }
-					onFinish={
-						createEmpty ? onCreateEmptyMenu : onCreateAllPages
-					}
-				/>
-			) }
 		</>
 	);
 }