From 44744e813ceebb64d78f58f9c9535c87e806961a Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 23 Jul 2024 17:50:23 +0100
Subject: [PATCH 01/18] 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
---
 .../src/components/iframe/index.js            |  6 +-
 .../src/components/inserter/menu.js           | 17 ++++-
 .../editor/src/components/header/index.js     |  3 +-
 .../src/components/preview-dropdown/index.js  | 70 +++++++++++++++++--
 .../src/components/visual-editor/index.js     | 14 ++--
 5 files changed, 89 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3b0bce6d56b403..e7af77920ea127 100644
--- 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
index e0bc29d62e1b9a..b47d960d767b73 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -10,6 +10,7 @@ import {
 	forwardRef,
 	useState,
 	useCallback,
+	useEffect,
 	useMemo,
 	useRef,
 	useLayoutEffect,
@@ -17,7 +18,7 @@ import {
 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
index 2a604229596005..b8eda30c721860 100644
--- 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
index b157c8cc1cfc3b..f52e6b04cec380 100644
--- 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
@@ -23,6 +24,9 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
+	const isZoomOutExperiment =
+		!! window.__experimentalEnableZoomedOutPatternsTab;
+
 	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
 		useSelect( ( select ) => {
 			const { getDeviceType, getCurrentPostType } = select( editorStore );
@@ -38,6 +42,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -69,11 +74,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 * @type {Array}
 	 */
 	const choices = [
-		{
-			value: 'Desktop',
-			label: __( 'Desktop' ),
-			icon: desktop,
-		},
 		{
 			value: 'Tablet',
 			label: __( 'Tablet' ),
@@ -86,6 +86,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.
 	 *
@@ -102,13 +121,52 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		selectedChoice = choices[ 0 ];
 	}
 
+	/**
+	 * Handles the selection of a device type.
+	 *
+	 * @param {string} value The device type.
+	 */
+	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 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
index 8b4877704f5f18..a67feb530e96a2 100644
--- 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 =

From c6cf55de882cb40e94a923ee10bd33e7253b96a7 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 10:50:06 +0100
Subject: [PATCH 02/18] save the editing mode in a ref so we can restore it

---
 .../src/components/preview-dropdown/index.js  | 68 +++++++++++++------
 1 file changed, 49 insertions(+), 19 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index f52e6b04cec380..39d54eab9f265c 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -14,6 +14,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';
 
@@ -27,22 +28,51 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const isZoomOutExperiment =
 		!! window.__experimentalEnableZoomedOutPatternsTab;
 
-	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 () => {
+			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
+			if (
+				editorMode === 'zoom-out' &&
+				editorMode !== originalEditingMode.current
+			) {
+				__unstableSetEditorMode( originalEditingMode.current );
+			}
+		};
+	}, [ editorMode, __unstableSetEditorMode ] );
+
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -128,7 +158,7 @@ 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.
+		let newEditorMode = originalEditingMode.current;
 		if ( value === 'Desktop' ) {
 			speak( __( 'Desktop selected' ), 'assertive' );
 		} else if ( value === 'Tablet' ) {
@@ -136,14 +166,14 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		} else if ( value === 'Mobile' ) {
 			speak( __( 'Mobile selected' ), 'assertive' );
 		} else if ( value === 'ZoomIn' ) {
-			speak( __( 'Zoom to 100% selected' ), 'assertive' );
+			speak( __( 'Zoom to 100 percent selected' ), 'assertive' );
 		} else {
-			speak( __( 'Zoom to 50% selected' ), 'assertive' );
-			editorMode = 'zoom-out';
+			speak( __( 'Zoom to 50 percent selected' ), 'assertive' );
+			newEditorMode = 'zoom-out';
 		}
 
 		if ( isZoomOutExperiment ) {
-			__unstableSetEditorMode( editorMode );
+			__unstableSetEditorMode( newEditorMode );
 		}
 	};
 

From eef84ec8f0e0f50a4a56d7f34febcbc514a73098 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 14:33:40 +0100
Subject: [PATCH 03/18] update logic

---
 .../editor/src/components/preview-dropdown/index.js  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 39d54eab9f265c..a8d6e305506514 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -178,13 +178,15 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 
 	const getIcon = () => {
-		if ( isZoomOutExperiment ) {
-			if ( deviceType === 'Desktop' || deviceType === 'ZoomIn' ) {
-				return <>{ __( '100%' ) }</>;
-			}
-			if ( deviceType === 'ZoomOut' ) {
+		if (
+			isZoomOutExperiment &&
+			deviceType !== 'Mobile' &&
+			deviceType !== 'Tablet'
+		) {
+			if ( editorMode === 'zoom-out' ) {
 				return <>{ __( '50%' ) }</>;
 			}
+			return <>{ __( '100%' ) }</>;
 		}
 
 		return deviceIcons[ deviceType.toLowerCase() ];

From 56100799c046b1920554cc17965fb416e7f82427 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 16:12:15 +0100
Subject: [PATCH 04/18] Update
 packages/editor/src/components/preview-dropdown/index.js

Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
---
 .../src/components/preview-dropdown/index.js  | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index a8d6e305506514..85eba53a680bbe 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -178,18 +178,15 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 
 	const getIcon = () => {
-		if (
-			isZoomOutExperiment &&
-			deviceType !== 'Mobile' &&
-			deviceType !== 'Tablet'
-		) {
-			if ( editorMode === 'zoom-out' ) {
-				return <>{ __( '50%' ) }</>;
-			}
-			return <>{ __( '100%' ) }</>;
+		switch (deviceType) {
+			case 'ZoomOut':
+				return __( '50%' );
+			case 'ZoomIn':
+				return __( '100%' );
+			default:
+				return deviceIcons[ deviceType.toLowerCase() ];
 		}
-
-		return deviceIcons[ deviceType.toLowerCase() ];
+	}
 	};
 
 	return (

From 8bf3d408f11f79ffcdb0ef252313e739a91326b1 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 16:07:00 +0100
Subject: [PATCH 05/18] fix preview selection

---
 packages/editor/src/components/preview-dropdown/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 85eba53a680bbe..ada25411ffcba2 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -140,8 +140,12 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 *
 	 * @type {Object}
 	 */
+	let previewValue = deviceType;
+	if ( editorMode === 'zoom-out' ) {
+		previewValue = 'ZoomOut';
+	}
 	let selectedChoice = choices.find(
-		( choice ) => choice.value === deviceType
+		( choice ) => choice.value === previewValue
 	);
 
 	/**

From d823a18225241a999a41919ba1b25f727aeaaf19 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 16:09:44 +0100
Subject: [PATCH 06/18] remove the experiment

---
 .../src/components/inserter/search.js         | 95 +++++++++++++++++++
 .../src/components/preview-dropdown/index.js  | 52 ++++------
 2 files changed, 115 insertions(+), 32 deletions(-)
 create mode 100644 packages/block-editor/src/components/inserter/search.js

diff --git a/packages/block-editor/src/components/inserter/search.js b/packages/block-editor/src/components/inserter/search.js
new file mode 100644
index 00000000000000..23d8ec5eb9b8a2
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/search.js
@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useState,
+	useCallback,
+	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';
+
+/**
+ * Internal dependencies
+ */
+import Tips from './tips';
+import InserterPreviewPanel from './preview-panel';
+import BlockTypesTab from './block-types-tab';
+import BlockPatternsTab from './block-patterns-tab';
+import { PatternCategoryPreviews } from './block-patterns-tab/pattern-category-previews';
+import { MediaTab, MediaCategoryPanel } from './media-tab';
+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';
+
+// TODO - add back useMemo
+export const InserterSearch = ( { filterValue, selectedTab } ) => {
+	if ( selectedTab === 'media' ) {
+		return null;
+	}
+
+	return (
+		<>
+			<SearchControl
+				__nextHasNoMarginBottom
+				className="block-editor-inserter__search"
+				onChange={ ( value ) => {
+					if ( hoveredItem ) {
+						setHoveredItem( null );
+					}
+					setFilterValue( value );
+				} }
+				value={ filterValue }
+				label={ __( 'Search for blocks and patterns' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+			{ !! delayedFilterValue && (
+				<InserterSearchResults
+					filterValue={ delayedFilterValue }
+					onSelect={ onSelect }
+					onHover={ onHover }
+					onHoverPattern={ onHoverPattern }
+					rootClientId={ rootClientId }
+					clientId={ clientId }
+					isAppender={ isAppender }
+					__experimentalInsertionIndex={
+						__experimentalInsertionIndex
+					}
+					showBlockDirectory
+					shouldFocusBlock={ shouldFocusBlock }
+					prioritizePatterns={ selectedTab === 'patterns' }
+				/>
+			) }
+		</>
+	);
+};
+/*[
+		selectedTab,
+		hoveredItem,
+		setHoveredItem,
+		setFilterValue,
+		filterValue,
+		delayedFilterValue,
+		onSelect,
+		onHover,
+		onHoverPattern,
+		shouldFocusBlock,
+		clientId,
+		rootClientId,
+		__experimentalInsertionIndex,
+		isAppender,
+	]
+);
+*/
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index ada25411ffcba2..1217861dac1e5c 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -11,7 +11,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { desktop, mobile, tablet, external } from '@wordpress/icons';
+import { 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';
@@ -25,9 +25,6 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const isZoomOutExperiment =
-		!! window.__experimentalEnableZoomedOutPatternsTab;
-
 	const {
 		deviceType,
 		editorMode,
@@ -95,7 +92,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const deviceIcons = {
 		mobile,
 		tablet,
-		desktop,
 	};
 
 	/**
@@ -104,6 +100,16 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 * @type {Array}
 	 */
 	const choices = [
+		{
+			value: 'Desktop',
+			label: __( 'Zoom to 100%' ),
+			icon: <>{ __( '100%' ) }</>,
+		},
+		{
+			value: 'ZoomOut',
+			label: __( 'Zoom to 50%' ),
+			icon: <>{ __( '50%' ) }</>,
+		},
 		{
 			value: 'Tablet',
 			label: __( 'Tablet' ),
@@ -116,25 +122,6 @@ 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.
 	 *
@@ -176,21 +163,22 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			newEditorMode = 'zoom-out';
 		}
 
-		if ( isZoomOutExperiment ) {
-			__unstableSetEditorMode( newEditorMode );
-		}
+		__unstableSetEditorMode( newEditorMode );
 	};
 
 	const getIcon = () => {
-		switch (deviceType) {
+		switch ( deviceType ) {
 			case 'ZoomOut':
-				return __( '50%' );
-			case 'ZoomIn':
-				return __( '100%' );
+				return <>{ __( '50%' ) }</>;
+			case 'Desktop':
+				if ( editorMode === 'zoom-out' ) {
+					// This can happen if zoom out is enabled from by other means - like the patterns tab.
+					return <>{ __( '50%' ) }</>;
+				}
+				return <>{ __( '100%' ) }</>;
 			default:
 				return deviceIcons[ deviceType.toLowerCase() ];
 		}
-	}
 	};
 
 	return (

From 19e73614f3b3d1bed2ac9ab73ba502115fb085f2 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 16:26:10 +0100
Subject: [PATCH 07/18] remove disconnected change

---
 .../src/components/inserter/search.js         | 95 -------------------
 1 file changed, 95 deletions(-)
 delete mode 100644 packages/block-editor/src/components/inserter/search.js

diff --git a/packages/block-editor/src/components/inserter/search.js b/packages/block-editor/src/components/inserter/search.js
deleted file mode 100644
index 23d8ec5eb9b8a2..00000000000000
--- a/packages/block-editor/src/components/inserter/search.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import {
-	forwardRef,
-	useState,
-	useCallback,
-	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';
-
-/**
- * Internal dependencies
- */
-import Tips from './tips';
-import InserterPreviewPanel from './preview-panel';
-import BlockTypesTab from './block-types-tab';
-import BlockPatternsTab from './block-patterns-tab';
-import { PatternCategoryPreviews } from './block-patterns-tab/pattern-category-previews';
-import { MediaTab, MediaCategoryPanel } from './media-tab';
-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';
-
-// TODO - add back useMemo
-export const InserterSearch = ( { filterValue, selectedTab } ) => {
-	if ( selectedTab === 'media' ) {
-		return null;
-	}
-
-	return (
-		<>
-			<SearchControl
-				__nextHasNoMarginBottom
-				className="block-editor-inserter__search"
-				onChange={ ( value ) => {
-					if ( hoveredItem ) {
-						setHoveredItem( null );
-					}
-					setFilterValue( value );
-				} }
-				value={ filterValue }
-				label={ __( 'Search for blocks and patterns' ) }
-				placeholder={ __( 'Search' ) }
-			/>
-			{ !! delayedFilterValue && (
-				<InserterSearchResults
-					filterValue={ delayedFilterValue }
-					onSelect={ onSelect }
-					onHover={ onHover }
-					onHoverPattern={ onHoverPattern }
-					rootClientId={ rootClientId }
-					clientId={ clientId }
-					isAppender={ isAppender }
-					__experimentalInsertionIndex={
-						__experimentalInsertionIndex
-					}
-					showBlockDirectory
-					shouldFocusBlock={ shouldFocusBlock }
-					prioritizePatterns={ selectedTab === 'patterns' }
-				/>
-			) }
-		</>
-	);
-};
-/*[
-		selectedTab,
-		hoveredItem,
-		setHoveredItem,
-		setFilterValue,
-		filterValue,
-		delayedFilterValue,
-		onSelect,
-		onHover,
-		onHoverPattern,
-		shouldFocusBlock,
-		clientId,
-		rootClientId,
-		__experimentalInsertionIndex,
-		isAppender,
-	]
-);
-*/

From 5bd57eb037f40bba814b303044b5aba35627897d Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 16:30:13 +0100
Subject: [PATCH 08/18] make the code more readable

---
 .../editor/src/components/preview-dropdown/index.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 1217861dac1e5c..04f4d3ebbcf62d 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -167,14 +167,15 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 
 	const getIcon = () => {
+		if (
+			deviceType === 'ZoomOut' ||
+			editorMode === 'zoom-out' // This can happen if zoom out is enabled from by other means - like the patterns tab.
+		) {
+			return <>{ __( '50%' ) }</>;
+		}
+
 		switch ( deviceType ) {
-			case 'ZoomOut':
-				return <>{ __( '50%' ) }</>;
 			case 'Desktop':
-				if ( editorMode === 'zoom-out' ) {
-					// This can happen if zoom out is enabled from by other means - like the patterns tab.
-					return <>{ __( '50%' ) }</>;
-				}
 				return <>{ __( '100%' ) }</>;
 			default:
 				return deviceIcons[ deviceType.toLowerCase() ];

From 2dac62233020347d65e7a2e5201d7a98f3cdbbf8 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 30 Jul 2024 16:32:14 +0100
Subject: [PATCH 09/18] simplify code

---
 packages/editor/src/components/preview-dropdown/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 04f4d3ebbcf62d..284118db478370 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -127,10 +127,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 *
 	 * @type {Object}
 	 */
-	let previewValue = deviceType;
-	if ( editorMode === 'zoom-out' ) {
-		previewValue = 'ZoomOut';
-	}
+	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
 	let selectedChoice = choices.find(
 		( choice ) => choice.value === previewValue
 	);

From a66ea9e1a4464eb832bb1e57aad04630da1a3746 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 31 Jul 2024 23:56:03 +0100
Subject: [PATCH 10/18] remove changes from the rebase

---
 .../editor/src/components/preview-dropdown/index.js | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 284118db478370..49e08f00cc8d6e 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -147,16 +147,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const onSelect = ( value ) => {
 		setDeviceType( value );
 		let newEditorMode = originalEditingMode.current;
-		if ( value === 'Desktop' ) {
-			speak( __( 'Desktop selected' ), 'assertive' );
-		} else if ( value === 'Tablet' ) {
-			speak( __( 'Tablet selected' ), 'assertive' );
-		} else if ( value === 'Mobile' ) {
-			speak( __( 'Mobile selected' ), 'assertive' );
-		} else if ( value === 'ZoomIn' ) {
-			speak( __( 'Zoom to 100 percent selected' ), 'assertive' );
-		} else {
-			speak( __( 'Zoom to 50 percent selected' ), 'assertive' );
+		if ( value === 'ZoomOut' ) {
 			newEditorMode = 'zoom-out';
 		}
 
@@ -195,7 +186,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 						<MenuItemsChoice
 							choices={ choices }
 							value={ selectedChoice.value }
-							onSelect={ setDeviceType }
+							onSelect={ onSelect }
 						/>
 					</MenuGroup>
 					{ isTemplate && (

From c0dee09be1bcf19b52a257f2bb59757694c04d6d Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 1 Aug 2024 08:08:14 +0100
Subject: [PATCH 11/18] Render a down chevron in the dropdown

---
 .../src/components/preview-dropdown/index.js  | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 49e08f00cc8d6e..3ae90c89dc10fb 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -11,7 +11,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { mobile, tablet, external } from '@wordpress/icons';
+import { mobile, tablet, external, chevronDown } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -80,6 +80,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 	const toggleProps = {
 		className: 'editor-preview-dropdown__toggle',
+		iconPosition: 'right',
 		size: 'compact',
 		showTooltip: ! showIconLabels,
 		disabled,
@@ -154,20 +155,19 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		__unstableSetEditorMode( newEditorMode );
 	};
 
-	const getIcon = () => {
+	const getText = () => {
 		if (
 			deviceType === 'ZoomOut' ||
 			editorMode === 'zoom-out' // This can happen if zoom out is enabled from by other means - like the patterns tab.
 		) {
-			return <>{ __( '50%' ) }</>;
+			return __( '50%' );
 		}
 
-		switch ( deviceType ) {
-			case 'Desktop':
-				return <>{ __( '100%' ) }</>;
-			default:
-				return deviceIcons[ deviceType.toLowerCase() ];
+		if ( deviceType === 'Desktop' ) {
+			return __( '100%' );
 		}
+
+		return <Icon icon={ deviceIcons[ deviceType.toLowerCase() ] } />;
 	};
 
 	return (
@@ -176,7 +176,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ getIcon() }
+			icon={ chevronDown }
+			text={ getText() }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>

From bca14136139e64b4b66c5ba3386e6011a594c9d1 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 1 Aug 2024 08:40:24 +0100
Subject: [PATCH 12/18] don't run the use effect when the mode changes

---
 .../src/components/inserter/menu.js             | 17 +++--------------
 packages/block-editor/src/hooks/use-zoom-out.js |  2 +-
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index b47d960d767b73..e0bc29d62e1b9a 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -10,7 +10,6 @@ import {
 	forwardRef,
 	useState,
 	useCallback,
-	useEffect,
 	useMemo,
 	useRef,
 	useLayoutEffect,
@@ -18,7 +17,7 @@ import {
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -33,6 +32,7 @@ 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,18 +149,7 @@ function InserterMenu(
 	const showZoomOut =
 		showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab;
 
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	useEffect( () => {
-		if ( showZoomOut ) {
-			__unstableSetEditorMode( 'zoom-out' );
-		}
-
-		return () => {
-			if ( showZoomOut ) {
-				__unstableSetEditorMode( 'edit' ); // TODO: set back to whatever it was previously
-			}
-		};
-	}, [ showZoomOut ] );
+	useZoomOut( showZoomOut );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 3ec701cfc4a14d..d0d7d0fd4d71c7 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/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.
 }

From 2c7aa046bda5393dfe4b6389e8e0a3a0ac01eea4 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 1 Aug 2024 08:43:11 +0100
Subject: [PATCH 13/18] Remove incorrect comment

---
 packages/editor/src/components/preview-dropdown/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 3ae90c89dc10fb..8fcc98e2428276 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -60,7 +60,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		}
 
 		return () => {
-			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
 			if (
 				editorMode === 'zoom-out' &&
 				editorMode !== originalEditingMode.current

From b8663bfb604c39c0c72965887a7fad7349e015ad Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Thu, 1 Aug 2024 11:56:58 -0500
Subject: [PATCH 14/18] Customized spacing for chevron in preview dropdown

---
 .../src/components/preview-dropdown/index.js       | 14 +++++++++++---
 .../src/components/preview-dropdown/style.scss     | 12 ++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 8fcc98e2428276..d5e9d7c34074af 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -11,7 +16,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { mobile, tablet, external, chevronDown } 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';
@@ -171,11 +176,14 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 
 	return (
 		<DropdownMenu
-			className="editor-preview-dropdown"
+			className={ clsx(
+				'editor-preview-dropdown',
+				`editor-preview-dropdown--${ deviceType.toLowerCase() }`
+			) }
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ chevronDown }
+			icon={ chevronDownSmall }
 			text={ getText() }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
diff --git a/packages/editor/src/components/preview-dropdown/style.scss b/packages/editor/src/components/preview-dropdown/style.scss
index 43fa7cdd8ecd97..f2745bbec743c9 100644
--- a/packages/editor/src/components/preview-dropdown/style.scss
+++ b/packages/editor/src/components/preview-dropdown/style.scss
@@ -1,3 +1,15 @@
+.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
+	padding-right: $grid-unit-05;
+	gap: 0;
+}
+
+.editor-preview-dropdown--mobile,
+.editor-preview-dropdown--tablet {
+	.editor-preview-dropdown__toggle svg:first-of-type {
+		margin-right: -$grid-unit-10;
+	}
+}
+
 .editor-preview-dropdown__button-external {
 	width: 100%;
 	display: flex;

From 49ec7d10d742dc2d46ff39548786cb0941775bad Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 13:51:07 -0400
Subject: [PATCH 15/18] minor tweaks

---
 packages/editor/src/components/preview-dropdown/style.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/style.scss b/packages/editor/src/components/preview-dropdown/style.scss
index f2745bbec743c9..f96a6a0836344b 100644
--- a/packages/editor/src/components/preview-dropdown/style.scss
+++ b/packages/editor/src/components/preview-dropdown/style.scss
@@ -1,12 +1,13 @@
 .editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-05 * 0.5;
 	gap: 0;
 }
 
 .editor-preview-dropdown--mobile,
 .editor-preview-dropdown--tablet {
-	.editor-preview-dropdown__toggle svg:first-of-type {
-		margin-right: -$grid-unit-10;
+	.editor-preview-dropdown__toggle.has-icon.has-text {
+		gap: 0;
+		padding-left: $grid-unit-05;
 	}
 }
 

From 69a1fb757aaf2ac3aa724797adce71875274440b Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 2 Aug 2024 12:50:16 -0500
Subject: [PATCH 16/18] Simplify logic for preview selection and keep in line
 with editorMode

---
 .../src/components/preview-dropdown/index.js  | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index d5e9d7c34074af..c36ef257b13aaa 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -127,22 +127,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		},
 	];
 
-	/**
-	 * The selected choice.
-	 *
-	 * @type {Object}
-	 */
 	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
-	let selectedChoice = choices.find(
-		( choice ) => choice.value === previewValue
-	);
-
-	/**
-	 * If no selected choice is found, default to the first
-	 */
-	if ( ! selectedChoice ) {
-		selectedChoice = choices[ 0 ];
-	}
 
 	/**
 	 * Handles the selection of a device type.
@@ -150,20 +135,20 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 * @param {string} value The device type.
 	 */
 	const onSelect = ( value ) => {
-		setDeviceType( value );
 		let newEditorMode = originalEditingMode.current;
+
 		if ( value === 'ZoomOut' ) {
 			newEditorMode = 'zoom-out';
+			setDeviceType( 'Desktop' );
+		} else {
+			setDeviceType( value );
 		}
 
 		__unstableSetEditorMode( newEditorMode );
 	};
 
 	const getText = () => {
-		if (
-			deviceType === 'ZoomOut' ||
-			editorMode === 'zoom-out' // This can happen if zoom out is enabled from by other means - like the patterns tab.
-		) {
+		if ( editorMode === 'zoom-out' ) {
 			return __( '50%' );
 		}
 
@@ -193,7 +178,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ choices }
-							value={ selectedChoice.value }
+							value={ previewValue }
 							onSelect={ onSelect }
 						/>
 					</MenuGroup>

From 26f1dbae692b80a39a2cbd052d41090c24768433 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 2 Aug 2024 15:34:55 -0500
Subject: [PATCH 17/18] Allow zoom out inserters if manually select zoom out
 mode from dropdown

---
 .../block-editor/src/components/block-tools/index.js  | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index c07adb34e584f3..163c35b54e4381 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -251,12 +251,11 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ window.__experimentalEnableZoomedOutPatternsTab &&
-					isZoomOutMode && (
-						<ZoomOutModeInserters
-							__unstableContentRef={ __unstableContentRef }
-						/>
-					) }
+				{ isZoomOutMode && (
+					<ZoomOutModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);

From bfc4bcc29df07fa0330dc7392702e51b0c79cf7e Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 2 Aug 2024 16:07:15 -0500
Subject: [PATCH 18/18] Use desktop icon with 50% for zoom out

---
 .../src/components/preview-dropdown/index.js  | 27 ++++++-------------
 .../components/preview-dropdown/style.scss    | 12 ++-------
 2 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index c36ef257b13aaa..6554f7c0228a77 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -16,7 +16,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { mobile, tablet, external, chevronDownSmall } from '@wordpress/icons';
+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';
@@ -95,6 +95,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 
 	const deviceIcons = {
+		desktop,
 		mobile,
 		tablet,
 	};
@@ -107,13 +108,13 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const choices = [
 		{
 			value: 'Desktop',
-			label: __( 'Zoom to 100%' ),
-			icon: <>{ __( '100%' ) }</>,
+			label: __( 'Desktop' ),
+			icon: desktop,
 		},
 		{
 			value: 'ZoomOut',
-			label: __( 'Zoom to 50%' ),
-			icon: <>{ __( '50%' ) }</>,
+			label: __( 'Desktop (50%)' ),
+			icon: desktop,
 		},
 		{
 			value: 'Tablet',
@@ -147,18 +148,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		__unstableSetEditorMode( newEditorMode );
 	};
 
-	const getText = () => {
-		if ( editorMode === 'zoom-out' ) {
-			return __( '50%' );
-		}
-
-		if ( deviceType === 'Desktop' ) {
-			return __( '100%' );
-		}
-
-		return <Icon icon={ deviceIcons[ deviceType.toLowerCase() ] } />;
-	};
-
 	return (
 		<DropdownMenu
 			className={ clsx(
@@ -168,8 +157,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ chevronDownSmall }
-			text={ getText() }
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			text={ editorMode === 'zoom-out' ? __( '50%' ) : undefined }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
diff --git a/packages/editor/src/components/preview-dropdown/style.scss b/packages/editor/src/components/preview-dropdown/style.scss
index f96a6a0836344b..c117a4239e9dfb 100644
--- a/packages/editor/src/components/preview-dropdown/style.scss
+++ b/packages/editor/src/components/preview-dropdown/style.scss
@@ -1,14 +1,6 @@
 .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;
-	}
+	padding-right: 4px;
+	padding-left: 6px;
 }
 
 .editor-preview-dropdown__button-external {