Eliminate usages of useNavigator()

WordPress · Apr 15, 2024 · c592f4c · c592f4c
1 parent 1b4e054
commit c592f4c
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 213 deletions.
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -40,15 +40,13 @@ export default function useLayoutAreas() {
 	// Note: Since "sidebar" is not yet supported here,
 	// returning undefined from "mobile" means show the sidebar.
 
-	// Regular page
+	// Page list
 	if ( path === '/page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
 			key: 'pages-list',
 			areas: {
-				sidebar: postId ? (
-					<SidebarNavigationScreenPage />
-				) : (
+				sidebar: (
 					<SidebarNavigationScreen
 						title={ __( 'Manage pages' ) }
 						content={ <DataViewsSidebarContent /> }
@@ -60,7 +58,6 @@ export default function useLayoutAreas() {
 						isLoading={ isSiteEditorLoading }
 						onClick={ () =>
 							history.push( {
-								path,
 								postType: 'page',
 								postId,
 								canvas: 'edit',
@@ -88,6 +85,8 @@ export default function useLayoutAreas() {
 			sidebar = <SidebarNavigationScreenPattern />;
 		} else if ( postType === 'wp_template' ) {
 			sidebar = <SidebarNavigationScreenTemplate />;
+		} else if ( postType === 'page' ) {
+			sidebar = <SidebarNavigationScreenPage />;
 		} else {
 			sidebar = <SidebarNavigationScreenNavigationMenu />;
 		}

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -4,12 +4,10 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
-
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -22,17 +20,14 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 export default function SidebarNavigationScreenMain() {
-	const { location } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 
 	// Clear the editor canvas container view when accessing the main navigation screen.
 	useEffect( () => {
-		if ( location?.path === '/' ) {
-			setEditorCanvasContainerView( undefined );
-		}
-	}, [ setEditorCanvasContainerView, location?.path ] );
+		setEditorCanvasContainerView( undefined );
+	}, [ setEditorCanvasContainerView ] );
 
 	return (
 		<SidebarNavigationScreen

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -2,13 +2,11 @@
  * WordPress dependencies
  */
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalUseNavigator as useNavigator,
-	Spinner,
-} from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -18,13 +16,16 @@ import ScreenNavigationMoreMenu from './more-menu';
 import SingleNavigationMenu from './single-navigation-menu';
 import useNavigationMenuHandlers from './use-navigation-menu-handlers';
 import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export const postType = `wp_navigation`;
 
 export default function SidebarNavigationScreenNavigationMenu() {
 	const {
 		params: { postId },
-	} = useNavigator();
+	} = useLocation();
 
 	const { record: navigationMenu, isResolving } = useEntityRecord(
 		'postType',

diff --git a/.../src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/.../src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
@@ -2,24 +2,25 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { postType } from '.';
 import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
 
-function useDeleteNavigationMenu() {
-	const { goTo } = useNavigator();
+const { useHistory } = unlock( routerPrivateApis );
 
+function useDeleteNavigationMenu() {
 	const { deleteEntityRecord } = useDispatch( coreStore );
-
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
+	const history = useHistory();
 
 	const handleDelete = async ( navigationMenu ) => {
 		const postId = navigationMenu?.id;
@@ -41,7 +42,7 @@ function useDeleteNavigationMenu() {
 					type: 'snackbar',
 				}
 			);
-			goTo( '/navigation' );
+			history.push( { path: '/navigation' } );
 		} catch ( error ) {
 			createErrorNotice(
 				sprintf(
@@ -132,8 +133,7 @@ function useSaveNavigationMenu() {
 }
 
 function useDuplicateNavigationMenu() {
-	const { goTo } = useNavigator();
-
+	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const { createSuccessNotice, createErrorNotice } =
@@ -165,7 +165,7 @@ function useDuplicateNavigationMenu() {
 				createSuccessNotice( __( 'Duplicated Navigation menu' ), {
 					type: 'snackbar',
 				} );
-				goTo( `/navigation/${ postType }/${ savedRecord.id }` );
+				history.push( { postType, postId: savedRecord.id } );
 			}
 		} catch ( error ) {
 			createErrorNotice(

diff --git a/...ges/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/...ges/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
@@ -23,12 +23,11 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
-import { getPathFromURL } from '../sync-state-with-url/use-sync-path-with-url';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
-	const location = useLocation();
+	const { params } = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -74,7 +73,7 @@ export default function LeafMoreMenu( props ) {
 						} ),
 					},
 					{
-						backPath: getPathFromURL( location.params ),
+						backPath: params,
 					}
 				);
 			}
@@ -88,12 +87,12 @@ export default function LeafMoreMenu( props ) {
 						} ),
 					},
 					{
-						backPath: getPathFromURL( location.params ),
+						backPath: params,
 					}
 				);
 			}
 		},
-		[ history ]
+		[ history, params ]
 	);
 
 	return (

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 	ExternalLink,
 	__experimentalTruncate as Truncate,
@@ -29,15 +28,15 @@ import SidebarButton from '../sidebar-button';
 import PageDetails from './page-details';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { PostActions } = unlock( editorPrivateApis );
 
 export default function SidebarNavigationScreenPage( { backPath } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const history = useHistory();
 	const {
 		params: { postId },
-	} = useNavigator();
+	} = useLocation();
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'page',
@@ -80,7 +79,7 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 				canvas: 'view',
 			} );
 		}
-	}, [ hasResolved, history ] );
+	}, [ hasResolved, record, history ] );
 
 	const onActionPerformed = useCallback(
 		( actionId, items ) => {

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
 import { getQueryArgs } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -19,11 +19,14 @@ import { unlock } from '../../lock-unlock';
 import TemplateActions from '../template-actions';
 import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreenPattern() {
-	const navigator = useNavigator();
+	const history = useHistory();
+	const location = useLocation();
 	const {
 		params: { postType, postId },
-	} = navigator;
+	} = location;
 	const { categoryType } = getQueryArgs( window.location.href );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
@@ -36,8 +39,8 @@ export default function SidebarNavigationScreenPattern() {
 	// page and the back button should return them to that list page.
 	const backPath =
 		! categoryType && postType === TEMPLATE_PART_POST_TYPE
-			? '/wp_template_part/all'
-			: '/patterns';
+			? { path: '/wp_template_part/all' }
+			: { path: '/patterns' };
 
 	return (
 		<SidebarNavigationScreen
@@ -48,7 +51,7 @@ export default function SidebarNavigationScreenPattern() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( backPath );
+							history.push( backPath );
 						} }
 					/>
 					<SidebarButton

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -4,11 +4,10 @@
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
-import {
-	__experimentalUseNavigator as useNavigator,
-	Icon,
-} from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
 /**
  * Internal dependencies
  */
@@ -23,6 +22,8 @@ import TemplateActions from '../template-actions';
 import HomeTemplateDetails from './home-template-details';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
 function useTemplateDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
@@ -94,10 +95,10 @@ function useTemplateDetails( postType, postId ) {
 }
 
 export default function SidebarNavigationScreenTemplate() {
-	const navigator = useNavigator();
+	const history = useHistory();
 	const {
 		params: { postType, postId },
-	} = navigator;
+	} = useLocation();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { title, content, description, footer } = useTemplateDetails(
 		postType,
@@ -114,7 +115,7 @@ export default function SidebarNavigationScreenTemplate() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( '/' + postType );
+							history.push( { path: '/' + postType } );
 						} }
 					/>
 					<SidebarButton

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -30,7 +30,7 @@ const config = {
 		description: __(
 			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
 		),
-		backPath: '/patterns',
+		backPath: { path: '/patterns' },
 		contentTitle: __( 'All template parts' ),
 	},
 };

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import {
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { isRTL, __, sprintf } from '@wordpress/i18n';
@@ -29,7 +28,26 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 
-const { useLocation } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+function getBackPath( params ) {
+	// From a data view path we navigate back to root
+	if ( params.path ) {
+		return {};
+	}
+
+	// From edit screen for a post we navigate back to post-type specific data view
+	if ( params.postType === 'page' ) {
+		return { path: '/page', postId: params.postId };
+	} else if ( params.postType === 'wp_template' ) {
+		return { path: '/wp_template', postId: params.postId };
+	} else if ( params.postType === 'wp_navigation' ) {
+		return { path: '/navigation', postId: params.postId };
+	}
+
+	// Go back to root by default
+	return {};
+}
 
 export default function SidebarNavigationScreen( {
 	isRoot,
@@ -60,7 +78,7 @@ export default function SidebarNavigationScreen( {
 		[]
 	);
 	const location = useLocation();
-	const navigator = useNavigator();
+	const history = useHistory();
 	const icon = isRTL() ? chevronRight : chevronLeft;
 
 	return (
@@ -86,11 +104,11 @@ export default function SidebarNavigationScreen( {
 								const backPath =
 									backPathProp ?? location.state?.backPath;
 								if ( backPath ) {
-									navigator.goTo( backPath, {
-										isBack: true,
-									} );
+									history.push( backPath );
 								} else {
-									navigator.goToParent();
+									history.push(
+										getBackPath( location.params )
+									);
 								}
 							} }
 							icon={ icon }