Prevent theme styles from being used in the block-based product editor (

woocommerce#38491)
vishstack · May 30, 2023 · 4e530ba · 4e530ba
1 parent 1c7c996
commit 4e530ba
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 23 deletions.
diff --git a/packages/js/product-editor/changelog/fix-product-editor-theme-bleed b/packages/js/product-editor/changelog/fix-product-editor-theme-bleed
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent theme styles from being used in the product editor.
diff --git a/packages/js/product-editor/src/components/block-editor/block-editor.tsx b/packages/js/product-editor/src/components/block-editor/block-editor.tsx
@@ -19,9 +19,6 @@ import {
 	EditorSettings,
 	EditorBlockListSettings,
 	ObserveTyping,
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore No types for this exist yet.
-	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 // It doesn't seem to notice the External dependency block whn @ts-ignore is added.
 // eslint-disable-next-line @woocommerce/dependency-group
@@ -103,7 +100,6 @@ export function BlockEditor( {
 					onChange={ onChange }
 					settings={ settings }
 				>
-					<EditorStyles styles={ settings?.styles } />
 					<div className="editor-styles-wrapper">
 						{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
 						{ /* @ts-ignore No types for this exist yet. */ }

diff --git a/packages/js/product-editor/src/components/content-preview/content-preview.tsx b/packages/js/product-editor/src/components/content-preview/content-preview.tsx
@@ -1,7 +1,19 @@
 /**
  * External dependencies
  */
-import { createElement } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { createElement, Fragment } from '@wordpress/element';
+import {
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore No types for this exist yet.
+	__unstableIframe as Iframe,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore No types for this exist yet.
+	__unstableEditorStyles as EditorStyles,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -47,13 +59,35 @@ const CONTENT_ATTR = [
 ];
 
 export function ContentPreview( { content }: ContentPreviewProps ) {
+	const parentEditorSettings = useSelect( ( select ) => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		return select( blockEditorStore ).getSettings();
+	} );
+
 	return (
-		<div
-			className="woocommerce-content-preview"
-			dangerouslySetInnerHTML={ sanitizeHTML( content, {
-				tags: CONTENT_TAGS,
-				attr: CONTENT_ATTR,
-			} ) }
-		/>
+		<div className="woocommerce-content-preview">
+			<Iframe
+				head={
+					<>
+						<EditorStyles styles={ parentEditorSettings?.styles } />
+						<style>
+							{ `body {
+									overflow: hidden;
+								}` }
+						</style>
+					</>
+				}
+				className="woocommerce-content-preview__iframe"
+			>
+				<div
+					className="woocommerce-content-preview__content"
+					dangerouslySetInnerHTML={ sanitizeHTML( content, {
+						tags: CONTENT_TAGS,
+						attr: CONTENT_ATTR,
+					} ) }
+				/>
+			</Iframe>
+		</div>
 	);
 }
diff --git a/packages/js/product-editor/src/components/content-preview/style.scss b/packages/js/product-editor/src/components/content-preview/style.scss
@@ -1,18 +1,10 @@
 .woocommerce-content-preview {
     border: 1px solid $gray-300;
-    max-height: 144px;
-    overflow: hidden;
-    padding: $gap-large;
+	max-height: 144px;
+	width: 100%;
+	overflow: hidden;
     margin-top: $gap-largest;
 
-    >:first-child {
-        margin-top: 0;
-    }
-
-    > * {
-        max-width: 100%;
-    }
-
     &:after {
         content: '';
         display: block;
@@ -23,4 +15,21 @@
         width: 100%;
         background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 89.5%);
     }
+
+	&__iframe {
+		width: 100%;
+	}
+
+	&__content {
+		box-sizing: border-box;
+		padding: $gap-large;
+
+		>:first-child {
+			margin-top: 0;
+		}
+
+		> * {
+			max-width: 100%;
+		}
+	}
 }