From 763379625a9056e9e3cb5de499fe8f5273b39cae Mon Sep 17 00:00:00 2001
From: sarayourfriend <sarayourfriend@fastmail.com>
Date: Tue, 20 Apr 2021 09:29:21 -0700
Subject: [PATCH] Add a FrameProvider to be used to support CSS-in-JS styles
 inside iframes

---
 package-lock.json                             |  9 +++++++++
 packages/block-editor/package.json            |  1 +
 .../src/components/iframe/index.js            |  9 ++++++++-
 packages/components/package.json              |  1 +
 .../components/src/frame-provider/index.js    | 20 +++++++++++++++++++
 packages/components/src/index.js              |  1 +
 6 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/frame-provider/index.js

diff --git a/package-lock.json b/package-lock.json
index 93558fe17b5188..77001c43816dee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13131,6 +13131,7 @@
 			"version": "file:packages/block-editor",
 			"requires": {
 				"@babel/runtime": "^7.13.10",
+				"@emotion/weak-memoize": "0.2.2",
 				"@wordpress/a11y": "file:packages/a11y",
 				"@wordpress/blob": "file:packages/blob",
 				"@wordpress/blocks": "file:packages/blocks",
@@ -13167,6 +13168,13 @@
 				"rememo": "^3.0.0",
 				"tinycolor2": "^1.4.2",
 				"traverse": "^0.6.6"
+			},
+			"dependencies": {
+				"@emotion/weak-memoize": {
+					"version": "0.2.2",
+					"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz",
+					"integrity": "sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA=="
+				}
 			}
 		},
 		"@wordpress/block-library": {
@@ -13258,6 +13266,7 @@
 			"version": "file:packages/components",
 			"requires": {
 				"@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/block-editor/package.json b/packages/block-editor/package.json
index 231b7062a1b865..5b19df747fc08c 100644
--- 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
index dc581352c1c50c..fb3b574d96dbbc 100644
--- 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
index eeb1985a8c435a..06c3c8d28a14f7 100644
--- 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
new file mode 100644
index 00000000000000..758fe0608ec7f3
--- /dev/null
+++ 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
index d89ec5a389aed5..763b8fed692e04 100644
--- 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 {