diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 14910e3007768f..70d6bbad99e522 100644
--- 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
index 52f26217730773..3e87ba317d1350 100644
--- 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
index 3c66c5beb08d38..08005ae83a99b1 100644
--- 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
index 6c3cc7b1d45be8..cf5e5a1596df59 100644
--- 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
index dce224998c0c07..15fc8e180f818f 100644
--- 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 {