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 · 436b8d9 · 436b8d9
1 parent 55ddb6f
commit 436b8d9
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 22 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
@@ -15,6 +15,7 @@ import { 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
@@ -24,6 +25,9 @@ import PostPreviewButton from '../post-preview-button';
 import { speak } from '@wordpress/a11y';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
+	const isZoomOutExperiment =
+		!! window.__experimentalEnableZoomedOutPatternsTab;
+
 	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
 		useSelect( ( select ) => {
 			const { getDeviceType, getCurrentPostType } = select( editorStore );
@@ -39,6 +43,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -70,11 +75,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 * @type {Array}
 	 */
 	const choices = [
-		{
-			value: 'Desktop',
-			label: __( 'Desktop' ),
-			icon: desktop,
-		},
 		{
 			value: 'Tablet',
 			label: __( 'Tablet' ),
@@ -87,6 +87,25 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		},
 	];
 
+	if ( isZoomOutExperiment ) {
+		choices.unshift( {
+			value: 'ZoomOut',
+			label: __( 'Zoom to 50%' ),
+			icon: <p>{ __( '50%' ) }</p>,
+		} );
+		choices.unshift( {
+			value: 'ZoomIn',
+			label: __( 'Zoom to 100%' ),
+			icon: <p>{ __( '100%' ) }</p>,
+		} );
+	} else {
+		choices.unshift( {
+			value: 'Desktop',
+			label: __( 'Desktop' ),
+			icon: desktop,
+		} );
+	}
+
 	/**
 	 * The selected choice.
 	 *
@@ -110,22 +129,45 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 */
 	const onSelect = ( value ) => {
 		setDeviceType( value );
+		let editorMode = 'edit'; // Rather than setting to edit, we may need to set back to whatever it was previously.
 		if ( value === 'Desktop' ) {
 			speak( __( 'Desktop selected' ), 'assertive' );
 		} else if ( value === 'Tablet' ) {
 			speak( __( 'Tablet selected' ), 'assertive' );
-		} else {
+		} else if ( value === 'Mobile' ) {
 			speak( __( 'Mobile selected' ), 'assertive' );
+		} else if ( value === 'ZoomIn' ) {
+			speak( __( 'Zoom to 100% selected' ), 'assertive' );
+		} else {
+			speak( __( 'Zoom to 50% selected' ), 'assertive' );
+			editorMode = 'zoom-out';
+		}
+
+		if ( isZoomOutExperiment ) {
+			__unstableSetEditorMode( editorMode );
 		}
 	};
 
+	const getIcon = () => {
+		if ( isZoomOutExperiment ) {
+			if ( deviceType === 'Desktop' || deviceType === 'ZoomIn' ) {
+				return <>{ __( '100%' ) }</>;
+			}
+			if ( deviceType === 'ZoomOut' ) {
+				return <>{ __( '50%' ) }</>;
+			}
+		}
+
+		return deviceIcons[ deviceType.toLowerCase() ];
+	};
+
 	return (
 		<DropdownMenu
 			className="editor-preview-dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			icon={ getIcon() }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>

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 =