diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 4b87c1fc23874..6fec9356b65ed 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -231,10 +231,9 @@ function Navigation( { const isDraftNavigationMenu = navigationMenu?.status === 'draft'; const { - convert, + convert: convertClassicMenu, status: classicMenuConversionStatus, error: classicMenuConversionError, - value: classicMenuConversionResult, } = useConvertClassicToBlockMenu( clientId ); const isConvertingClassicMenu = @@ -328,11 +327,7 @@ function Navigation( { speak( __( 'Classic menu importing.' ) ); } - if ( - classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS && - classicMenuConversionResult - ) { - handleUpdateMenu( classicMenuConversionResult?.id ); + if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS ) { showClassicMenuConversionNotice( __( 'Classic menu imported successfully.' ) ); @@ -345,11 +340,7 @@ function Navigation( { ); speak( __( 'Classic menu import failed.' ) ); } - }, [ - classicMenuConversionStatus, - classicMenuConversionResult, - classicMenuConversionError, - ] ); + }, [ classicMenuConversionStatus, classicMenuConversionError ] ); // Spacer block needs orientation from context. This is a patch until // https://github.com/WordPress/gutenberg/issues/36197 is addressed. @@ -683,9 +674,15 @@ function Navigation( { handleUpdateMenu( menuId ); setShouldFocusNavigationSelector( true ); } } - onSelectClassicMenu={ ( classicMenu ) => { - convert( classicMenu.id, classicMenu.name ); - setShouldFocusNavigationSelector( true ); + onSelectClassicMenu={ async ( classicMenu ) => { + const navMenu = await convertClassicMenu( + classicMenu.id, + classicMenu.name + ); + if ( navMenu ) { + handleUpdateMenu( navMenu.id ); + setShouldFocusNavigationSelector( true ); + } } } onCreateEmpty={ () => createNavigationMenu( '', [] ) } /> @@ -707,9 +704,17 @@ function Navigation( { handleUpdateMenu( menuId ); setShouldFocusNavigationSelector( true ); } } - onSelectClassicMenu={ ( classicMenu ) => { - convert( classicMenu.id, classicMenu.name ); - setShouldFocusNavigationSelector( true ); + onSelectClassicMenu={ async ( classicMenu ) => { + const navMenu = await convertClassicMenu( + classicMenu.id, + classicMenu.name + ); + if ( navMenu ) { + handleUpdateMenu( navMenu.id ); + setShouldFocusNavigationSelector( + true + ); + } } } onCreateNew={ resetToEmptyBlock } /* translators: %s: The name of a menu. */ diff --git a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js index 928ccc76209c2..9edb3d96a5454 100644 --- a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js +++ b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js @@ -23,7 +23,6 @@ function useConvertClassicToBlockMenu( clientId ) { const registry = useRegistry(); const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE ); - const [ value, setValue ] = useState( null ); const [ error, setError ] = useState( null ); async function convertClassicMenuToBlockMenu( menuId, menuName ) { @@ -88,47 +87,42 @@ function useConvertClassicToBlockMenu( clientId ) { return navigationMenu; } - const convert = useCallback( - ( menuId, menuName ) => { - if ( ! menuId || ! menuName ) { - setError( 'Unable to convert menu. Missing menu details.' ); + const convert = useCallback( async ( menuId, menuName ) => { + if ( ! menuId || ! menuName ) { + setError( 'Unable to convert menu. Missing menu details.' ); + setStatus( CLASSIC_MENU_CONVERSION_ERROR ); + return; + } + + setStatus( CLASSIC_MENU_CONVERSION_PENDING ); + setError( null ); + + return await convertClassicMenuToBlockMenu( menuId, menuName ) + .then( ( navigationMenu ) => { + setStatus( CLASSIC_MENU_CONVERSION_SUCCESS ); + return navigationMenu; + } ) + .catch( ( err ) => { + setError( err?.message ); setStatus( CLASSIC_MENU_CONVERSION_ERROR ); - return; - } - - setStatus( CLASSIC_MENU_CONVERSION_PENDING ); - setValue( null ); - setError( null ); - - convertClassicMenuToBlockMenu( menuId, menuName ) - .then( ( navMenu ) => { - setValue( navMenu ); - setStatus( CLASSIC_MENU_CONVERSION_SUCCESS ); - } ) - .catch( ( err ) => { - setError( err?.message ); - setStatus( CLASSIC_MENU_CONVERSION_ERROR ); - - // Rethrow error for debugging. - throw new Error( - sprintf( - // translators: %s: the name of a menu (e.g. Header navigation). - __( `Unable to create Navigation Menu "%s".` ), - menuName - ), - { - cause: err, - } - ); - } ); - }, - [ clientId ] - ); + + // Rethrow error for debugging. + throw new Error( + sprintf( + // translators: %s: the name of a menu (e.g. Header navigation). + __( `Unable to create Navigation Menu "%s".` ), + menuName + ), + { + cause: err, + } + ); + } ); + }, [] ); return { convert, status, - value, error, }; }