Zoom out mode: only apply grey background for mode (#59377)

* Zoom out mode: only apply grey background for mode * Add default body color Co-authored-by: ellatrix <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · Feb 27, 2024 · 7eb0a5a · 7eb0a5a
1 parent c349d27
commit 7eb0a5a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -455,6 +455,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .block-editor-iframe__html {
 	transition: all 0.3s;
-	background-color: $gray-300;
 	transform-origin: top center;
 }
+
+.block-editor-iframe__html[style*="scale"] {
+	background-color: $gray-300;
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -245,7 +245,19 @@ function Iframe( {
 	<head>
 		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
-		<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
+		<style>
+			html{
+				height: auto !important;
+				min-height: 100%;
+			}
+
+			body {
+				margin: 0;
+				/* Default background color in case zoom out mode background
+				colors the html element */
+				background: white;
+			}
+		</style>
 		${ styles }
 		${ scripts }
 	</head>