Try: Contextual frame bg color to avoid artifacting. (#62223)

* Try: Contextual frame bg color to avoid artifacting.

* Try different fix.

Co-authored-by: jasmussen <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: youknowriad <[email protected]>

Author: 4 people

packages/block-editor/src/components/block-canvas/style.scss

@@ -1,7 +1,7 @@
 iframe[name="editor-canvas"] {
+	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 	display: block;
-	background-color: $gray-300;
-	box-sizing: border-box;
+	background-color: transparent;
 }

packages/edit-site/src/components/layout/style.scss

@@ -4,6 +4,11 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
+
+	// Show a dark background in "frame" mode to avoid edge artifacts.
+	&:not(.is-full-canvas) .editor-visual-editor {
+		background: $gray-900;
+	}
 }
 
 .edit-site-layout__hub {