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

WordPress · Jul 25, 2023 · 1a67dbb · 1a67dbb
1 parent 560bc18
commit 1a67dbb
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 }