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

WordPress · Jul 24, 2024 · ce6f78c · ce6f78c
1 parent c5f3dd5
commit ce6f78c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -17,7 +17,7 @@ import {
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,7 +32,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(
@@ -58,6 +57,7 @@ function InserterMenu(
 			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
 		[]
 	);
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -135,6 +135,7 @@ function InserterMenu(
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
 			onPatternCategorySelection?.();
+			__unstableSetEditorMode( 'zoom-out' );
 		},
 		[ setSelectedPatternCategory, onPatternCategorySelection ]
 	);
@@ -146,11 +147,6 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
-	const showZoomOut =
-		showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab;
-
-	useZoomOut( showZoomOut );
-
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;

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;
@@ -94,6 +97,28 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
+					{ !! window.__experimentalEnableZoomedOutPatternsTab && (
+						<MenuGroup>
+							{ __unstableGetEditorMode() !== 'zoom-out' && (
+								<MenuItem
+									onClick={ () =>
+										__unstableSetEditorMode( 'zoom-out' )
+									}
+								>
+									{ __( 'Zoom Out' ) }
+								</MenuItem>
+							) }
+							{ __unstableGetEditorMode() === 'zoom-out' && (
+								<MenuItem
+									onClick={ () =>
+										__unstableSetEditorMode( 'edit' )
+									}
+								>
+									{ __( 'Zoom In' ) }
+								</MenuItem>
+							) }
+						</MenuGroup>
+					) }
 					{ isTemplate && (
 						<MenuGroup>
 							<MenuItem