Add Zoom Out toggle to editor header when experiment enabled (WordPre…

…ss#65183)

* Add toggle when experiment active

* Add new square icon

* Use new icon

* Remove zoom out desktop 50% from device preview dropdown

* Fix console error for stroke-width to strokeWidth

---------

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

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

@@ -22,6 +22,7 @@ import PostPublishButtonOrToggle from '../post-publish-button/post-publish-butto
 import PostSavedState from '../post-saved-state';
 import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
+import ZoomOutToggle from '../zoom-out-toggle';
 import { store as editorStore } from '../../store';
 
 const toolbarVariations = {
@@ -48,6 +49,9 @@ function Header( {
 	title,
 	icon,
 } ) {
+	const zoomOutExperimentEnabled =
+		window.__experimentalEnableZoomOutExperiment;
+
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
@@ -142,9 +146,13 @@ function Header( {
 					forceIsAutosaveable={ forceIsDirty }
 				/>
 				<PostViewLink />
+
+				{ zoomOutExperimentEnabled && <ZoomOutToggle /> }
+
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />
 				) }
+
 				{ ! customSaveButton && (
 					<PostPublishButtonOrToggle
 						forceIsDirty={ forceIsDirty }
@@ -153,6 +161,7 @@ function Header( {
 						}
 					/>
 				) }
+
 				{ customSaveButton }
 				<MoreMenu />
 			</motion.div>

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

@@ -19,9 +19,7 @@ import { __ } from '@wordpress/i18n';
 import { desktop, mobile, tablet, external } 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';
 import { ActionItem } from '@wordpress/interface';
 
 /**
@@ -31,49 +29,21 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const {
-		deviceType,
-		editorMode,
-		homeUrl,
-		isTemplate,
-		isViewable,
-		showIconLabels,
-	} = useSelect( ( select ) => {
-		const { getDeviceType, getCurrentPostType } = select( editorStore );
-		const { getEntityRecord, getPostType } = select( coreStore );
-		const { get } = select( preferencesStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const _currentPostType = getCurrentPostType();
-		return {
-			deviceType: getDeviceType(),
-			editorMode: __unstableGetEditorMode(),
-			homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-			isTemplate: _currentPostType === 'wp_template',
-			isViewable: getPostType( _currentPostType )?.viewable ?? false,
-			showIconLabels: get( 'core', 'showIconLabels' ),
-		};
-	}, [] );
+	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
+		useSelect( ( select ) => {
+			const { getDeviceType, getCurrentPostType } = select( editorStore );
+			const { getEntityRecord, getPostType } = select( coreStore );
+			const { get } = select( preferencesStore );
+			const _currentPostType = getCurrentPostType();
+			return {
+				deviceType: getDeviceType(),
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.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 originalEditingModeRef = useRef( editorMode );
-	useEffect( () => {
-		if ( editorMode !== 'zoom-out' ) {
-			originalEditingModeRef.current = editorMode;
-		}
-
-		return () => {
-			if (
-				editorMode === 'zoom-out' &&
-				editorMode !== originalEditingModeRef.current
-			) {
-				__unstableSetEditorMode( originalEditingModeRef.current );
-			}
-		};
-	}, [ editorMode, __unstableSetEditorMode ] );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
@@ -112,44 +82,17 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			label: __( 'Desktop' ),
 			icon: desktop,
 		},
+		{
+			value: 'Tablet',
+			label: __( 'Tablet' ),
+			icon: tablet,
+		},
+		{
+			value: 'Mobile',
+			label: __( 'Mobile' ),
+			icon: mobile,
+		},
 	];
-	if ( window.__experimentalEnableZoomOutExperiment ) {
-		choices.push( {
-			value: 'ZoomOut',
-			label: __( 'Desktop (50%)' ),
-			icon: desktop,
-		} );
-	}
-	choices.push( {
-		value: 'Tablet',
-		label: __( 'Tablet' ),
-		icon: tablet,
-	} );
-	choices.push( {
-		value: 'Mobile',
-		label: __( 'Mobile' ),
-		icon: mobile,
-	} );
-
-	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
-
-	/**
-	 * Handles the selection of a device type.
-	 *
-	 * @param {string} value The device type.
-	 */
-	const onSelect = ( value ) => {
-		let newEditorMode = originalEditingModeRef.current;
-
-		if ( value === 'ZoomOut' ) {
-			newEditorMode = 'zoom-out';
-			setDeviceType( 'Desktop' );
-		} else {
-			setDeviceType( value );
-		}
-
-		__unstableSetEditorMode( newEditorMode );
-	};
 
 	return (
 		<DropdownMenu
@@ -161,7 +104,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
-			text={ editorMode === 'zoom-out' ? __( '50%' ) : undefined }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
@@ -170,8 +112,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ choices }
-							value={ previewValue }
-							onSelect={ onSelect }
+							value={ deviceType }
+							onSelect={ setDeviceType }
 						/>
 					</MenuGroup>
 					{ isTemplate && (

packages/editor/src/components/zoom-out-toggle/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { square as zoomOutIcon } from '@wordpress/icons';
+
+const ZoomOutToggle = () => {
+	const { isZoomOutMode } = useSelect( ( select ) => ( {
+		isZoomOutMode:
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+	} ) );
+
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	const handleZoomOut = () => {
+		__unstableSetEditorMode( isZoomOutMode ? 'edit' : 'zoom-out' );
+	};
+
+	return (
+		<Button
+			onClick={ handleZoomOut }
+			icon={ zoomOutIcon }
+			label={ __( 'Toggle Zoom Out' ) }
+			isPressed={ isZoomOutMode }
+			size="compact"
+		/>
+	);
+};
+
+export default ZoomOutToggle;

packages/icons/src/index.js

@@ -242,6 +242,7 @@ export { default as store } from './library/store';
 export { default as stretchFullWidth } from './library/stretch-full-width';
 export { default as styles } from './library/styles';
 export { default as shipping } from './library/shipping';
+export { default as square } from './library/square';
 export { default as stretchWide } from './library/stretch-wide';
 export { default as subscript } from './library/subscript';
 export { default as superscript } from './library/superscript';

packages/icons/src/library/square.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const square = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+		<Path
+			fill="none"
+			d="M5.75 12.75V18.25H11.25M12.75 5.75H18.25V11.25"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="square"
+		/>
+	</SVG>
+);
+
+export default square;