useMediaQuery: support in-iframe queries by accepting Window instance

packages/block-editor/src/components/iframe/index.js

@@ -12,7 +12,7 @@ import {
 	useMergeRefs,
 	useRefEffect,
 	useDisabled,
-	useViewportMatch,
+	WindowContext,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -25,8 +25,6 @@ import { getCompatibilityStyles } from './get-compatibility-styles';
 import { useScaleCanvas } from './use-scale-canvas';
 import { store as blockEditorStore } from '../../store';
 
-const ViewportWidthProvider = useViewportMatch.__experimentalWidthProvider;
-
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -271,7 +269,6 @@ function Iframe( {
 	const {
 		contentResizeListener,
 		containerResizeListener,
-		containerWidth,
 		isZoomedOut,
 		scaleContainerWidth,
 	} = useScaleCanvas( {
@@ -367,11 +364,13 @@ function Iframe( {
 							) }
 						>
 							{ contentResizeListener }
-							<StyleProvider document={ iframeDocument }>
-								<ViewportWidthProvider value={ containerWidth }>
+							<WindowContext.Provider
+								value={ iframeDocument.defaultView }
+							>
+								<StyleProvider document={ iframeDocument }>
 									{ children }
-								</ViewportWidthProvider>
-							</StyleProvider>
+								</StyleProvider>
+							</WindowContext.Provider>
 						</body>,
 						iframeDocument.documentElement
 					) }

packages/block-editor/src/components/iframe/use-scale-canvas.js

@@ -484,7 +484,6 @@ export function useScaleCanvas( {
 	return {
 		isZoomedOut,
 		scaleContainerWidth,
-		containerWidth,
 		contentResizeListener,
 		containerResizeListener,
 	};

packages/compose/README.md

@@ -616,6 +616,10 @@ _Parameters_
 -   _object_ `object`: Object which changes to compare.
 -   _prefix_ `string`: Just a prefix to show when console logging.
 
+### WindowContext
+
+Undocumented declaration.
+
 ### withGlobalEvents
 
 > **Deprecated**

packages/compose/src/hooks/use-media-query/index.js

@@ -1,32 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useSyncExternalStore } from '@wordpress/element';
+import { useContext, useMemo, useSyncExternalStore } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { WindowContext } from '../..';
 
 const matchMediaCache = new Map();
 
 /**
  * A new MediaQueryList object for the media query
  *
+ * @param {Window} win     Window.
  * @param {string} [query] Media Query.
  * @return {MediaQueryList|null} A new object for the media query
  */
-function getMediaQueryList( query ) {
+function getMediaQueryList( win, query ) {
 	if ( ! query ) {
 		return null;
 	}
 
 	let match = matchMediaCache.get( query );
 
-	if ( match ) {
-		return match;
-	}
+	// if ( match ) {
+	// 	return match;
+	// }
 
-	if (
-		typeof window !== 'undefined' &&
-		typeof window.matchMedia === 'function'
-	) {
-		match = window.matchMedia( query );
+	if ( typeof win !== 'undefined' && typeof win.matchMedia === 'function' ) {
+		match = win.matchMedia( query );
 		matchMediaCache.set( query, match );
 		return match;
 	}
@@ -41,8 +44,14 @@ function getMediaQueryList( query ) {
  * @return {boolean} return value of the media query.
  */
 export default function useMediaQuery( query ) {
+	const win = useContext( WindowContext );
+
+	if ( ! win ) {
+		throw new TypeError( win );
+	}
+
 	const source = useMemo( () => {
-		const mediaQueryList = getMediaQueryList( query );
+		const mediaQueryList = getMediaQueryList( win, query );
 
 		return {
 			/** @type {(onStoreChange: () => void) => () => void} */
@@ -64,7 +73,7 @@ export default function useMediaQuery( query ) {
 				return mediaQueryList?.matches ?? false;
 			},
 		};
-	}, [ query ] );
+	}, [ win, query ] );
 
 	return useSyncExternalStore(
 		source.subscribe,

packages/compose/src/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
 // The `createHigherOrderComponent` helper and helper types.
 export * from './utils/create-higher-order-component';
 // The `debounce` helper and its types.
@@ -50,3 +55,5 @@ export { default as __experimentalUseDropZone } from './hooks/use-drop-zone';
 export { default as useFocusableIframe } from './hooks/use-focusable-iframe';
 export { default as __experimentalUseFixedWindowList } from './hooks/use-fixed-window-list';
 export { default as useObservableValue } from './hooks/use-observable-value';
+
+export const WindowContext = createContext( window );