This PR ensures that the iframe background is always white regardless…

… of whether it has "padding". Because the background of the visual editor is $gray-900, we use a border to mimic existing padding.
WordPress · Feb 1, 2024 · 44bc6ee · 44bc6ee
1 parent b718580
commit 44bc6ee
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
@@ -2,12 +2,11 @@ iframe[name="editor-canvas"] {
 	width: 100%;
 	height: 100%;
 	display: block;
-}
-
-iframe[name="editor-canvas"]:not(.has-editor-padding) {
 	background-color: $white;
 }
 
 iframe[name="editor-canvas"].has-editor-padding {
-	padding: $grid-unit-60 $grid-unit-60 0;
+	border-width: $grid-unit-60 $grid-unit-60 0;
+	border-style: solid;
+	border-color: $gray-900; // Matches .edit-post-visual-editor and .edit-site-visual-editor backgrounds.
 }
diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -308,6 +308,7 @@ function EditorCanvas( {
 				style: {
 					...iframeProps?.style,
 					...deviceStyles,
+					border: showEditorPadding ? undefined : 0,
 				},
 			} }
 		>