Have useNavigateToPreviousEntityRecord rely on location state

packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js

@@ -9,18 +9,20 @@ import { useCallback } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 export default function useNavigateToEntityRecord() {
 	const history = useHistory();
+	const { query } = useLocation();
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
 			history.navigate(
-				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`
+				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`,
+				{ state: { priorCanvas: query.canvas } }
 			);
 		},
-		[ history ]
+		[ history, query.canvas ]
 	);
 
 	return onNavigateToEntityRecord;

packages/edit-site/src/components/block-editor/use-site-editor-settings.js

@@ -4,7 +4,6 @@
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -18,22 +17,16 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function useNavigateToPreviousEntityRecord() {
 	const location = useLocation();
-	const previousLocation = usePrevious( location );
 	const history = useHistory();
-	const goBack = useMemo( () => {
+	return useMemo( () => {
 		const isFocusMode =
 			location.query.focusMode ||
 			( location?.params?.postId &&
 				FOCUSABLE_ENTITIES.includes( location?.params?.postType ) );
-		const didComeFromEditorCanvas =
-			previousLocation?.query.canvas === 'edit';
-		const showBackButton = isFocusMode && didComeFromEditorCanvas;
+		const { priorCanvas } = location.state || {};
+		const showBackButton = isFocusMode && priorCanvas === 'edit';
 		return showBackButton ? () => history.back() : undefined;
-		// `previousLocation` changes when the component updates for any reason, not
-		// just when location changes. Until this is fixed we can't add it to deps. See
-		// https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465.
 	}, [ location, history ] );
-	return goBack;
 }
 
 export function useSpecificEditorSettings() {

packages/edit-site/src/components/maybe-editor/index.js → packages/edit-site/src/components/hybrid-preview/index.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 
 import Editor from '../editor';
 
-export function MaybeEditor( { showEditor = true } ) {
+export function HybridPreview() {
 	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
 		const { getEntityRecord, getCurrentTheme } = select( coreStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
@@ -24,7 +24,7 @@ export function MaybeEditor( { showEditor = true } ) {
 	}, [] );
 
 	// If theme is block based, return the Editor, otherwise return the site preview.
-	return isBlockBasedTheme || showEditor ? (
+	return isBlockBasedTheme ? (
 		<Editor />
 	) : (
 		<iframe

packages/edit-site/src/components/site-editor-routes/home.js

@@ -2,14 +2,14 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import { MaybeEditor } from '../maybe-editor';
+import { HybridPreview } from '../hybrid-preview';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <MaybeEditor showEditor={ false } />,
+		preview: <HybridPreview />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };

packages/edit-site/src/components/site-editor-routes/template-item.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
 	name: 'template-item',
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };

packages/edit-site/src/components/site-editor-routes/template-part-item.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
 	name: 'template-part-item',
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };

packages/router/src/router.tsx

@@ -3,6 +3,8 @@
  */
 import RouteRecognizer from 'route-recognizer';
 import { createBrowserHistory } from 'history';
+import type { ReactNode } from 'react';
+import type { Location } from 'history';
 
 /**
  * WordPress dependencies
@@ -21,11 +23,6 @@ import {
 } from '@wordpress/url';
 import { useEvent } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import type { ReactNode } from 'react';
-
 const history = createBrowserHistory();
 interface Route {
 	name: string;
@@ -68,7 +65,7 @@ export interface NavigationOptions {
 const RoutesContext = createContext< Match | null >( null );
 export const ConfigContext = createContext< Config >( { pathArg: 'p' } );
 
-const locationMemo = new WeakMap();
+const locationMemo = new WeakMap< Location, LocationWithQuery >();
 function getLocationWithQuery() {
 	const location = history.location;
 	let locationWithQuery = locationMemo.get( location );
@@ -155,7 +152,7 @@ export default function useMatch(
 	matcher: RouteRecognizer,
 	pathArg: string
 ): Match {
-	const { query: rawQuery = {} } = location;
+	const { query: rawQuery = {}, state } = location;
 
 	return useMemo( () => {
 		const { [ pathArg ]: path = '/', ...query } = rawQuery;
@@ -168,6 +165,7 @@ export default function useMatch(
 				widths: {},
 				query,
 				params: {},
+				state,
 			};
 		}
 
@@ -192,8 +190,9 @@ export default function useMatch(
 			params: result.params,
 			query,
 			path: addQueryArgs( path, query ),
+			state,
 		};
-	}, [ matcher, rawQuery, pathArg ] );
+	}, [ matcher, rawQuery, pathArg, state ] );
 }
 
 export function RouterProvider( {