Site Editor: Make sidebar back button go back instead of up if possible

WordPress · Jul 13, 2023 · e83e1af · e83e1af
1 parent 1e5d49e
commit e83e1af
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 72 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -4,7 +4,6 @@
 import {
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -41,7 +40,7 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
-	const { goTo } = useNavigator();
+	const navigator = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
 
@@ -58,16 +57,24 @@ export default function SidebarNavigationScreen( {
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
 					{ ! isRoot && ! backPath && (
-						<NavigatorToParentButton
-							as={ SidebarButton }
-							icon={ isRTL() ? chevronRight : chevronLeft }
+						<SidebarButton
+							onClick={ () => {
+								if ( navigator.location.isInitial ) {
+									navigator.goToParent( { replace: true } );
+								} else {
+									navigator.goBack();
+								}
+							} }
+							icon={ icon }
 							label={ __( 'Back' ) }
 							showTooltip={ false }
 						/>
 					) }
 					{ ! isRoot && backPath && (
 						<SidebarButton
-							onClick={ () => goTo( backPath, { isBack: true } ) }
+							onClick={ () =>
+								navigator.goTo( backPath, { isBack: true } )
+							}
 							icon={ icon }
 							label={ __( 'Back' ) }
 							showTooltip={ false }

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -36,6 +36,12 @@ export function getPathFromURL( urlParams ) {
 	return path;
 }
 
+function isSubset( subset, superset ) {
+	return Object.entries( subset ).every( ( [ key, value ] ) => {
+		return superset[ key ] === value;
+	} );
+}
+
 export default function useSyncPathWithURL() {
 	const history = useHistory();
 	const { params: urlParams } = useLocation();
@@ -44,76 +50,77 @@ export default function useSyncPathWithURL() {
 		params: navigatorParams,
 		goTo,
 	} = useNavigator();
-	const currentUrlParams = useRef( urlParams );
-	const currentPath = useRef( navigatorLocation.path );
 	const isMounting = useRef( true );
 
-	useEffect( () => {
-		// The navigatorParams are only initially filled properly when the
-		// navigator screens mount. so we ignore the first synchronisation.
-		if ( isMounting.current ) {
-			isMounting.current = false;
-			return;
-		}
-
-		function updateUrlParams( newUrlParams ) {
-			if (
-				Object.entries( newUrlParams ).every( ( [ key, value ] ) => {
-					return currentUrlParams.current[ key ] === value;
-				} )
-			) {
+	useEffect(
+		() => {
+			// The navigatorParams are only initially filled properly when the
+			// navigator screens mount. so we ignore the first synchronisation.
+			if ( isMounting.current ) {
+				isMounting.current = false;
 				return;
 			}
-			const updatedParams = {
-				...currentUrlParams.current,
-				...newUrlParams,
-			};
-			currentUrlParams.current = updatedParams;
-			history.push( updatedParams );
-		}
 
-		if ( navigatorParams?.postType && navigatorParams?.postId ) {
-			updateUrlParams( {
-				postType: navigatorParams?.postType,
-				postId: navigatorParams?.postId,
-				path: undefined,
-			} );
-		} else if (
-			navigatorLocation.path.startsWith( '/page/' ) &&
-			navigatorParams?.postId
-		) {
-			updateUrlParams( {
-				postType: 'page',
-				postId: navigatorParams?.postId,
-				path: undefined,
-			} );
-		} else if ( navigatorLocation.path === '/patterns' ) {
-			updateUrlParams( {
-				postType: undefined,
-				postId: undefined,
-				canvas: undefined,
-				path: navigatorLocation.path,
-			} );
-		} else {
-			updateUrlParams( {
-				postType: undefined,
-				postId: undefined,
-				categoryType: undefined,
-				categoryId: undefined,
-				path:
-					navigatorLocation.path === '/'
-						? undefined
-						: navigatorLocation.path,
-			} );
-		}
-	}, [ navigatorLocation?.path, navigatorParams, history ] );
+			function updateUrlParams( newUrlParams ) {
+				if ( isSubset( newUrlParams, urlParams ) ) {
+					return;
+				}
+				const updatedParams = {
+					...urlParams,
+					...newUrlParams,
+				};
+				history.push( updatedParams );
+			}
 
-	useEffect( () => {
-		currentUrlParams.current = urlParams;
-		const path = getPathFromURL( urlParams );
-		if ( currentPath.current !== path ) {
-			currentPath.current = path;
-			goTo( path );
-		}
-	}, [ urlParams, goTo ] );
+			if ( navigatorParams?.postType && navigatorParams?.postId ) {
+				updateUrlParams( {
+					postType: navigatorParams?.postType,
+					postId: navigatorParams?.postId,
+					path: undefined,
+				} );
+			} else if (
+				navigatorLocation.path.startsWith( '/page/' ) &&
+				navigatorParams?.postId
+			) {
+				updateUrlParams( {
+					postType: 'page',
+					postId: navigatorParams?.postId,
+					path: undefined,
+				} );
+			} else if ( navigatorLocation.path === '/patterns' ) {
+				updateUrlParams( {
+					postType: undefined,
+					postId: undefined,
+					canvas: undefined,
+					path: navigatorLocation.path,
+				} );
+			} else {
+				updateUrlParams( {
+					postType: undefined,
+					postId: undefined,
+					categoryType: undefined,
+					categoryId: undefined,
+					path:
+						navigatorLocation.path === '/'
+							? undefined
+							: navigatorLocation.path,
+				} );
+			}
+		},
+		// Trigger only when navigator changes to prevent infinite loops.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ navigatorLocation?.path, navigatorParams ]
+	);
+
+	useEffect(
+		() => {
+			const path = getPathFromURL( urlParams );
+			if ( navigatorLocation.path !== path ) {
+				goTo( path );
+			}
+		},
+		// Trigger only when URL changes to prevent infinite loops.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ urlParams ]
+	);
 }