Move conversion process to higher level component

WordPress · Feb 17, 2022 · c62810b · c62810b
1 parent 9e36405
commit c62810b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -56,6 +56,7 @@ import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 import useNavigationNotice from './use-navigation-notice';
 import OverlayMenuIcon from './overlay-menu-icon';
+import useConvertClassicToBlockMenu from './use-convert-classic-menu-to-block-menu';
 
 const EMPTY_ARRAY = [];
 
@@ -302,6 +303,11 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
+	const {
+		convert,
+		state: classicMenuConversionState,
+	} = useConvertClassicToBlockMenu( clientId );
+
 	// Spacer block needs orientation from context. This is a patch until
 	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
 	useEffect( () => {
@@ -385,6 +391,15 @@ function Navigation( {
 		ref,
 	] );
 
+	useEffect( () => {
+		if (
+			! classicMenuConversionState?.isFetching &&
+			classicMenuConversionState.navMenu
+		) {
+			setRef( classicMenuConversionState.navMenu?.id );
+		}
+	}, [ classicMenuConversionState ] );
+
 	const startWithEmptyMenu = useCallback( () => {
 		registry.batch( () => {
 			if ( navigationArea ) {
@@ -495,6 +510,13 @@ function Navigation( {
 											setRef( id );
 											onClose();
 										} }
+										onSelectClassic={ ( classicMenu ) => {
+											onClose();
+											convert(
+												classicMenu.id,
+												classicMenu.name
+											);
+										} }
 										onCreateNew={ startWithEmptyMenu }
 										/* translators: %s: The name of a menu. */
 										actionLabel={ __( "Switch to '%s'" ) }
@@ -660,13 +682,16 @@ function Navigation( {
 				<nav { ...blockProps }>
 					{ isPlaceholderShown && (
 						<PlaceholderComponent
-							onFinish={ ( post ) => {
+							onFinish={ ( post, requiresConversion = false ) => {
 								setIsPlaceholderShown( false );
 
-								if ( post ) {
+								if ( requiresConversion ) {
+									convert( post.id, post.name );
+								}
+								if ( ! requiresConversion && post ) {
 									setRef( post.id );
+									selectBlock( clientId );
 								}
-								selectBlock( clientId );
 							} }
 							canSwitchNavigationMenu={ canSwitchNavigationMenu }
 							hasResolvedNavigationMenus={

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -11,12 +11,10 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
-import { useEffect } from '@wordpress/element';
-import useConvertClassicToBlockMenu from './use-convert-classic-menu-to-block-menu';
 
 export default function NavigationMenuSelector( {
-	clientId,
 	onSelect,
+	onSelectClassic,
 	onCreateNew,
 	showManageActions = false,
 	actionLabel,
@@ -28,28 +26,13 @@ export default function NavigationMenuSelector( {
 
 	const { menus: classicMenus } = useNavigationEntities();
 
-	const {
-		convert,
-		state: classicMenuConversionState,
-	} = useConvertClassicToBlockMenu( clientId );
-
 	const {
 		navigationMenus,
 		canUserCreateNavigationMenu,
 		canUserUpdateNavigationMenu,
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
-	// TODO: lift this up into parent component in order that
-	useEffect( () => {
-		if (
-			! classicMenuConversionState?.isFetching &&
-			classicMenuConversionState.navMenu
-		) {
-			onSelect( classicMenuConversionState.navMenu );
-		}
-	}, [ classicMenuConversionState ] );
-
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
 	const showNavigationMenus = !! canSwitchNavigationMenu;
@@ -91,7 +74,7 @@ export default function NavigationMenuSelector( {
 						return (
 							<MenuItem
 								onClick={ () => {
-									convert( menu.id, menu.name );
+									onSelectClassic( menu );
 								} }
 								key={ menu.id }
 								aria-label={ sprintf(

diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -89,10 +89,17 @@ export default function NavigationPlaceholder( {
 										} }
 										popoverProps={ { isAlternate: true } }
 									>
-										{ () => (
+										{ ( { onClose } ) => (
 											<NavigationMenuSelector
 												clientId={ clientId }
-												onSelect={ onFinish }
+												onSelect={ ( menu ) => {
+													onClose();
+													onFinish( menu );
+												} }
+												onSelectClassic={ ( menu ) => {
+													onClose();
+													onFinish( menu, true );
+												} }
 											/>
 										) }
 									</DropdownMenu>