[Block Editor]: Inject useBlockPreview styles in iframe

WordPress · Jan 12, 2023 · dd0fa73 · dd0fa73
1 parent 4f0e10a
commit dd0fa73
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/packages/block-editor/src/components/block-preview/content.scss b/packages/block-editor/src/components/block-preview/content.scss
@@ -2,3 +2,26 @@
 .block-editor-block-preview__content-iframe .block-list-appender {
 	display: none;
 }
+
+.block-editor-block-preview__live-content {
+	* {
+		pointer-events: none;
+	}
+
+	// Hide the block appender, as the block is not editable in this context.
+	.block-list-appender {
+		display: none;
+	}
+
+	// Revert button disable styles to ensure that button styles render as they will on the
+	// front end of the site. For example, this ensures that Social Links icons display correctly.
+	.components-button:disabled {
+		opacity: initial;
+	}
+
+	// Hide placeholders.
+	.components-placeholder,
+	.block-editor-block-list__block[data-empty="true"] {
+		display: none;
+	}
+}
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -35,29 +35,6 @@
 	}
 }
 
-.block-editor-block-preview__live-content {
-	* {
-		pointer-events: none;
-	}
-
-	// Hide the block appender, as the block is not editable in this context.
-	.block-list-appender {
-		display: none;
-	}
-
-	// Revert button disable styles to ensure that button styles render as they will on the
-	// front end of the site. For example, this ensures that Social Links icons display correctly.
-	.components-button:disabled {
-		opacity: initial;
-	}
-
-	// Hide placeholders.
-	.components-placeholder,
-	.block-editor-block-list__block[data-empty="true"] {
-		display: none;
-	}
-}
-
 // The goal of this pseudo-element is to cover the iframe
 // otherwise it won't be able to drag elements containing
 // the preview iframe in Safari.