Closes the dropdown when importing or creating new menu as in #43529

Fixes slow connection UX by disabling and enabling the selector and the manage menus link depending on data status. Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com>
WordPress · Aug 30, 2022 · 50d69e2 · 50d69e2
1 parent 3ca01a8
commit 50d69e2
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 42 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -605,12 +605,18 @@ function Navigation( {
 								}
 							} }
 							onCreateNew={ createUntitledEmptyNavigationMenu }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
 							/* translators: %s: The name of a menu. */
 							actionLabel={ __( "Switch to '%s'" ) }
 						/>
 						<Button
 							variant="link"
-							disabled={ ! hasManagePermissions }
+							disabled={
+								! hasManagePermissions ||
+								! hasResolvedNavigationMenus
+							}
 							href={ addQueryArgs( 'edit.php', {
 								post_type: 'wp_navigation',
 							} ) }
@@ -676,12 +682,18 @@ function Navigation( {
 								}
 							} }
 							onCreateNew={ createUntitledEmptyNavigationMenu }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
 							/* translators: %s: The name of a menu. */
 							actionLabel={ __( "Switch to '%s'" ) }
 						/>
 						<Button
 							variant="link"
-							disabled={ ! hasManagePermissions }
+							disabled={
+								! hasManagePermissions ||
+								! hasResolvedNavigationMenus
+							}
 							href={ addQueryArgs( 'edit.php', {
 								post_type: 'wp_navigation',
 							} ) }
@@ -779,12 +791,18 @@ function Navigation( {
 								}
 							} }
 							onCreateNew={ createUntitledEmptyNavigationMenu }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
 							/* translators: %s: The name of a menu. */
 							actionLabel={ __( "Switch to '%s'" ) }
 						/>
 						<Button
 							variant="link"
-							disabled={ ! hasManagePermissions }
+							disabled={
+								! hasManagePermissions ||
+								! hasResolvedNavigationMenus
+							}
 							href={ addQueryArgs( 'edit.php', {
 								post_type: 'wp_navigation',
 							} ) }

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -24,45 +24,42 @@ function NavigationMenuSelector( {
 	onSelectClassicMenu,
 	onCreateNew,
 	actionLabel,
+	createNavigationMenuIsSuccess,
 	toggleProps = {},
 } ) {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
 	const [ selectorLabel, setSelectorLabel ] = useState( '' );
 	const [ isPressed, setIsPressed ] = useState( false );
-
-	toggleProps = {
-		...toggleProps,
-		className: 'wp-block-navigation__navigation-selector-button',
-		children: (
-			<Icon
-				icon={ isPressed ? chevronUp : chevronDown }
-				className="wp-block-navigation__navigation-selector-button__icon"
-			/>
-		),
-		onClick: () => {
-			setIsPressed( ! isPressed );
-		},
-	};
+	const [ enableOptions, setEnableOptions ] = useState( false );
+	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
 
 	actionLabel = actionLabel || createActionLabel;
 
 	const { menus: classicMenus } = useNavigationEntities();
 
 	const {
 		navigationMenus,
+		hasResolvedNavigationMenus,
+		isNavigationMenuResolved,
 		canUserCreateNavigationMenu,
-		canUserUpdateNavigationMenu,
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title } ) => {
 				const label = decodeEntities( title.rendered );
-				if ( id === currentMenuId ) {
+				if ( id === currentMenuId && ! isCreatingMenu ) {
 					setSelectorLabel( label );
+					setEnableOptions(
+						( canSwitchNavigationMenu ||
+							canUserCreateNavigationMenu ) &&
+							hasResolvedNavigationMenus &&
+							( ! isCreatingMenu ||
+								createNavigationMenuIsSuccess )
+					);
 				}
 				return {
 					value: id,
@@ -71,34 +68,63 @@ function NavigationMenuSelector( {
 				};
 			} ) || []
 		);
-	}, [ currentMenuId, navigationMenus ] );
+	}, [
+		currentMenuId,
+		navigationMenus,
+		createNavigationMenuIsSuccess,
+		isNavigationMenuResolved,
+		hasResolvedNavigationMenus,
+	] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
 	const showNavigationMenus = !! canSwitchNavigationMenu;
 	const showClassicMenus = !! canUserCreateNavigationMenu;
-	const hasManagePermissions =
-		canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
 
 	useEffect( () => {
-		if ( ! hasNavigationMenus ) {
+		if ( ! hasResolvedNavigationMenus ) {
+			setSelectorLabel( __( 'Loading options …' ) );
+		} else if ( ! hasNavigationMenus && hasResolvedNavigationMenus ) {
 			setSelectorLabel( __( 'No menus. Create one?' ) );
-		} else if ( currentMenuId === null ) {
+			setEnableOptions(
+				( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
+					hasResolvedNavigationMenus &&
+					( ! isCreatingMenu || createNavigationMenuIsSuccess )
+			);
+		} else if ( hasResolvedNavigationMenus && currentMenuId === null ) {
 			setSelectorLabel( __( 'Select another menu' ) );
+			setEnableOptions(
+				( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
+					hasResolvedNavigationMenus &&
+					( ! isCreatingMenu || createNavigationMenuIsSuccess )
+			);
 		}
-	}, [ currentMenuId, hasNavigationMenus ] );
 
-	// Show the selector if:
-	// - has switch or create permissions and there are block or classic menus.
-	// - user has create or update permissions and component should show the menu actions.
-	const showSelectMenus =
-		( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
-			( hasNavigationMenus || hasClassicMenus ) ) ||
-		hasManagePermissions;
+		if ( isCreatingMenu && createNavigationMenuIsSuccess ) {
+			setIsCreatingMenu( false );
+		}
+	}, [
+		currentMenuId,
+		hasNavigationMenus,
+		hasResolvedNavigationMenus,
+		createNavigationMenuIsSuccess,
+		isNavigationMenuResolved,
+	] );
 
-	if ( ! showSelectMenus ) {
-		return null;
-	}
+	toggleProps = {
+		...toggleProps,
+		className: 'wp-block-navigation__navigation-selector-button',
+		children: (
+			<Icon
+				icon={ isPressed ? chevronUp : chevronDown }
+				className="wp-block-navigation__navigation-selector-button__icon"
+			/>
+		),
+		onClick: () => {
+			setIsPressed( ! isPressed );
+		},
+		disabled: ! enableOptions,
+	};
 
 	return (
 		<DropdownMenu
@@ -108,7 +134,7 @@ function NavigationMenuSelector( {
 			icon={ null }
 			toggleProps={ toggleProps }
 		>
-			{ () => (
+			{ ( { onClose } ) => (
 				<>
 					{ showNavigationMenus && hasNavigationMenus && (
 						<MenuGroup label={ __( 'Menus' ) }>
@@ -128,7 +154,12 @@ function NavigationMenuSelector( {
 								return (
 									<MenuItem
 										onClick={ () => {
+											setSelectorLabel(
+												__( 'Loading options …' )
+											);
+											setEnableOptions( false );
 											onSelectClassicMenu( menu );
+											onClose();
 										} }
 										key={ menu.id }
 										aria-label={ sprintf(
@@ -143,13 +174,21 @@ function NavigationMenuSelector( {
 						</MenuGroup>
 					) }
 
-					{ hasManagePermissions && (
+					{ canUserCreateNavigationMenu && (
 						<MenuGroup label={ __( 'Tools' ) }>
-							{ canUserCreateNavigationMenu && (
-								<MenuItem onClick={ onCreateNew }>
-									{ __( 'Create new menu' ) }
-								</MenuItem>
-							) }
+							<MenuItem
+								onClick={ () => {
+									onClose();
+									onCreateNew();
+									setIsCreatingMenu( true );
+									setSelectorLabel(
+										__( 'Loading options …' )
+									);
+									setEnableOptions( false );
+								} }
+							>
+								{ __( 'Create new menu' ) }
+							</MenuItem>
 						</MenuGroup>
 					) }
 				</>