From 44bc6ee3ee473968097c26b7d2431a71e051e5fd Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 1 Feb 2024 12:15:40 +1100 Subject: [PATCH] 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. --- .../block-editor/src/components/block-canvas/style.scss | 7 +++---- packages/editor/src/components/editor-canvas/index.js | 1 + 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index c431b5ca00b0fe..c71b88af1bb82e 100644 --- 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 index 3d561a5c01cda4..92a81fffd3f5aa 100644 --- 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, }, } } >