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

revert changes Use 100% for desktop and 50% for zoom out update menu items Allow users to set zoom out back to 100% when the patterns tab is open Reset zoom when switching device mode Add text for zoom refactor click handler to a shared function Move in and out of zoom out when resizing below tablet viewport size
WordPress · Jul 30, 2024 · 5c12586 · 5c12586
1 parent c5f3dd5
commit 5c12586
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/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( [

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -10,14 +10,15 @@ import {
 	forwardRef,
 	useState,
 	useCallback,
+	useEffect,
 	useMemo,
 	useRef,
 	useLayoutEffect,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,7 +33,6 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
-import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -149,7 +149,18 @@ function InserterMenu(
 	const showZoomOut =
 		showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab;
 
-	useZoomOut( showZoomOut );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	useEffect( () => {
+		if ( showZoomOut ) {
+			__unstableSetEditorMode( 'zoom-out' );
+		}
+
+		return () => {
+			if ( showZoomOut ) {
+				__unstableSetEditorMode( 'edit' ); // TODO: set back to whatever it was previously
+			}
+		};
+	}, [ showZoomOut ] );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {

diff --git a/packages/editor/src/components/header/index.js b/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"

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
@@ -14,6 +14,7 @@ import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -37,6 +38,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -62,33 +65,91 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		desktop,
 	};
 
+	const isZoomOutExperiment =
+		!! window.__experimentalEnableZoomedOutPatternsTab;
+
+	const zoomIcon = () => {
+		if ( __unstableGetEditorMode() === 'zoom-out' ) {
+			return __( '50%' );
+		}
+		return __( '100%' );
+	};
+
+	const getIcon = () => {
+		if ( isZoomOutExperiment && deviceType === 'Desktop' ) {
+			return zoomIcon;
+		}
+		return deviceIcons[ deviceType.toLowerCase() ];
+	};
+
+	function handleDevicePreviewClick( targetDeviceType, editorMode ) {
+		if ( isZoomOutExperiment ) {
+			__unstableSetEditorMode( editorMode );
+		}
+		setDeviceType( targetDeviceType );
+	}
+
 	return (
 		<DropdownMenu
 			className="editor-preview-dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			icon={ getIcon() }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
 			{ ( { onClose } ) => (
 				<>
 					<MenuGroup>
 						<MenuItem
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
+							onClick={ () => {
+								handleDevicePreviewClick( 'Desktop', 'edit' ); // Rather than setting to edit, we may need to set back to whatever it was previously.
+							} }
+							icon={
+								deviceType === 'Desktop' &&
+								__unstableGetEditorMode() !== 'zoom-out' &&
+								check
+							}
 						>
-							{ __( 'Desktop' ) }
+							{ isZoomOutExperiment
+								? __( 'Zoom to 100%' )
+								: __( 'Desktop' ) }
 						</MenuItem>
+						{ isZoomOutExperiment && (
+							<MenuItem
+								onClick={ () => {
+									handleDevicePreviewClick(
+										'Desktop',
+										'zoom-out'
+									);
+								} }
+								icon={
+									__unstableGetEditorMode() === 'zoom-out' &&
+									check
+								}
+							>
+								{ __( 'Zoom to 50%' ) }
+							</MenuItem>
+						) }
 						<MenuItem
-							onClick={ () => setDeviceType( 'Tablet' ) }
+							onClick={ () => {
+								handleDevicePreviewClick(
+									'Tablet',
+									'edit' // Rather than setting to edit, we may need to set back to whatever it was previously.
+								);
+							} }
 							icon={ deviceType === 'Tablet' && check }
 						>
 							{ __( 'Tablet' ) }
 						</MenuItem>
 						<MenuItem
-							onClick={ () => setDeviceType( 'Mobile' ) }
+							onClick={ () => {
+								handleDevicePreviewClick(
+									'Mobile',
+									'edit' // Rather than setting to edit, we may need to set back to whatever it was previously.
+								);
+							} }
 							icon={ deviceType === 'Mobile' && check }
 						>
 							{ __( 'Mobile' ) }

diff --git a/packages/editor/src/components/visual-editor/index.js b/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 =