Block editor: give iframe fallback background color (#57330)

* Extracts block editor iframe styles and adds a default background color. * Removing duplicate styles that apply to the editor canvas iframe
WordPress · Jan 2, 2024 · 1b2dac7 · 1b2dac7
1 parent 60bf21e
commit 1b2dac7
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
@@ -63,8 +63,6 @@ export function ExperimentalBlockCanvas( {
 				ref={ resetTypingRef }
 				contentRef={ contentRef }
 				style={ {
-					width: '100%',
-					height: '100%',
 					...iframeProps?.style,
 				} }
 				name="editor-canvas"

diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
@@ -0,0 +1,6 @@
+iframe[name="editor-canvas"] {
+	width: 100%;
+	height: 100%;
+	background-color: $white;
+	display: block;
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -1,5 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-tools/style.scss";

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -27,16 +27,7 @@
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-		background: $white;
-	}
-
 	.edit-site-visual-editor__editor-canvas {
-		height: 100%;
-
 		&.is-focused {
 			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));