Zoom out: Invoke zoom out mode when opening the patterns tab, and mov…

…e the code to do so to a shared hook (#59775)

* Invoke zoomed out when using the patterns tab, and create a hook

* Update packages/block-editor/README.md

Co-authored-by: Andrei Draganescu <[email protected]>

* update docs

* enter zoom out on category select

---------

Co-authored-by: Andrei Draganescu <[email protected]>
Co-authored-by: Andrei Draganescu <[email protected]>

packages/block-editor/README.md

@@ -1028,6 +1028,10 @@ _Returns_
 
 -   `any[]`: Returns the values defined for the settings.
 
+### useZoomOut
+
+A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+
 ### Warning
 
 _Related_

packages/block-editor/src/components/inserter/block-patterns-tab/index.js

@@ -33,6 +33,7 @@ function BlockPatternsTab( {
 
 	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
 		<>
 			{ ! isMobile && (

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -32,6 +32,7 @@ import {
 	myPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 const noop = () => {};
 
@@ -49,6 +50,10 @@ export function PatternCategoryPreviews( {
 	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
+
 	const availableCategories = usePatternCategories(
 		rootClientId,
 		patternSourceFilter

packages/block-editor/src/hooks/index.js

@@ -80,3 +80,4 @@ export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
+export { useZoomOut } from './use-zoom-out';

packages/block-editor/src/hooks/use-zoom-out.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+
+/**
+ * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ */
+export function useZoomOut() {
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { mode } = useSelect( ( select ) => {
+		return {
+			mode: select( blockEditorStore ).__unstableGetEditorMode(),
+		};
+	}, [] );
+
+	const shouldRevertInitialMode = useRef( null );
+	useEffect( () => {
+		// ignore changes to zoom-out mode as we explictily change to it on mount.
+		if ( mode !== 'zoom-out' ) {
+			shouldRevertInitialMode.current = false;
+		}
+	}, [ mode ] );
+
+	// Intentionality left without any dependency.
+	// This effect should only run the first time the component is rendered.
+	// The effect opens the zoom-out view if it is not open before when applying a style variation.
+	useEffect( () => {
+		if ( mode !== 'zoom-out' ) {
+			__unstableSetEditorMode( 'zoom-out' );
+			shouldRevertInitialMode.current = true;
+			return () => {
+				// if there were not mode changes revert to the initial mode when unmounting.
+				if ( shouldRevertInitialMode.current ) {
+					__unstableSetEditorMode( mode );
+				}
+			};
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+}

packages/block-editor/src/index.js

@@ -13,6 +13,7 @@ export {
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
+	useZoomOut,
 } from './hooks';
 export * from './components';
 export * from './elements';

packages/edit-site/src/components/global-styles/screen-style-variations.js

@@ -3,9 +3,7 @@
  */
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useZoomOut } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,38 +12,9 @@ import ScreenHeader from './header';
 import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
-	const { mode } = useSelect( ( select ) => {
-		return {
-			mode: select( blockEditorStore ).__unstableGetEditorMode(),
-		};
-	}, [] );
-
-	const shouldRevertInitialMode = useRef( null );
-	useEffect( () => {
-		// ignore changes to zoom-out mode as we explictily change to it on mount.
-		if ( mode !== 'zoom-out' ) {
-			shouldRevertInitialMode.current = false;
-		}
-	}, [ mode ] );
-
-	// Intentionality left without any dependency.
-	// This effect should only run the first time the component is rendered.
-	// The effect opens the zoom-out view if it is not open before when applying a style variation.
-	useEffect( () => {
-		if ( mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
-			shouldRevertInitialMode.current = true;
-			return () => {
-				// if there were not mode changes revert to the initial mode when unmounting.
-				if ( shouldRevertInitialMode.current ) {
-					__unstableSetEditorMode( mode );
-				}
-			};
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
 
 	return (
 		<>