Move iframe styles into own file

WordPress · Apr 26, 2024 · 8b93816 · 8b93816
1 parent add28e3
commit 8b93816
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 45 deletions.
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -477,48 +477,3 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		margin-bottom: auto;
 	}
 }
-
-.block-editor-iframe__html {
-	transition: transform 0.3s;
-	transform-origin: top center;
-	@include reduce-motion("transition");
-}
-
-.block-editor-iframe__html.is-zoomed-out {
-	$scale: var(--wp-zoom-out-scale);
-	$frame-size: var(--wp-zoom-out-frame-size);
-	$inner-hight: var(--wp-zoom-out-inner-height);
-	$content-height: var(--wp-zoom-out-content-height);
-
-	transform: scale( #{$scale} );
-
-	background-color: $gray-300;
-
-	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
-	// layout, so we use border matching the background instead of margins.
-	border: calc( #{$frame-size} / #{$scale} ) solid $gray-300;
-
-	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
-	// so we need to adjust the height of the content to match the scale by using negative margins.
-	$extra-content-height: calc( #{$content-height} * (1 - #{$scale}) );
-	$total-frame-height: calc( 2 * #{$frame-size} );
-	$total-height: calc( #{$extra-content-height} + #{$total-frame-height} );
-	margin-bottom: calc( -1 * #{$total-height} );
-
-	body {
-		min-height: calc( ( #{$inner-height} - #{$total-frame-height} ) / #{$scale} );
-		display: flex;
-		flex-direction: column;
-
-		> .is-root-container {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-
-			> main {
-				flex: 1;
-			}
-		}
-	}
-}
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -0,0 +1,44 @@
+.block-editor-iframe__html {
+	transform-origin: top center;
+	transition: transform 0.3s;
+	@include reduce-motion("transition");
+}
+
+.block-editor-iframe__html.is-zoomed-out {
+	$scale: var(--wp-zoom-out-scale);
+	$frame-size: var(--wp-zoom-out-frame-size);
+	$inner-height: var(--wp-zoom-out-inner-height);
+	$content-height: var(--wp-zoom-out-content-height);
+
+	transform: scale( #{$scale} );
+
+	background-color: $gray-300;
+
+	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
+	// layout, so we use border matching the background instead of margins.
+	border: calc( #{$frame-size} / #{$scale} ) solid $gray-300;
+
+	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
+	// so we need to adjust the height of the content to match the scale by using negative margins.
+	$extra-content-height: calc( #{$content-height} * (1 - #{$scale}) );
+	$total-frame-height: calc( 2 * #{$frame-size} );
+	$total-height: calc( #{$extra-content-height} + #{$total-frame-height} );
+	margin-bottom: calc( -1 * #{$total-height} );
+
+	body {
+		min-height: calc( ( #{$inner-height} - #{$total-frame-height} ) / #{$scale} );
+		display: flex;
+		flex-direction: column;
+
+		> .is-root-container {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+
+			> main {
+				flex: 1;
+			}
+		}
+	}
+}
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
@@ -7,6 +7,7 @@
 @import "./components/block-variation-picker/content.scss";
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
+@import "./components/iframe/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";