From 5d91de2e9a31faa27bfe228fbfaa6a73b31a7a73 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Tue, 2 Aug 2022 18:54:26 +0300
Subject: [PATCH] use page list for placeholder, always create new menu, select
 most recent when more than one

---
 .../src/navigation/edit/index.js              | 57 ++++++++++++-------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 1b3d02877686c2..f908485ef7c956 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -28,7 +28,7 @@ import {
 } from '@wordpress/block-editor';
 import { EntityProvider } from '@wordpress/core-data';
 
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	PanelBody,
 	ToggleControl,
@@ -40,6 +40,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -130,7 +131,6 @@ function Navigation( {
 
 	const ref = attributes.ref;
 
-	const registry = useRegistry();
 	const setRef = ( postId ) => {
 		setAttributes( { ref: postId } );
 	};
@@ -266,12 +266,18 @@ function Navigation( {
 			hasUncontrolledInnerBlocks ||
 			isCreatingNavigationMenu ||
 			ref ||
-			! navigationMenus?.length ||
-			navigationMenus?.length > 1
+			! navigationMenus?.length
 		) {
 			return;
 		}
 
+		navigationMenus.sort( ( menuA, menuB ) => {
+			const menuADate = new Date( menuA.date );
+			const menuBDate = new Date( menuB.date );
+			return menuADate.getTime() < menuBDate.getTime();
+		} );
+
+		__unstableMarkNextChangeAsNotPersistent();
 		setRef( navigationMenus[ 0 ].id );
 	}, [ navigationMenus ] );
 
@@ -304,6 +310,11 @@ function Navigation( {
 		hasResolvedNavigationMenus &&
 		! hasUncontrolledInnerBlocks;
 
+	if ( isPlaceholder && ! ref ) {
+		__unstableMarkNextChangeAsNotPersistent();
+		replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
+	}
+
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;
 
@@ -541,17 +552,6 @@ function Navigation( {
 		shouldFocusNavigationSelector,
 	] );
 
-	const resetToEmptyBlock = useCallback( () => {
-		registry.batch( () => {
-			setAttributes( {
-				ref: undefined,
-			} );
-			if ( ! ref ) {
-				replaceInnerBlocks( clientId, [] );
-			}
-		} );
-	}, [ clientId, ref ] );
-
 	const isResponsive = 'never' !== overlayMenu;
 
 	const overlayMenuPreviewClasses = classnames(
@@ -700,6 +700,20 @@ function Navigation( {
 	if ( hasUnsavedBlocks ) {
 		return (
 			<TagName { ...blockProps }>
+				<BlockControls>
+					<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
+						<NavigationMenuSelector
+							ref={ null }
+							currentMenuId={ null }
+							clientId={ clientId }
+							onSelect={ handleSelectNavigation }
+							onCreateNew={ () => createNavigationMenu( '', [] ) }
+							/* translators: %s: The name of a menu. */
+							actionLabel={ __( "Switch to '%s'" ) }
+							showManageActions
+						/>
+					</ToolbarGroup>
+				</BlockControls>
 				{ stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
@@ -744,7 +758,10 @@ function Navigation( {
 					{ __(
 						'Navigation menu has been deleted or is unavailable. '
 					) }
-					<Button onClick={ resetToEmptyBlock } variant="link">
+					<Button
+						onClick={ () => createNavigationMenu( '', [] ) }
+						variant="link"
+					>
 						{ __( 'Create a new menu?' ) }
 					</Button>
 				</Warning>
@@ -766,7 +783,7 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
-	if ( isPlaceholder ) {
+	if ( isPlaceholder && CustomPlaceholder ) {
 		return (
 			<TagName { ...blockProps }>
 				<PlaceholderComponent
@@ -795,7 +812,9 @@ function Navigation( {
 								currentMenuId={ ref }
 								clientId={ clientId }
 								onSelect={ handleSelectNavigation }
-								onCreateNew={ resetToEmptyBlock }
+								onCreateNew={ () =>
+									createNavigationMenu( '', [] )
+								}
 								/* translators: %s: The name of a menu. */
 								actionLabel={ __( "Switch to '%s'" ) }
 								showManageActions
@@ -814,7 +833,7 @@ function Navigation( {
 							canUserDeleteNavigationMenu && (
 								<NavigationMenuDeleteControl
 									onDelete={ ( deletedMenuTitle = '' ) => {
-										resetToEmptyBlock();
+										createNavigationMenu( '', [] );
 										showNavigationMenuDeleteNotice(
 											sprintf(
 												// translators: %s: the name of a menu (e.g. Header navigation).