Move styles from JS to CSS; add comments

WordPress · Jul 15, 2024 · db3f84a · db3f84a
1 parent 2b628c3
commit db3f84a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -13,8 +13,13 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	margin-block: 0 calc(-100% / #{$scale});
 }
 
-.block-editor-iframe__body {
-	position: relative;
+.block-editor-iframe__html {
+	// Keeps body background styles from being clipped.
+	// See: https://github.com/WordPress/gutenberg/issues/44374#issuecomment-1260784743
+	height: auto;
+	// Keeps body background image from repeating.
+	// See: https://github.com/WordPress/gutenberg/issues/46782
+	min-height: 100%;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -65,3 +70,7 @@ iframe[name="editor-canvas"].is-zoomed-out {
 		flex: 1;
 	}
 }
+
+.block-editor-iframe__body {
+	position: relative;
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -306,12 +306,6 @@ function Iframe( {
 	<head>
 		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
-		<style>
-			html{
-				height: auto !important;
-				min-height: 100%;
-			}
-		</style>
 		${ styles }
 		${ scripts }
 	</head>