From 763379625a9056e9e3cb5de499fe8f5273b39cae Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Tue, 20 Apr 2021 09:29:21 -0700 Subject: [PATCH 1/3] 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( + + { children } + , + iframeDocument.body + ) } { iframeDocument && createPortal( head, iframeDocument.head ) } ); 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 { children }; +} 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 { From 5a46547a1a3183ed648b24edd83da85282a976cb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Apr 2021 15:51:19 +0100 Subject: [PATCH 2/3] Remove weak memoize dependency --- package-lock.json | 8 -------- packages/block-editor/package.json | 1 - 2 files changed, 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 77001c43816dee..7fa6f8066ad227 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13131,7 +13131,6 @@ "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", @@ -13168,13 +13167,6 @@ "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": { diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 5b19df747fc08c..231b7062a1b865 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -29,7 +29,6 @@ ], "dependencies": { "@babel/runtime": "^7.13.10", - "@emotion/weak-memoize": "0.2.2", "@wordpress/a11y": "file:../a11y", "@wordpress/blob": "file:../blob", "@wordpress/blocks": "file:../blocks", From 3b0732e2490352c9c590fa31b1429aea00ce7e77 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Apr 2021 16:14:56 +0100 Subject: [PATCH 3/3] Remait it StyleProvider --- packages/block-editor/src/components/iframe/index.js | 6 +++--- packages/components/src/index.js | 2 +- .../src/{frame-provider => style-provider}/index.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) rename packages/components/src/{frame-provider => style-provider}/index.js (87%) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index fb3b574d96dbbc..40e677aedd2283 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -9,7 +9,7 @@ import { } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { useMergeRefs } from '@wordpress/compose'; -import { __experimentalFrameProvider as FrameProvider } from '@wordpress/components'; +import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components'; const BODY_CLASS_NAME = 'editor-styles-wrapper'; const BLOCK_PREFIX = 'wp-block'; @@ -185,9 +185,9 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) { > { iframeDocument && createPortal( - + { children } - , + , iframeDocument.body ) } { iframeDocument && createPortal( head, iframeDocument.head ) } diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 763b8fed692e04..89fce1acb4f836 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -132,7 +132,7 @@ export { Provider as SlotFillProvider, useSlot as __experimentalUseSlot, } from './slot-fill'; -export { default as __experimentalFrameProvider } from './frame-provider'; +export { default as __experimentalStyleProvider } from './style-provider'; // Higher-Order Components export { diff --git a/packages/components/src/frame-provider/index.js b/packages/components/src/style-provider/index.js similarity index 87% rename from packages/components/src/frame-provider/index.js rename to packages/components/src/style-provider/index.js index 758fe0608ec7f3..0f57ce8945edb1 100644 --- a/packages/components/src/frame-provider/index.js +++ b/packages/components/src/style-provider/index.js @@ -9,7 +9,7 @@ const memoizedCreateCacheWithContainer = memoize( ( container ) => { return createCache( { container } ); } ); -export default function FrameProvider( { children, iframeDocument } ) { +export default function StyleProvider( { children, iframeDocument } ) { if ( ! iframeDocument ) { return null; }