Iframe: skip scoping styles (#46752)

WordPress · Sep 11, 2023 · b18a270 · b18a270
1 parent ef5bd83
commit b18a270
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
@@ -34,7 +34,10 @@ export function ExperimentalBlockCanvas( {
 	if ( ! shouldIframe ) {
 		return (
 			<>
-				<EditorStyles styles={ styles } />
+				<EditorStyles
+					styles={ styles }
+					scope=".editor-styles-wrapper"
+				/>
 				<WritingFlow
 					ref={ contentRef }
 					className="editor-styles-wrapper"

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -426,7 +426,6 @@
 }
 
 .block-editor-iframe__body {
-	background-color: $white;
 	transition: all 0.3s;
 	transform-origin: top center;
 }
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
@@ -16,10 +16,9 @@ import { useCallback, useMemo } from '@wordpress/element';
  */
 import transformStyles from '../../utils/transform-styles';
 
-const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 extend( [ namesPlugin, a11yPlugin ] );
 
-function useDarkThemeBodyClassName( styles ) {
+function useDarkThemeBodyClassName( styles, scope ) {
 	return useCallback(
 		( node ) => {
 			if ( ! node ) {
@@ -28,9 +27,7 @@ function useDarkThemeBodyClassName( styles ) {
 
 			const { ownerDocument } = node;
 			const { defaultView, body } = ownerDocument;
-			const canvas = ownerDocument.querySelector(
-				EDITOR_STYLES_SELECTOR
-			);
+			const canvas = scope ? ownerDocument.querySelector( scope ) : body;
 
 			let backgroundColor;
 
@@ -63,11 +60,11 @@ function useDarkThemeBodyClassName( styles ) {
 				body.classList.add( 'is-dark-theme' );
 			}
 		},
-		[ styles ]
+		[ styles, scope ]
 	);
 }
 
-export default function EditorStyles( { styles } ) {
+export default function EditorStyles( { styles, scope } ) {
 	const stylesArray = useMemo(
 		() => Object.values( styles ?? [] ),
 		[ styles ]
@@ -76,9 +73,9 @@ export default function EditorStyles( { styles } ) {
 		() =>
 			transformStyles(
 				stylesArray.filter( ( style ) => style?.css ),
-				EDITOR_STYLES_SELECTOR
+				scope
 			),
-		[ stylesArray ]
+		[ stylesArray, scope ]
 	);
 
 	const transformedSvgs = useMemo(
@@ -94,7 +91,7 @@ export default function EditorStyles( { styles } ) {
 		<>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
-			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
+			<style ref={ useDarkThemeBodyClassName( stylesArray, scope ) } />
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }

diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss
@@ -7,7 +7,7 @@
 
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
-html :where(.editor-styles-wrapper) {
+:where(.editor-styles-wrapper) {
 	/**
 	* The following styles revert to the browser defaults overriding the WPAdmin styles.
 	* This is only needed while the block editor is not being loaded in an iframe.

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -31,6 +31,7 @@
 		display: block;
 		width: 100%;
 		height: 100%;
+		background: $white;
 	}
 
 	.edit-site-visual-editor__editor-canvas {