Styles Screen: Ensure variations previews will render in mobile viewp…

…orts (#51080)

packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -7,6 +7,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
+import { BlockEditorProvider } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -19,6 +20,8 @@ import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 
+const noop = () => {};
+
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
@@ -51,6 +54,33 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	);
 }
 
+function SidebarNavigationScreenGlobalStylesContent() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+	// loaded. This is necessary because the Iframe component waits until
+	// the block editor store's `__internalIsInitialized` is true before
+	// rendering the iframe. Without this, the iframe previews will not render
+	// in mobile viewport sizes, where the editor canvas is hidden.
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<div className="edit-site-sidebar-navigation-screen-global-styles__content">
+				<StyleVariationsContainer />
+			</div>
+		</BlockEditorProvider>
+	);
+}
+
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -86,7 +116,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				description={ __(
 					'Choose a different style combination for the theme styles.'
 				) }
-				content={ <StyleVariationsContainer /> }
+				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				actions={
 					<div>
 						{ ! isMobileViewport && (