Prevent exiting Zoom Out mode from stealing focus

packages/block-editor/src/components/block-list/block.js

@@ -620,7 +620,9 @@ function BlockListBlockProvider( props ) {
 					__unstableHasActiveBlockOverlayActive( clientId ) &&
 					! isDragging(),
 				initialPosition:
-					_isSelected && __unstableGetEditorMode() === 'edit'
+					_isSelected &&
+					( __unstableGetEditorMode() === 'edit' ||
+						__unstableGetEditorMode() === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
 						? getSelectedBlocksInitialCaretPosition()
 						: undefined,
 				isHighlighted: isBlockHighlighted( clientId ),

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -28,11 +28,16 @@ import { store as blockEditorStore } from '../../../store';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting, __unstableGetEditorMode } =
+		useSelect( blockEditorStore );
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
-		if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
+		if (
+			! isBlockSelected( clientId ) ||
+			isMultiSelecting() ||
+			__unstableGetEditorMode() === 'zoom-out'
+		) {
 			return;
 		}
 
@@ -80,7 +85,6 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 				return;
 			}
 		}
-
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition, clientId ] );
 

test/e2e/specs/site-editor/zoom-out.spec.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Zoom Out', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.beforeEach( async ( { admin, page, editor } ) => {
+		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
+
+		const zoomedOutCheckbox = page.getByLabel(
+			'Test a new zoomed out view on'
+		);
+
+		await zoomedOutCheckbox.setChecked( true );
+		await expect( zoomedOutCheckbox ).toBeChecked();
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+
+		// Select a template part with a few blocks.
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//header',
+			postType: 'wp_template_part',
+		} );
+		await editor.canvas.locator( 'body' ).click();
+	} );
+
+	test.afterEach( async ( { admin, page } ) => {
+		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
+		const zoomedOutCheckbox = page.getByLabel(
+			'Test a new zoomed out view on'
+		);
+		await zoomedOutCheckbox.setChecked( false );
+		await expect( zoomedOutCheckbox ).not.toBeChecked();
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Zoom-out button should not steal focus when a block is focused', async ( {
+		page,
+		editor,
+	} ) => {
+		const zoomOutButton = page.getByRole( 'button', {
+			name: 'Zoom-out View',
+			exact: true,
+		} );
+
+		// Select a block for this test to surface the potential focus-stealing behavior
+		await editor.canvas.getByLabel( 'Site title text' ).click();
+
+		await zoomOutButton.click();
+
+		await expect( zoomOutButton ).toBeFocused();
+
+		await page.keyboard.press( 'Enter' );
+
+		await expect( zoomOutButton ).toBeFocused();
+	} );
+} );