From 1b2dac78b60c4bab6d1dcb771498d99fbea2ff54 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Wed, 3 Jan 2024 09:43:36 +1100
Subject: [PATCH] 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
---
 .../block-editor/src/components/block-canvas/index.js    | 2 --
 .../block-editor/src/components/block-canvas/style.scss  | 6 ++++++
 packages/block-editor/src/style.scss                     | 1 +
 .../edit-site/src/components/block-editor/style.scss     | 9 ---------
 4 files changed, 7 insertions(+), 11 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-canvas/style.scss

diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 7d64897690721..fea9689cea5e7 100644
--- 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
new file mode 100644
index 0000000000000..54ccd407d74a2
--- /dev/null
+++ 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
index 80489479724ff..2d7b154739445 100644
--- 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
index 1da43730d9575..1c9cac3aa5eb4 100644
--- 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));