Avoid zooming out when browsing styles if the preview mode is active (#…

…67190) Co-authored-by: talldan <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: yogeshbhutkar <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Nov 22, 2024 · a7c373f · a7c373f · github-actions · Nov 22, 2024
1 parent 98a7d5d
commit a7c373f
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -1,10 +1,13 @@
 /**
  * WordPress dependencies
  */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { Card, CardBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { useEffect } from '@wordpress/element';
 
@@ -19,10 +22,13 @@ const { useZoomOut } = unlock( blockEditorPrivateApis );
 
 function ScreenStyleVariations() {
 	// Style Variations should only be previewed in with
-	// - a "zoomed out" editor
+	// - a "zoomed out" editor (but not when in preview mode)
 	// - "Desktop" device preview
+	const isPreviewMode = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().isPreviewMode;
+	}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
-	useZoomOut();
+	useZoomOut( ! isPreviewMode );
 	useEffect( () => {
 		setDeviceType( 'desktop' );
 	}, [ setDeviceType ] );