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

…66023)

* always preview style variations using desktop device type

* Improve comment

---------

Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>

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 (
 		<>