Global Styles: Invoke zoomed-out view when selecting a style variation (

#44987)

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

@@ -8,15 +8,22 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { useMemo, useContext, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useMemo,
+	useContext,
+	useState,
+	useEffect,
+	useRef,
+} from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import {
 	__experimentalGrid as Grid,
 	Card,
 	CardBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -96,12 +103,14 @@ function Variation( { variation } ) {
 }
 
 function ScreenStyleVariations() {
-	const { variations } = useSelect( ( select ) => {
+	const { variations, mode } = useSelect( ( select ) => {
 		return {
 			variations:
 				select(
 					coreStore
 				).__experimentalGetCurrentThemeGlobalStylesVariations(),
+
+			mode: select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
 
@@ -120,6 +129,31 @@ function ScreenStyleVariations() {
 		];
 	}, [ variations ] );
 
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	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 );
+				}
+			};
+		}
+	}, [] );
+
 	return (
 		<>
 			<ScreenHeader