From c15a37749b06c8fca231fd43b9eb1037d63c0fc7 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 23 Nov 2021 14:18:22 +1100
Subject: [PATCH 01/13] Try always generating navigation title

---
 .../src/navigation/edit/index.js              | 21 ++----
 .../edit/navigation-menu-name-modal.js        | 69 -------------------
 .../edit/navigation-menu-publish-button.js    | 57 ---------------
 .../src/navigation/edit/placeholder/index.js  | 51 +++++---------
 4 files changed, 23 insertions(+), 175 deletions(-)
 delete mode 100644 packages/block-library/src/navigation/edit/navigation-menu-name-modal.js
 delete mode 100644 packages/block-library/src/navigation/edit/navigation-menu-publish-button.js

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index a4c26c19dd5a2..196f638646942 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -43,12 +43,10 @@ import { __ } from '@wordpress/i18n';
 import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
 import Placeholder from './placeholder';
-import PlaceholderPreview from './placeholder/placeholder-preview';
 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';
 
@@ -286,8 +284,7 @@ function Navigation( {
 	// Either this block was saved in the content or inserted by a pattern.
 	// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
 	// that automatically saves the menu.
-	const hasUnsavedBlocks =
-		hasExistingNavItems && ! isEntityAvailable && ! isWithinUnassignedArea;
+	const hasUnsavedBlocks = ! isEntityAvailable && ! isWithinUnassignedArea;
 	if ( hasUnsavedBlocks ) {
 		return (
 			<UnsavedInnerBlocks
@@ -356,11 +353,6 @@ function Navigation( {
 						</ToolbarGroup>
 					) }
 					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
-					{ isDraftNavigationMenu && (
-						<ToolbarGroup>
-							<NavigationMenuPublishButton />
-						</ToolbarGroup>
-					) }
 				</BlockControls>
 				{ listViewModal }
 				<InspectorControls>
@@ -482,9 +474,13 @@ function Navigation( {
 				<nav { ...blockProps }>
 					{ ! isEntityAvailable && isPlaceholderShown && (
 						<PlaceholderComponent
-							onFinish={ ( post ) => {
+							onFinish={ ( post, blocks ) => {
 								setIsPlaceholderShown( false );
-								setNavigationMenuId( post.id );
+								if ( post ) {
+									setNavigationMenuId( post.id );
+								} else {
+									replaceInnerBlocks( clientId, blocks );
+								}
 								selectBlock( clientId );
 							} }
 							canSwitchNavigationMenu={ canSwitchNavigationMenu }
@@ -493,9 +489,6 @@ function Navigation( {
 							}
 						/>
 					) }
-					{ ! isEntityAvailable && ! isPlaceholderShown && (
-						<PlaceholderPreview isLoading />
-					) }
 					{ ! isPlaceholderShown && (
 						<ResponsiveWrapper
 							id={ clientId }
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
deleted file mode 100644
index 443df3d199e3f..0000000000000
--- a/packages/block-library/src/navigation/edit/navigation-menu-name-modal.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	Flex,
-	FlexItem,
-	Modal,
-	TextControl,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-export default function NavigationMenuNameModal( {
-	title,
-	finishButtonText = __( 'Create' ),
-	onFinish,
-	onRequestClose,
-	value = '',
-} ) {
-	const [ name, setName ] = useState( value );
-
-	return (
-		<Modal
-			title={ title }
-			closeLabel={ __( 'Cancel' ) }
-			onRequestClose={ onRequestClose }
-			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
-		>
-			<form
-				onSubmit={ ( event ) => {
-					event.preventDefault();
-					onFinish( name );
-				} }
-			>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ name }
-					onChange={ setName }
-				/>
-				<Flex
-					className="wp-block-template-part__placeholder-create-new__title-form-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
-						<Button
-							variant="secondary"
-							onClick={ () => {
-								onRequestClose();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							variant="primary"
-							type="submit"
-							disabled={ ! name.length }
-							aria-disabled={ ! name.length }
-						>
-							{ finishButtonText }
-						</Button>
-					</FlexItem>
-				</Flex>
-			</form>
-		</Modal>
-	);
-}
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
deleted file mode 100644
index fd4a766d1f093..0000000000000
--- a/packages/block-library/src/navigation/edit/navigation-menu-publish-button.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToolbarButton } from '@wordpress/components';
-import {
-	useEntityId,
-	useEntityProp,
-	store as coreStore,
-} from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import NavigationMenuNameModal from './navigation-menu-name-modal';
-
-export default function NavigationMenuPublishButton() {
-	const [ isNameModalVisible, setIsNameModalVisible ] = useState( false );
-	const id = useEntityId( 'postType', 'wp_navigation' );
-	const [ navigationMenuTitle ] = useEntityProp(
-		'postType',
-		'wp_navigation',
-		'title'
-	);
-	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
-		coreStore
-	);
-
-	return (
-		<>
-			<ToolbarButton onClick={ () => setIsNameModalVisible( true ) }>
-				{ __( 'Save as' ) }
-			</ToolbarButton>
-			{ isNameModalVisible && (
-				<NavigationMenuNameModal
-					title={ __( 'Save your new navigation menu' ) }
-					value={ navigationMenuTitle }
-					onRequestClose={ () => setIsNameModalVisible( false ) }
-					finishButtonText={ __( 'Save' ) }
-					onFinish={ ( updatedTitle ) => {
-						editEntityRecord( 'postType', 'wp_navigation', id, {
-							title: updatedTitle,
-							status: 'publish',
-						} );
-						saveEditedEntityRecord(
-							'postType',
-							'wp_navigation',
-							id
-						);
-					} }
-				/>
-			) }
-		</>
-	);
-}
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index 94e341177dad4..7952cf923f590 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -23,7 +23,6 @@ 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';
 
 const ExistingMenusDropdown = ( {
@@ -100,18 +99,15 @@ export default function NavigationPlaceholder( {
 
 	const [ menuName, setMenuName ] = useState( '' );
 
-	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 = [] ) => {
+		async ( title, blocks = [] ) => {
+			if ( ! title ) {
+				return;
+			}
 			const record = {
 				title,
 				content: serialize( blocks ),
@@ -129,12 +125,15 @@ export default function NavigationPlaceholder( {
 		[ 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 +151,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 +169,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 +223,7 @@ export default function NavigationPlaceholder( {
 								<>
 									<Button
 										variant="tertiary"
-										onClick={ () => {
-											setIsNewMenuModalVisible( true );
-											setCreateEmpty( false );
-										} }
+										onClick={ onCreateAllPages }
 									>
 										{ __( 'Add all pages' ) }
 									</Button>
@@ -237,10 +232,7 @@ export default function NavigationPlaceholder( {
 							) : undefined }
 							<Button
 								variant="tertiary"
-								onClick={ () => {
-									setIsNewMenuModalVisible( true );
-									setCreateEmpty( true );
-								} }
+								onClick={ onCreateEmptyMenu }
 							>
 								{ __( 'Start empty' ) }
 							</Button>
@@ -248,17 +240,6 @@ export default function NavigationPlaceholder( {
 					</div>
 				</Placeholder>
 			) }
-			{ isNewMenuModalVisible && (
-				<NavigationMenuNameModal
-					title={ __( 'Create your new navigation menu' ) }
-					onRequestClose={ () => {
-						setIsNewMenuModalVisible( false );
-					} }
-					onFinish={
-						createEmpty ? onCreateEmptyMenu : onCreateAllPages
-					}
-				/>
-			) }
 		</>
 	);
 }

From acc5653d4e8ff386fe29456e1b26df5309457700 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 23 Nov 2021 14:45:36 +1100
Subject: [PATCH 02/13] Show placeholder preview

---
 packages/block-library/src/navigation/edit/index.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 196f638646942..0ffdf5bd60743 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -43,6 +43,7 @@ import { __ } from '@wordpress/i18n';
 import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
 import Placeholder from './placeholder';
+import PlaceholderPreview from './placeholder/placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
 import NavigationInnerBlocks from './inner-blocks';
 import NavigationMenuSelector from './navigation-menu-selector';
@@ -276,7 +277,7 @@ function Navigation( {
 
 	// Hide the placeholder if an navigation menu entity has loaded.
 	useEffect( () => {
-		setIsPlaceholderShown( ! isEntityAvailable );
+		setIsPlaceholderShown( ! isEntityAvailable || ! hasExistingNavItems );
 	}, [ isEntityAvailable ] );
 
 	// If the block has inner blocks, but no menu id, this was an older
@@ -472,7 +473,7 @@ function Navigation( {
 					</InspectorControls>
 				) }
 				<nav { ...blockProps }>
-					{ ! isEntityAvailable && isPlaceholderShown && (
+					{ isPlaceholderShown && (
 						<PlaceholderComponent
 							onFinish={ ( post, blocks ) => {
 								setIsPlaceholderShown( false );
@@ -489,6 +490,9 @@ function Navigation( {
 							}
 						/>
 					) }
+					{ ! isEntityAvailable && ! isPlaceholderShown && (
+						<PlaceholderPreview isLoading />
+					) }
 					{ ! isPlaceholderShown && (
 						<ResponsiveWrapper
 							id={ clientId }

From 0af669e8b9e3f625659dccbc66b16a9b0a0a0f92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 23 Nov 2021 17:59:23 +0100
Subject: [PATCH 03/13] Add useCreateNavigationMenu

---
 .../src/navigation/edit/index.js              |   3 +-
 .../src/navigation/edit/placeholder/index.js  |  35 +-----
 .../navigation/edit/unsaved-inner-blocks.js   |  63 +----------
 .../edit/use-create-navigation-menu.js        |  36 ++++++
 .../edit/use-default-navigation-title.js      | 103 ++++++++++++++++++
 5 files changed, 151 insertions(+), 89 deletions(-)
 create mode 100644 packages/block-library/src/navigation/edit/use-create-navigation-menu.js
 create mode 100644 packages/block-library/src/navigation/edit/use-default-navigation-title.js

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 0ffdf5bd60743..6322addc8e2de 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -285,7 +285,8 @@ function Navigation( {
 	// Either this block was saved in the content or inserted by a pattern.
 	// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
 	// that automatically saves the menu.
-	const hasUnsavedBlocks = ! isEntityAvailable && ! isWithinUnassignedArea;
+	const hasUnsavedBlocks =
+		hasExistingNavItems && ! isEntityAvailable && ! isWithinUnassignedArea;
 	if ( hasUnsavedBlocks ) {
 		return (
 			<UnsavedInnerBlocks
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index 7952cf923f590..a5ef385dfaa6d 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/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';
@@ -24,6 +22,7 @@ import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
 import menuItemsToBlocks from '../../menu-items-to-blocks';
 import useNavigationMenu from '../../use-navigation-menu';
+import useCreateNavigationMenu from '../use-create-navigation-menu';
 
 const ExistingMenusDropdown = ( {
 	canSwitchNavigationMenu,
@@ -89,41 +88,15 @@ const ExistingMenusDropdown = ( {
 };
 
 export default function NavigationPlaceholder( {
+	clientId,
 	onFinish,
 	canSwitchNavigationMenu,
 	hasResolvedNavigationMenus,
 } ) {
 	const [ selectedMenu, setSelectedMenu ] = useState();
-
 	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-
 	const [ menuName, setMenuName ] = useState( '' );
-
-	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, blocks = [] ) => {
-			if ( ! title ) {
-				return;
-			}
-			const record = {
-				title,
-				content: serialize( blocks ),
-				status: 'publish',
-			};
-
-			const navigationMenu = await saveEntityRecord(
-				'postType',
-				'wp_navigation',
-				record
-			);
-
-			return navigationMenu;
-		},
-		[ serialize, saveEntityRecord ]
-	);
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
 	const onFinishMenuCreation = async (
 		blocks,
diff --git a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
index 798197a05d779..76b641d7ec072 100644
--- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
+++ b/packages/block-library/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 (
diff --git a/packages/block-library/src/navigation/edit/use-create-navigation-menu.js b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
new file mode 100644
index 0000000000000..3fb4ba579fedd
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
@@ -0,0 +1,36 @@
+/**
+ * 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 useDefaultNavigationTitle from './use-default-navigation-title';
+
+export default function useCreateNavigationMenu( clientId ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const defaultTitle = useDefaultNavigationTitle( 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 = [] ) => {
+			const record = {
+				title: title || defaultTitle,
+				content: serialize( blocks ),
+				status: 'publish',
+			};
+
+			return await saveEntityRecord(
+				'postType',
+				'wp_navigation',
+				record
+			);
+		},
+		[ serialize, saveEntityRecord ]
+	);
+}
diff --git a/packages/block-library/src/navigation/edit/use-default-navigation-title.js b/packages/block-library/src/navigation/edit/use-default-navigation-title.js
new file mode 100644
index 0000000000000..5636dafabbb81
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/use-default-navigation-title.js
@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationMenu from '../use-navigation-menu';
+import useTemplatePartAreaLabel from '../use-template-part-area-label';
+
+const EMPTY_OBJECT = {};
+const DRAFT_MENU_PARAMS = [
+	'postType',
+	'wp_navigation',
+	{ status: 'draft', per_page: -1 },
+];
+
+export default function useDefaultNavigationTitle( 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 );
+
+	const { draftNavigationMenus, hasResolvedDraftNavigationMenus } = useSelect(
+		( select ) => {
+			if ( isDisabled ) {
+				return EMPTY_OBJECT;
+			}
+
+			const { getEntityRecords, hasFinishedResolution } = select(
+				coreStore
+			);
+
+			return {
+				draftNavigationMenus: getEntityRecords( ...DRAFT_MENU_PARAMS ),
+				hasResolvedDraftNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					DRAFT_MENU_PARAMS
+				),
+			};
+		},
+		[ isDisabled ]
+	);
+
+	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
+
+	// 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 );
+
+	// Automatically save the uncontrolled blocks.
+	return useMemo( () => {
+		// Ensure other navigation menus have loaded so an
+		// accurate name can be created.
+		if (
+			isDisabled ||
+			! hasResolvedDraftNavigationMenus ||
+			! hasResolvedNavigationMenus
+		) {
+			return '';
+		}
+
+		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,
+		hasResolvedDraftNavigationMenus,
+		hasResolvedNavigationMenus,
+		draftNavigationMenus,
+		navigationMenus,
+		area,
+	] );
+}

From 6d31ca9ff4d4f8551911ebabdba6a7d57dc15a4c Mon Sep 17 00:00:00 2001
From: Adam Zielinski <adam@adamziel.com>
Date: Tue, 23 Nov 2021 18:21:24 +0100
Subject: [PATCH 04/13] Update
 packages/block-library/src/navigation/edit/use-default-navigation-title.js

---
 .../src/navigation/edit/use-default-navigation-title.js          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/navigation/edit/use-default-navigation-title.js b/packages/block-library/src/navigation/edit/use-default-navigation-title.js
index 5636dafabbb81..9e6c7c5c83cf2 100644
--- a/packages/block-library/src/navigation/edit/use-default-navigation-title.js
+++ b/packages/block-library/src/navigation/edit/use-default-navigation-title.js
@@ -53,7 +53,6 @@ export default function useDefaultNavigationTitle( clientId ) {
 	// early.
 	const area = useTemplatePartAreaLabel( isDisabled ? undefined : clientId );
 
-	// Automatically save the uncontrolled blocks.
 	return useMemo( () => {
 		// Ensure other navigation menus have loaded so an
 		// accurate name can be created.

From eb80d0293b6623d23fe390c4bf707818c52f4184 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 24 Nov 2021 12:11:27 +1100
Subject: [PATCH 05/13] Fix placeholder and remove unecessary logic.

---
 packages/block-library/src/navigation/edit/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 6322addc8e2de..119129522eff3 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -277,7 +277,7 @@ function Navigation( {
 
 	// Hide the placeholder if an navigation menu entity has loaded.
 	useEffect( () => {
-		setIsPlaceholderShown( ! isEntityAvailable || ! hasExistingNavItems );
+		setIsPlaceholderShown( ! isEntityAvailable );
 	}, [ isEntityAvailable ] );
 
 	// If the block has inner blocks, but no menu id, this was an older
@@ -476,12 +476,10 @@ function Navigation( {
 				<nav { ...blockProps }>
 					{ isPlaceholderShown && (
 						<PlaceholderComponent
-							onFinish={ ( post, blocks ) => {
+							onFinish={ ( post ) => {
 								setIsPlaceholderShown( false );
 								if ( post ) {
 									setNavigationMenuId( post.id );
-								} else {
-									replaceInnerBlocks( clientId, blocks );
 								}
 								selectBlock( clientId );
 							} }

From 7f5011def3324ec27ed1f01341392f7d7600b71c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 24 Nov 2021 12:23:36 +1100
Subject: [PATCH 06/13] Pass clientId to placeholder.

---
 packages/block-library/src/navigation/edit/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 119129522eff3..ad4b75ed49f2f 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -487,6 +487,7 @@ function Navigation( {
 							hasResolvedNavigationMenus={
 								hasResolvedNavigationMenus
 							}
+							clientId={ clientId }
 						/>
 					) }
 					{ ! isEntityAvailable && ! isPlaceholderShown && (

From f4b4bc4d85d52462a0d4ab85b992cf19f371ceaa Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Nov 2021 11:18:25 +0000
Subject: [PATCH 07/13] Reset inner blocks when creating new menu

---
 packages/block-library/src/navigation/edit/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index ad4b75ed49f2f..2249089f09952 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -341,6 +341,7 @@ function Navigation( {
 											onClose();
 										} }
 										onCreateNew={ () => {
+											replaceInnerBlocks( clientId, [] );
 											if ( navigationArea ) {
 												setAreaMenu( 0 );
 											}

From 2219fa504e8d164662aa4a81d5ccbec489299ec1 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Nov 2021 12:02:38 +0000
Subject: [PATCH 08/13] Only consider published Navigations as valid

---
 .../src/navigation/use-navigation-menu.js             | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js
index 90e32c88ffb83..c62ccbbe65636 100644
--- a/packages/block-library/src/navigation/use-navigation-menu.js
+++ b/packages/block-library/src/navigation/use-navigation-menu.js
@@ -22,9 +22,16 @@ export default function useNavigationMenu( navigationMenuId ) {
 			const rawNavigationMenu = navigationMenuId
 				? getEntityRecord( ...navigationMenuSingleArgs )
 				: null;
-			const navigationMenu = navigationMenuId
+			let navigationMenu = navigationMenuId
 				? getEditedEntityRecord( ...navigationMenuSingleArgs )
 				: null;
+
+			// getEditedEntityRecord will return the post regardless of status.
+			// Therefore if the found post is not published then we should ignore it.
+			if ( navigationMenuId?.status !== 'publish' ) {
+				navigationMenu = null;
+			}
+
 			const hasResolvedNavigationMenu = navigationMenuId
 				? hasFinishedResolution(
 						'getEditedEntityRecord',
@@ -35,7 +42,7 @@ export default function useNavigationMenu( navigationMenuId ) {
 			const navigationMenuMultipleArgs = [
 				'postType',
 				'wp_navigation',
-				{ per_page: -1 },
+				{ per_page: -1, status: 'publish' },
 			];
 			const navigationMenus = getEntityRecords(
 				...navigationMenuMultipleArgs

From 1263ad30b3ffb16fc5b4d2ea17a39f1e79b3ef90 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Nov 2021 12:15:04 +0000
Subject: [PATCH 09/13] Correct bug with checking status of Nav post

---
 packages/block-library/src/navigation/use-navigation-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js
index c62ccbbe65636..3d6ff446eae7b 100644
--- a/packages/block-library/src/navigation/use-navigation-menu.js
+++ b/packages/block-library/src/navigation/use-navigation-menu.js
@@ -28,7 +28,7 @@ export default function useNavigationMenu( navigationMenuId ) {
 
 			// getEditedEntityRecord will return the post regardless of status.
 			// Therefore if the found post is not published then we should ignore it.
-			if ( navigationMenuId?.status !== 'publish' ) {
+			if ( navigationMenu?.status !== 'publish' ) {
 				navigationMenu = null;
 			}
 

From 4808aaff167811b54c3782aba6a56526d36c6de7 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Nov 2021 12:16:04 +0000
Subject: [PATCH 10/13] 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.
---
 .../src/navigation/edit/index.js              | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 2249089f09952..1a79084e0b441 100644
--- 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';
 
@@ -280,6 +281,17 @@ function Navigation( {
 		setIsPlaceholderShown( ! isEntityAvailable );
 	}, [ isEntityAvailable ] );
 
+	function createNewMenu() {
+		replaceInnerBlocks( clientId, [] );
+		if ( navigationArea ) {
+			setAreaMenu( 0 );
+		}
+		setAttributes( {
+			navigationMenuId: undefined,
+		} );
+		setIsPlaceholderShown( true );
+	}
+
 	// 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.
@@ -305,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={ createNewMenu } variant="link">
+						{ __( 'Create a new menu?' ) }
+					</Button>
+				</Warning>
+			</div>
+		);
+	}
+
 	if ( isEntityAvailable && hasAlreadyRendered ) {
 		return (
 			<div { ...blockProps }>
@@ -340,16 +369,7 @@ function Navigation( {
 											setNavigationMenuId( id );
 											onClose();
 										} }
-										onCreateNew={ () => {
-											replaceInnerBlocks( clientId, [] );
-											if ( navigationArea ) {
-												setAreaMenu( 0 );
-											}
-											setAttributes( {
-												navigationMenuId: undefined,
-											} );
-											setIsPlaceholderShown( true );
-										} }
+										onCreateNew={ createNewMenu }
 									/>
 								) }
 							</ToolbarDropdownMenu>

From 1885a87c1bdc368c6cc44a320d881c1afa2cd0a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 24 Nov 2021 14:06:54 +0100
Subject: [PATCH 11/13] Switch to useGenerateDefaultNavigationTitle

---
 .../edit/use-create-navigation-menu.js        |  9 ++-
 ... use-generate-default-navigation-title.js} | 61 ++++++-------------
 2 files changed, 25 insertions(+), 45 deletions(-)
 rename packages/block-library/src/navigation/edit/{use-default-navigation-title.js => use-generate-default-navigation-title.js} (61%)

diff --git a/packages/block-library/src/navigation/edit/use-create-navigation-menu.js b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
index 3fb4ba579fedd..39d54953587f0 100644
--- a/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
+++ b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
@@ -9,18 +9,21 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useDefaultNavigationTitle from './use-default-navigation-title';
+import useGenerateDefaultNavigationTitle from './use-generate-default-navigation-title';
 
 export default function useCreateNavigationMenu( clientId ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const defaultTitle = useDefaultNavigationTitle( clientId );
+	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: title || defaultTitle,
+				title,
 				content: serialize( blocks ),
 				status: 'publish',
 			};
diff --git a/packages/block-library/src/navigation/edit/use-default-navigation-title.js b/packages/block-library/src/navigation/edit/use-generate-default-navigation-title.js
similarity index 61%
rename from packages/block-library/src/navigation/edit/use-default-navigation-title.js
rename to packages/block-library/src/navigation/edit/use-generate-default-navigation-title.js
index 9e6c7c5c83cf2..e268ed288f154 100644
--- a/packages/block-library/src/navigation/edit/use-default-navigation-title.js
+++ b/packages/block-library/src/navigation/edit/use-generate-default-navigation-title.js
@@ -3,66 +3,50 @@
  */
 import { Disabled } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
+import { useRegistry } from '@wordpress/data';
+import { useContext, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import useNavigationMenu from '../use-navigation-menu';
 import useTemplatePartAreaLabel from '../use-template-part-area-label';
 
-const EMPTY_OBJECT = {};
 const DRAFT_MENU_PARAMS = [
 	'postType',
 	'wp_navigation',
 	{ status: 'draft', per_page: -1 },
 ];
 
-export default function useDefaultNavigationTitle( clientId ) {
+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 );
 
-	const { draftNavigationMenus, hasResolvedDraftNavigationMenus } = useSelect(
-		( select ) => {
-			if ( isDisabled ) {
-				return EMPTY_OBJECT;
-			}
-
-			const { getEntityRecords, hasFinishedResolution } = select(
-				coreStore
-			);
-
-			return {
-				draftNavigationMenus: getEntityRecords( ...DRAFT_MENU_PARAMS ),
-				hasResolvedDraftNavigationMenus: hasFinishedResolution(
-					'getEntityRecords',
-					DRAFT_MENU_PARAMS
-				),
-			};
-		},
-		[ isDisabled ]
-	);
-
-	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
-
 	// 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 );
 
-	return useMemo( () => {
+	const registry = useRegistry();
+	return useCallback( async () => {
 		// Ensure other navigation menus have loaded so an
 		// accurate name can be created.
-		if (
-			isDisabled ||
-			! hasResolvedDraftNavigationMenus ||
-			! hasResolvedNavigationMenus
-		) {
+		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(
@@ -91,12 +75,5 @@ export default function useDefaultNavigationTitle( clientId ) {
 				: title;
 
 		return titleWithCount || '';
-	}, [
-		isDisabled,
-		hasResolvedDraftNavigationMenus,
-		hasResolvedNavigationMenus,
-		draftNavigationMenus,
-		navigationMenus,
-		area,
-	] );
+	}, [ isDisabled, area ] );
 }

From 4317c76b753a3dfd955e281c38aeb96210f0510e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 24 Nov 2021 14:23:25 +0100
Subject: [PATCH 12/13] Wrap createNewMenu in useCallback

---
 packages/block-library/src/navigation/edit/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 1a79084e0b441..3624f1abfc061 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -281,7 +281,7 @@ function Navigation( {
 		setIsPlaceholderShown( ! isEntityAvailable );
 	}, [ isEntityAvailable ] );
 
-	function createNewMenu() {
+	const createNewMenu = useCallback( () => {
 		replaceInnerBlocks( clientId, [] );
 		if ( navigationArea ) {
 			setAreaMenu( 0 );
@@ -290,7 +290,7 @@ function Navigation( {
 			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.

From 407af14bdd5d9d3975d61d311aed6900d23f6016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 24 Nov 2021 14:46:54 +0100
Subject: [PATCH 13/13] Rename createNewMenu to startWithEmptyMenu

---
 packages/block-library/src/navigation/edit/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 3624f1abfc061..eb283a5a9709b 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -281,7 +281,7 @@ function Navigation( {
 		setIsPlaceholderShown( ! isEntityAvailable );
 	}, [ isEntityAvailable ] );
 
-	const createNewMenu = useCallback( () => {
+	const startWithEmptyMenu = useCallback( () => {
 		replaceInnerBlocks( clientId, [] );
 		if ( navigationArea ) {
 			setAreaMenu( 0 );
@@ -326,7 +326,7 @@ function Navigation( {
 					{ __(
 						'Navigation menu has been deleted or is unavailable. '
 					) }
-					<Button onClick={ createNewMenu } variant="link">
+					<Button onClick={ startWithEmptyMenu } variant="link">
 						{ __( 'Create a new menu?' ) }
 					</Button>
 				</Warning>
@@ -369,7 +369,7 @@ function Navigation( {
 											setNavigationMenuId( id );
 											onClose();
 										} }
-										onCreateNew={ createNewMenu }
+										onCreateNew={ startWithEmptyMenu }
 									/>
 								) }
 							</ToolbarDropdownMenu>