Zoom Out: Add a control to enter and leave zoom out mode

packages/block-editor/src/components/iframe/index.js

@@ -242,10 +242,8 @@ function Iframe( {
 	const isZoomedOut = scale !== 1;
 
 	useEffect( () => {
-		if ( ! isZoomedOut ) {
-			prevContainerWidth.current = containerWidth;
-		}
-	}, [ containerWidth, isZoomedOut ] );
+		prevContainerWidth.current = containerWidth;
+	}, [ containerWidth ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [

packages/block-editor/src/hooks/use-zoom-out.js

@@ -49,5 +49,5 @@ export function useZoomOut( zoomOut = true ) {
 		) {
 			__unstableSetEditorMode( originalEditingMode.current );
 		}
-	}, [ __unstableSetEditorMode, zoomOut, mode ] );
+	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
 }

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

@@ -57,7 +57,6 @@ function Header( {
 		showIconLabels,
 		hasFixedToolbar,
 		isNestedEntity,
-		isZoomedOutView,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -136,7 +135,7 @@ function Header( {
 				) }
 				<PreviewDropdown
 					forceIsAutosaveable={ forceIsDirty }
-					disabled={ isNestedEntity || isZoomedOutView }
+					disabled={ isNestedEntity }
 				/>
 				<PostPreviewButton
 					className="editor-header__post-preview-button"

packages/editor/src/components/preview-dropdown/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -11,10 +16,12 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { desktop, mobile, tablet, external } from '@wordpress/icons';
+import { mobile, tablet, external, chevronDownSmall } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -23,21 +30,50 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
-		useSelect( ( select ) => {
-			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getUnstableBase, getPostType } = select( coreStore );
-			const { get } = select( preferencesStore );
-			const _currentPostType = getCurrentPostType();
-			return {
-				deviceType: getDeviceType(),
-				homeUrl: getUnstableBase()?.home,
-				isTemplate: _currentPostType === 'wp_template',
-				isViewable: getPostType( _currentPostType )?.viewable ?? false,
-				showIconLabels: get( 'core', 'showIconLabels' ),
-			};
-		}, [] );
+	const {
+		deviceType,
+		editorMode,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { getDeviceType, getCurrentPostType } = select( editorStore );
+		const { getUnstableBase, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			deviceType: getDeviceType(),
+			editorMode: __unstableGetEditorMode(),
+			homeUrl: getUnstableBase()?.home,
+			isTemplate: _currentPostType === 'wp_template',
+			isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+		};
+	}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	/**
+	 * Save the original editing mode in a ref to restore it when we exit zoom out.
+	 */
+	const originalEditingMode = useRef( editorMode );
+	useEffect( () => {
+		if ( editorMode !== 'zoom-out' ) {
+			originalEditingMode.current = editorMode;
+		}
+
+		return () => {
+			if (
+				editorMode === 'zoom-out' &&
+				editorMode !== originalEditingMode.current
+			) {
+				__unstableSetEditorMode( originalEditingMode.current );
+			}
+		};
+	}, [ editorMode, __unstableSetEditorMode ] );
+
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -48,6 +84,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 	const toggleProps = {
 		className: 'editor-preview-dropdown__toggle',
+		iconPosition: 'right',
 		size: 'compact',
 		showTooltip: ! showIconLabels,
 		disabled,
@@ -60,7 +97,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const deviceIcons = {
 		mobile,
 		tablet,
-		desktop,
 	};
 
 	/**
@@ -71,8 +107,13 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const choices = [
 		{
 			value: 'Desktop',
-			label: __( 'Desktop' ),
-			icon: desktop,
+			label: __( 'Zoom to 100%' ),
+			icon: <>{ __( '100%' ) }</>,
+		},
+		{
+			value: 'ZoomOut',
+			label: __( 'Zoom to 50%' ),
+			icon: <>{ __( '50%' ) }</>,
 		},
 		{
 			value: 'Tablet',
@@ -86,29 +127,49 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		},
 	];
 
+	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
+
 	/**
-	 * The selected choice.
+	 * Handles the selection of a device type.
 	 *
-	 * @type {Object}
+	 * @param {string} value The device type.
 	 */
-	let selectedChoice = choices.find(
-		( choice ) => choice.value === deviceType
-	);
+	const onSelect = ( value ) => {
+		let newEditorMode = originalEditingMode.current;
 
-	/**
-	 * If no selected choice is found, default to the first
-	 */
-	if ( ! selectedChoice ) {
-		selectedChoice = choices[ 0 ];
-	}
+		if ( value === 'ZoomOut' ) {
+			newEditorMode = 'zoom-out';
+			setDeviceType( 'Desktop' );
+		} else {
+			setDeviceType( value );
+		}
+
+		__unstableSetEditorMode( newEditorMode );
+	};
+
+	const getText = () => {
+		if ( editorMode === 'zoom-out' ) {
+			return __( '50%' );
+		}
+
+		if ( deviceType === 'Desktop' ) {
+			return __( '100%' );
+		}
+
+		return <Icon icon={ deviceIcons[ deviceType.toLowerCase() ] } />;
+	};
 
 	return (
 		<DropdownMenu
-			className="editor-preview-dropdown"
+			className={ clsx(
+				'editor-preview-dropdown',
+				`editor-preview-dropdown--${ deviceType.toLowerCase() }`
+			) }
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			icon={ chevronDownSmall }
+			text={ getText() }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
@@ -117,8 +178,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ choices }
-							value={ selectedChoice.value }
-							onSelect={ setDeviceType }
+							value={ previewValue }
+							onSelect={ onSelect }
 						/>
 					</MenuGroup>
 					{ isTemplate && (

packages/editor/src/components/preview-dropdown/style.scss

@@ -1,3 +1,16 @@
+.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
+	padding-right: $grid-unit-05 * 0.5;
+	gap: 0;
+}
+
+.editor-preview-dropdown--mobile,
+.editor-preview-dropdown--tablet {
+	.editor-preview-dropdown__toggle.has-icon.has-text {
+		gap: 0;
+		padding-left: $grid-unit-05;
+	}
+}
+
 .editor-preview-dropdown__button-external {
 	width: 100%;
 	display: flex;

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

@@ -107,6 +107,7 @@ function VisualEditor( {
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -341,12 +342,13 @@ function VisualEditor( {
 		} ),
 	] );
 
-	const zoomOutProps = isZoomOutMode
-		? {
-				scale: 'default',
-				frameSize: '48px',
-		  }
-		: {};
+	const zoomOutProps =
+		isZoomOutMode && ! isTabletViewport
+			? {
+					scale: 'default',
+					frameSize: '48px',
+			  }
+			: {};
 
 	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
 	const enableResizing =