Sidebar: Restore Back buton 'go to parent' functionality (#52910)

WordPress · Jul 25, 2023 · b1278c6 · b1278c6
1 parent 4228be8
commit b1278c6
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 34 deletions.
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,10 +23,12 @@ 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 { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
+	const location = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -63,22 +65,32 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
-				history.push( {
-					postType: attributes.type,
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: attributes.type,
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: 'page',
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 		},
 		[ history ]

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
@@ -28,10 +28,15 @@ import { unlock } from '../../lock-unlock';
 const { useHistory } = unlock( routerPrivateApis );
 
 const PageItem = ( { postType = 'page', postId, ...props } ) => {
-	const linkInfo = useLink( {
-		postType,
-		postId,
-	} );
+	const linkInfo = useLink(
+		{
+			postType,
+			postId,
+		},
+		{
+			backPath: '/page',
+		}
+	);
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -11,6 +11,7 @@ import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,6 +24,8 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
@@ -31,7 +34,7 @@ export default function SidebarNavigationScreen( {
 	content,
 	footer,
 	description,
-	backPath,
+	backPath: backPathProp,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -40,6 +43,7 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
+	const location = useLocation();
 	const navigator = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
@@ -56,30 +60,24 @@ export default function SidebarNavigationScreen( {
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isRoot && ! backPath && (
+					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								if ( navigator.location.isInitial ) {
-									navigator.goToParent( { replace: true } );
+								const backPath =
+									backPathProp ?? location.state?.backPath;
+								if ( backPath ) {
+									navigator.goTo( backPath, {
+										isBack: true,
+									} );
 								} else {
-									navigator.goBack();
+									navigator.goToParent();
 								}
 							} }
 							icon={ icon }
 							label={ __( 'Back' ) }
 							showTooltip={ false }
 						/>
 					) }
-					{ ! isRoot && backPath && (
-						<SidebarButton
-							onClick={ () =>
-								navigator.goTo( backPath, { isBack: true } )
-							}
-							icon={ icon }
-							label={ __( 'Back' ) }
-							showTooltip={ false }
-						/>
-					) }
 					{ isRoot && (
 						<SidebarButton
 							icon={ icon }