Add a FrameProvider to be used to support CSS-in-JS styles inside ifr…

…ames
WordPress · Apr 21, 2021 · 7633796 · 7633796
1 parent fe37913
commit 7633796
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -29,6 +29,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
+		"@emotion/weak-memoize": "0.2.2",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/blocks": "file:../blocks",

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -9,6 +9,7 @@ import {
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+import { __experimentalFrameProvider as FrameProvider } from '@wordpress/components';
 
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
@@ -182,7 +183,13 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 			title={ __( 'Editor canvas' ) }
 			name="editor-canvas"
 		>
-			{ iframeDocument && createPortal( children, iframeDocument.body ) }
+			{ iframeDocument &&
+				createPortal(
+					<FrameProvider iframeDocument={ iframeDocument }>
+						{ children }
+					</FrameProvider>,
+					iframeDocument.body
+				) }
 			{ iframeDocument && createPortal( head, iframeDocument.head ) }
 		</iframe>
 	);

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -27,6 +27,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
+		"@emotion/cache": "^10.0.27",
 		"@emotion/core": "^10.1.1",
 		"@emotion/css": "^10.0.22",
 		"@emotion/hash": "^0.8.0",

diff --git a/packages/components/src/frame-provider/index.js b/packages/components/src/frame-provider/index.js
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { CacheProvider } from '@emotion/core';
+import createCache from '@emotion/cache';
+import memoize from 'memize';
+
+const memoizedCreateCacheWithContainer = memoize( ( container ) => {
+	return createCache( { container } );
+} );
+
+export default function FrameProvider( { children, iframeDocument } ) {
+	if ( ! iframeDocument ) {
+		return null;
+	}
+
+	const cache = memoizedCreateCacheWithContainer( iframeDocument.head );
+
+	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
+}
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -132,6 +132,7 @@ export {
 	Provider as SlotFillProvider,
 	useSlot as __experimentalUseSlot,
 } from './slot-fill';
+export { default as __experimentalFrameProvider } from './frame-provider';
 
 // Higher-Order Components
 export {