Navigation: Fallback to a classic menu if one is available

packages/block-library/src/navigation/edit/index.js

@@ -107,7 +107,7 @@ function Navigation( {
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
-	useNavigationEntities();
+	const { menus: classicMenus } = useNavigationEntities();
 
 	const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] =
 		useNavigationNotice( {
@@ -216,6 +216,20 @@ function Navigation( {
 	const navMenuResolvedButMissing =
 		hasResolvedNavigationMenus && isNavigationMenuMissing;
 
+	const {
+		convert: convertClassicMenu,
+		status: classicMenuConversionStatus,
+		error: classicMenuConversionError,
+	} = useConvertClassicToBlockMenu( clientId );
+
+	const isConvertingClassicMenu =
+		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
+
+	// Only autofallback to published menus.
+	const fallbackNavigationMenus = navigationMenus?.filter(
+		( menu ) => menu.status === 'publish'
+	);
+
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
 	// - the are uncontrolled inner blocks already present in the block.
 	// - the user is creating a new menu.
@@ -228,23 +242,17 @@ function Navigation( {
 			hasUncontrolledInnerBlocks ||
 			isCreatingNavigationMenu ||
 			ref ||
-			! navigationMenus?.length
+			! fallbackNavigationMenus?.length
 		) {
 			return;
 		}
 
-		navigationMenus.sort( ( menuA, menuB ) => {
+		fallbackNavigationMenus.sort( ( menuA, menuB ) => {
 			const menuADate = new Date( menuA.date );
 			const menuBDate = new Date( menuB.date );
 			return menuADate.getTime() < menuBDate.getTime();
 		} );
 
-		// Only autofallback to published menus.
-		const fallbackNavigationMenus = navigationMenus.filter(
-			( menu ) => menu.status === 'publish'
-		);
-		if ( fallbackNavigationMenus.length === 0 ) return;
-
 		/**
 		 *  This fallback displays (both in editor and on front)
 		 *  a list of pages only if no menu (user assigned or
@@ -256,16 +264,26 @@ function Navigation( {
 		setRef( fallbackNavigationMenus[ 0 ].id );
 	}, [ navigationMenus ] );
 
-	const navRef = useRef();
+	useEffect( () => {
+		if (
+			! hasResolvedNavigationMenus ||
+			isConvertingClassicMenu ||
+			fallbackNavigationMenus?.length > 0 ||
+			classicMenus?.length !== 1
+		) {
+			return false;
+		}
 
-	const {
-		convert: convertClassicMenu,
-		status: classicMenuConversionStatus,
-		error: classicMenuConversionError,
-	} = useConvertClassicToBlockMenu( clientId );
+		// If there's non fallback navigation menus and
+		// only one classic menu then create a new navigation menu based on it.
+		convertClassicMenu(
+			classicMenus[ 0 ].id,
+			classicMenus[ 0 ].name,
+			'publish'
+		);
+	}, [ hasResolvedNavigationMenus ] );
 
-	const isConvertingClassicMenu =
-		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
+	const navRef = useRef();
 
 	// The standard HTML5 tag for the block wrapper.
 	const TagName = 'nav';
@@ -280,10 +298,11 @@ function Navigation( {
 		! isCreatingNavigationMenu &&
 		! isConvertingClassicMenu &&
 		hasResolvedNavigationMenus &&
+		classicMenus?.length === 0 &&
 		! hasUncontrolledInnerBlocks;
 
 	useEffect( () => {
-		if ( isPlaceholder && ! ref ) {
+		if ( isPlaceholder ) {
 			/**
 			 *  this fallback only displays (both in editor and on front)
 			 *  the list of pages block if no menu is available as a fallback.
@@ -642,7 +661,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -723,7 +743,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -808,7 +829,8 @@ function Navigation( {
 					onSelectClassicMenu={ async ( classicMenu ) => {
 						const navMenu = await convertClassicMenu(
 							classicMenu.id,
-							classicMenu.name
+							classicMenu.name,
+							'draft'
 						);
 						if ( navMenu ) {
 							handleUpdateMenu( navMenu.id, {
@@ -836,7 +858,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {

packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -17,6 +17,10 @@ export const CLASSIC_MENU_CONVERSION_ERROR = 'error';
 export const CLASSIC_MENU_CONVERSION_PENDING = 'pending';
 export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
 
+// This is needed to ensure that multiple components using this hook
+// do not import the same classic menu twice.
+let classicMenuBeingConvertedId = null;
+
 function useConvertClassicToBlockMenu( clientId ) {
 	/*
 	 * The wp_navigation post is created as a draft so the changes on the frontend and
@@ -32,7 +36,11 @@ function useConvertClassicToBlockMenu( clientId ) {
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
 	const [ error, setError ] = useState( null );
 
-	async function convertClassicMenuToBlockMenu( menuId, menuName ) {
+	async function convertClassicMenuToBlockMenu(
+		menuId,
+		menuName,
+		postStatus = 'publish'
+	) {
 		let navigationMenu;
 		let classicMenuItems;
 
@@ -76,7 +84,8 @@ function useConvertClassicToBlockMenu( clientId ) {
 		try {
 			navigationMenu = await createNavigationMenu(
 				menuName,
-				innerBlocks
+				innerBlocks,
+				postStatus
 			);
 
 			/**
@@ -91,7 +100,7 @@ function useConvertClassicToBlockMenu( clientId ) {
 				'wp_navigation',
 				navigationMenu.id,
 				{
-					status: 'publish',
+					status: postStatus,
 				},
 				{ throwOnError: true }
 			);
@@ -111,7 +120,15 @@ function useConvertClassicToBlockMenu( clientId ) {
 		return navigationMenu;
 	}
 
-	const convert = useCallback( async ( menuId, menuName ) => {
+	const convert = useCallback( async ( menuId, menuName, postStatus ) => {
+		// Check whether this classic menu is being imported already.
+		if ( classicMenuBeingConvertedId === menuId ) {
+			return;
+		}
+
+		// Set the ID for the currently importing classic menu.
+		isConvertingClassicMenu = menuId;
+
 		if ( ! menuId || ! menuName ) {
 			setError( 'Unable to convert menu. Missing menu details.' );
 			setStatus( CLASSIC_MENU_CONVERSION_ERROR );
@@ -121,13 +138,20 @@ function useConvertClassicToBlockMenu( clientId ) {
 		setStatus( CLASSIC_MENU_CONVERSION_PENDING );
 		setError( null );
 
-		return await convertClassicMenuToBlockMenu( menuId, menuName )
+		return await convertClassicMenuToBlockMenu(
+			menuId,
+			menuName,
+			postStatus
+		)
 			.then( ( navigationMenu ) => {
 				setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+				// Reset the ID for the currently importing classic menu.
+				isConvertingClassicMenu = null;
 				return navigationMenu;
 			} )
 			.catch( ( err ) => {
 				setError( err?.message );
+				// Reset the ID for the currently importing classic menu.
 				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
 
 				// Rethrow error for debugging.

packages/block-library/src/navigation/edit/use-create-navigation-menu.js

@@ -16,10 +16,7 @@ export const CREATE_NAVIGATION_MENU_ERROR = 'error';
 export const CREATE_NAVIGATION_MENU_PENDING = 'pending';
 export const CREATE_NAVIGATION_MENU_IDLE = 'idle';
 
-export default function useCreateNavigationMenu(
-	clientId,
-	postStatus = 'publish'
-) {
+export default function useCreateNavigationMenu( clientId ) {
 	const [ status, setStatus ] = useState( CREATE_NAVIGATION_MENU_IDLE );
 	const [ value, setValue ] = useState( null );
 	const [ error, setError ] = useState( null );
@@ -30,7 +27,7 @@ export default function useCreateNavigationMenu(
 	// This callback uses data from the two placeholder steps and only creates
 	// a new navigation menu when the user completes the final step.
 	const create = useCallback(
-		async ( title = null, blocks = [] ) => {
+		async ( title = null, blocks = [], postStatus ) => {
 			// Guard against creating Navigations without a title.
 			// Note you can pass no title, but if one is passed it must be
 			// a string otherwise the title may end up being empty.

packages/block-library/src/navigation/index.php

@@ -248,14 +248,109 @@ function block_core_navigation_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
+/**
+ * Get the classic navigation menu to use as a fallback.
+ *
+ * @return object WP_Term The classic navigation.
+ */
+function block_core_navigation_get_classic_menu_fallback() {
+	$classic_nav_menus = wp_get_nav_menus();
+
+	// If menus exist.
+	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) && count( $classic_nav_menus ) === 1 ) {
+		// Use the first classic menu only. Handles simple use case where user has a single
+		// classic menu and switches to a block theme. In future this maybe expanded to
+		// determine the most appropriate classic menu to be used based on location.
+		return $classic_nav_menus[0];
+	}
+}
+
+/**
+ * Converts a classic navigation to blocks.
+ *
+ * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
+	// BEGIN: Code that already exists in wp_nav_menu().
+	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
+
+	// Set up the $menu_item variables.
+	_wp_menu_item_classes_by_context( $menu_items );
+
+	$sorted_menu_items = array();
+	foreach ( (array) $menu_items as $menu_item ) {
+		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
+	}
+
+	unset( $menu_items, $menu_item );
+
+	// END: Code that already exists in wp_nav_menu().
+
+	$menu_items_by_parent_id = array();
+	foreach ( $sorted_menu_items as $menu_item ) {
+		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
+	}
+
+	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
+		isset( $menu_items_by_parent_id[0] )
+			? $menu_items_by_parent_id[0]
+			: array(),
+		$menu_items_by_parent_id
+	);
+
+	return $inner_blocks;
+}
+
+/**
+ * If there's a the classic menu then use it as a fallback.
+ *
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_maybe_use_classic_menu_fallback() {
+	// See if we have a classic menu.
+	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
+
+	if ( ! $classic_nav_menu ) {
+		return;
+	}
+
+	// If we have a classic menu then convert it to blocks.
+	$classic_nav_menu_blocks            = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
+	$classic_nav_menu_blocks_serialized = serialize_blocks( $classic_nav_menu_blocks );
+
+	if ( empty( $classic_nav_menu_blocks_serialized ) ) {
+		return;
+	}
+
+	// Create a new navigation menu from the classic menu.
+	$wp_insert_post_result = wp_insert_post(
+		array(
+			'post_content' => $classic_nav_menu_blocks_serialized,
+			'post_title'   => $classic_nav_menu->slug,
+			'post_name'    => $classic_nav_menu->slug,
+			'post_status'  => 'publish',
+			'post_type'    => 'wp_navigation',
+		),
+		true // So that we can check whether the result is an error.
+	);
+
+	if ( is_wp_error( $wp_insert_post_result ) ) {
+		return;
+	}
+
+	// Fetch the most recently published navigation which will be the classic one created above.
+	return block_core_navigation_get_most_recently_published_navigation();
+}
 
 /**
  * Finds the most recently published `wp_navigation` Post.
  *
  * @return WP_Post|null the first non-empty Navigation or null.
  */
 function block_core_navigation_get_most_recently_published_navigation() {
-	// We default to the most recently created menu.
+
+	// Default to the most recently created menu.
 	$parsed_args = array(
 		'post_type'      => 'wp_navigation',
 		'no_found_rows'  => true,
@@ -322,7 +417,13 @@ function block_core_navigation_get_fallback_blocks() {
 
 	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
-	// Prefer using the first non-empty Navigation as fallback if available.
+	// If there are no navigation posts then try to find a classic menu
+	// and convert it into a block based navigation menu.
+	if ( ! $navigation_post ) {
+		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
+	}
+
+	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
 		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( parse_blocks( $navigation_post->post_content ) );