Scroll to previous location in document with editor back button

packages/edit-post/src/components/layout/index.js

@@ -412,6 +412,7 @@ function Layout( {
 		currentPost: { postId: currentPostId, postType: currentPostType },
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
+		previousSelectedBlockPath,
 	} = useNavigateToEntityRecord(
 		initialPostId,
 		initialPostType,
@@ -627,6 +628,7 @@ function Layout( {
 						// eslint-disable-next-line jsx-a11y/no-autofocus
 						autoFocus={ ! isWelcomeGuideVisible }
 						onActionPerformed={ onActionPerformed }
+						initialSelection={ previousSelectedBlockPath }
 						extraSidebarPanels={
 							showMetaBoxes && <MetaBoxes location="side" />
 						}

packages/edit-post/src/hooks/use-navigate-to-entity-record.js

@@ -3,7 +3,14 @@
  */
 import { useCallback, useReducer } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
+import { store as editorStore, privateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { useGenerateBlockPath } = unlock( privateApis );
 
 /**
  * A hook that records the 'entity' history in the post editor as a user
@@ -25,13 +32,24 @@ export default function useNavigateToEntityRecord(
 	initialPostType,
 	defaultRenderingMode
 ) {
+	const generateBlockPath = useGenerateBlockPath();
 	const [ postHistory, dispatch ] = useReducer(
-		( historyState, { type, post, previousRenderingMode } ) => {
+		(
+			historyState,
+			{ type, post, previousRenderingMode, selectedBlockPath }
+		) => {
 			if ( type === 'push' ) {
-				return [ ...historyState, { post, previousRenderingMode } ];
+				// Update the current item with the selected block path before pushing new item
+				const updatedHistory = [ ...historyState ];
+				const currentIndex = updatedHistory.length - 1;
+				updatedHistory[ currentIndex ] = {
+					...updatedHistory[ currentIndex ],
+					selectedBlockPath,
+				};
+				return [ ...updatedHistory, { post, previousRenderingMode } ];
 			}
 			if ( type === 'pop' ) {
-				// Try to leave one item in the history.
+				// Remove the current item from history
 				if ( historyState.length > 1 ) {
 					return historyState.slice( 0, -1 );
 				}
@@ -44,28 +62,40 @@ export default function useNavigateToEntityRecord(
 			},
 		]
 	);
-
-	const { post, previousRenderingMode } =
+	const { post, previousRenderingMode, selectedBlockPath } =
 		postHistory[ postHistory.length - 1 ];
 
 	const { getRenderingMode } = useSelect( editorStore );
 	const { setRenderingMode } = useDispatch( editorStore );
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
+			// Generate block path from clientId if provided
+			const blockPath = params.selectedBlockClientId
+				? generateBlockPath( params.selectedBlockClientId )
+				: null;
+
 			dispatch( {
 				type: 'push',
 				post: { postId: params.postId, postType: params.postType },
 				// Save the current rendering mode so we can restore it when navigating back.
 				previousRenderingMode: getRenderingMode(),
+				selectedBlockPath: blockPath,
 			} );
 			setRenderingMode( defaultRenderingMode );
 		},
-		[ getRenderingMode, setRenderingMode, defaultRenderingMode ]
+		[
+			getRenderingMode,
+			setRenderingMode,
+			defaultRenderingMode,
+			generateBlockPath,
+		]
 	);
 
 	const onNavigateToPreviousEntityRecord = useCallback( () => {
-		dispatch( { type: 'pop' } );
+		dispatch( {
+			type: 'pop',
+		} );
 		if ( previousRenderingMode ) {
 			setRenderingMode( previousRenderingMode );
 		}
@@ -78,5 +108,7 @@ export default function useNavigateToEntityRecord(
 			postHistory.length > 1
 				? onNavigateToPreviousEntityRecord
 				: undefined,
+		// Return the selected block path from the current history item
+		previousSelectedBlockPath: selectedBlockPath,
 	};
 }

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

@@ -3,25 +3,74 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useCallback } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useGenerateBlockPath } = unlock( editorPrivateApis );
 
+/**
+ * Hook to handle navigation to entity records and retrieve initial block selection.
+ *
+ * @return {Array} A tuple containing:
+ *   - onNavigateToEntityRecord: Function to navigate to an entity record
+ *   - initialBlockSelection: The block path or clientId to restore selection, or null if none stored
+ */
 export default function useNavigateToEntityRecord() {
 	const history = useHistory();
+	const { query, path } = useLocation();
+	const generateBlockPath = useGenerateBlockPath();
+
+	// Get the selected block from URL parameters and decode the block path
+	let initialBlockSelection = null;
+	if ( query.selectedBlock ) {
+		try {
+			initialBlockSelection = JSON.parse(
+				decodeURIComponent( query.selectedBlock )
+			);
+		} catch ( e ) {
+			// Invalid JSON, ignore
+			initialBlockSelection = null;
+		}
+	}
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
-			history.navigate(
-				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`
+			// First, update the current URL to include the selected block path for when we navigate back
+			if ( params.selectedBlockClientId ) {
+				const blockPath = generateBlockPath(
+					params.selectedBlockClientId
+				);
+				if ( blockPath ) {
+					// Encode the block path as JSON in the URL
+					const currentUrl = addQueryArgs( path, {
+						...query,
+						selectedBlock: encodeURIComponent(
+							JSON.stringify( blockPath )
+						),
+					} );
+					history.navigate( currentUrl, { replace: true } );
+				}
+			}
+
+			// Then navigate to the new entity record
+			const url = addQueryArgs(
+				`/${ params.postType }/${ params.postId }`,
+				{
+					canvas: 'edit',
+					focusMode: true,
+				}
 			);
+
+			history.navigate( url );
 		},
-		[ history ]
+		[ history, path, query, generateBlockPath ]
 	);
 
-	return onNavigateToEntityRecord;
+	return [ onNavigateToEntityRecord, initialBlockSelection ];
 }

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

@@ -36,7 +36,9 @@ function useNavigateToPreviousEntityRecord() {
 export function useSpecificEditorSettings() {
 	const { query } = useLocation();
 	const { canvas = 'view' } = query;
-	const onNavigateToEntityRecord = useNavigateToEntityRecord();
+	const [ onNavigateToEntityRecord, initialBlockSelection ] =
+		useNavigateToEntityRecord();
+
 	const { settings, currentPostIsTrashed } = useSelect( ( select ) => {
 		const { getSettings } = select( editSiteStore );
 		const { getCurrentPostAttribute } = select( editorStore );
@@ -73,13 +75,15 @@ export function useSpecificEditorSettings() {
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
 			isPreviewMode: canvas === 'view',
+			initialBlockSelection,
 		};
 	}, [
 		settings,
 		canvas,
 		currentPostIsTrashed,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
+		initialBlockSelection,
 	] );
 
 	return defaultEditorSettings;

packages/edit-site/src/components/editor/index.js

@@ -143,6 +143,7 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 	);
 
 	const settings = useSpecificEditorSettings();
+	const { initialBlockSelection, ...editorSettings } = settings;
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
@@ -222,7 +223,8 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 					postType={ postWithTemplate ? context.postType : postType }
 					postId={ postWithTemplate ? context.postId : postId }
 					templateId={ postWithTemplate ? postId : undefined }
-					settings={ settings }
+					settings={ editorSettings }
+					initialSelection={ initialBlockSelection }
 					className="edit-site-editor__editor-interface"
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />

packages/editor/src/components/editor/index.js

@@ -1,16 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { useRestoreBlockFromPath } from '../../utils/block-selection-path';
 import EditorInterface from '../editor-interface';
 import { ExperimentalEditorProvider } from '../provider';
 import Sidebar from '../sidebar';
@@ -25,6 +28,7 @@ function Editor( {
 	settings,
 	children,
 	initialEdits,
+	initialSelection,
 
 	// This could be part of the settings.
 	onActionPerformed,
@@ -94,6 +98,32 @@ function Editor( {
 		[ postType, postId, templateId ]
 	);
 
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const restoreBlockFromPath = useRestoreBlockFromPath();
+
+	// Restore initial block selection if provided (e.g., from navigation)
+	useEffect( () => {
+		if ( ! initialSelection || ! hasLoadedPost || ! post ) {
+			return;
+		}
+
+		// Use setTimeout to ensure blocks are fully rendered before selecting
+		const timeoutId = setTimeout( () => {
+			const clientId = restoreBlockFromPath( initialSelection );
+			if ( clientId ) {
+				selectBlock( clientId );
+			}
+		}, 0 );
+
+		return () => clearTimeout( timeoutId );
+	}, [
+		initialSelection,
+		hasLoadedPost,
+		post,
+		selectBlock,
+		restoreBlockFromPath,
+	] );
+
 	return (
 		<>
 			{ hasLoadedPost && ! post && (

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -258,6 +258,27 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		[ saveEntityRecord, userCanCreatePages ]
 	);
 
+	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
+
+	/**
+	 * Wraps onNavigateToEntityRecord to automatically include the currently selected block.
+	 * This ensures that navigation can restore the selection when returning to the previous entity.
+	 */
+	const wrappedOnNavigateToEntityRecord = useCallback(
+		( params ) => {
+			if ( ! settings.onNavigateToEntityRecord ) {
+				return;
+			}
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			return settings.onNavigateToEntityRecord( {
+				...params,
+				selectedBlockClientId,
+			} );
+		},
+		[ settings, getSelectedBlockClientId ]
+	);
+
 	const allowedBlockTypes = useMemo( () => {
 		// Omit hidden block types if exists and non-empty.
 		if ( hiddenBlockTypes && hiddenBlockTypes.length > 0 ) {
@@ -282,9 +303,12 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	return useMemo( () => {
 		const blockEditorSettings = {
 			...Object.fromEntries(
-				Object.entries( settings ).filter( ( [ key ] ) =>
-					BLOCK_EDITOR_SETTINGS.includes( key )
-				)
+				Object.entries( settings )
+					.filter( ( [ key ] ) =>
+						BLOCK_EDITOR_SETTINGS.includes( key )
+					)
+					// Exclude onNavigateToEntityRecord since we're wrapping it
+					.filter( ( [ key ] ) => key !== 'onNavigateToEntityRecord' )
 			),
 			[ globalStylesDataKey ]: globalStylesData,
 			[ globalStylesLinksDataKey ]: globalStylesLinksData,
@@ -294,6 +318,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			hasFixedToolbar,
 			isDistractionFree,
 			keepCaretInsideBlock,
+			onNavigateToEntityRecord: settings.onNavigateToEntityRecord
+				? wrappedOnNavigateToEntityRecord
+				: undefined,
 			[ getMediaSelectKey ]: ( select, attachmentId ) => {
 				return select( coreStore ).getEntityRecord(
 					'postType',
@@ -377,6 +404,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		globalStylesLinksData,
 		renderingMode,
 		editMediaEntity,
+		wrappedOnNavigateToEntityRecord,
 	] );
 }
 

packages/editor/src/private-apis.js

@@ -29,6 +29,10 @@ import GlobalStylesUIWrapper from './components/global-styles';
 import { StyleBookPreview } from './components/style-book';
 import { useGlobalStyles, useStyle } from './components/global-styles/hooks';
 import { GlobalStylesActionMenu } from './components/global-styles/menu';
+import {
+	useGenerateBlockPath,
+	useRestoreBlockFromPath,
+} from './utils/block-selection-path';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -56,6 +60,9 @@ lock( privateApis, {
 	StyleBookPreview,
 	useGlobalStyles,
 	useStyle,
+	// Block selection
+	useGenerateBlockPath,
+	useRestoreBlockFromPath,
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	interfaceStore,
 	...remainingInterfaceApis,