Always preview style variations using desktop device type (WordPress#…

…66023) * always preview style variations using desktop device type * Improve comment --------- Co-authored-by: draganescu <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: juanfra <[email protected]>
up1512001 · Oct 11, 2024 · 4f3da91 · 4f3da91
1 parent b6c321f
commit 4f3da91
Showing 1 changed file with 7 additions and 2 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
@@ -4,6 +4,8 @@
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useZoomOut } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -12,9 +14,12 @@ import ScreenHeader from './header';
 import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
 
 function ScreenStyleVariations() {
-	// Move to zoom out mode when this component is mounted
-	// and back to the previous mode when unmounted.
+	// Style Variations should only be previewed in with
+	// - a "zoomed out" editor
+	// - "Desktop" device preview
+	const { setDeviceType } = useDispatch( editorStore );
 	useZoomOut();
+	setDeviceType( 'desktop' );
 
 	return (
 		<>