From ead511a364a89668c550c9ac3d4bb918969951d1 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 23 Oct 2024 20:46:53 -0700 Subject: [PATCH 1/2] Contain margins with BFC instead of border --- packages/block-editor/src/components/iframe/content.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 1d01f84b5fd1f..1f198d7dda663 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -1,6 +1,9 @@ .block-editor-iframe__body { position: relative; - border: 0.01px solid transparent; + // Ensures margins of children are contained so that the body background paints behind them. + // Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s + // important mostly for post-only views yet conceivably an issue in templated views too. + display: flow-root; } .block-editor-iframe__html { From f4eaee5c0c8e56d05022caa55c59d45de401ddc0 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 24 Oct 2024 16:58:09 +1100 Subject: [PATCH 2/2] Move to block canvas styles in the visual editor --- packages/block-editor/src/components/iframe/content.scss | 4 ---- packages/editor/src/components/visual-editor/index.js | 5 ++++- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 1f198d7dda663..596c177eab2f3 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -1,9 +1,5 @@ .block-editor-iframe__body { position: relative; - // Ensures margins of children are contained so that the body background paints behind them. - // Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s - // important mostly for post-only views yet conceivably an issue in templated views too. - display: flow-root; } .block-editor-iframe__html { diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 6462c4a3f8368..10d37ccd8e52a 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -356,7 +356,10 @@ function VisualEditor( { return [ ...( styles ?? [] ), { - css: `.is-root-container{display:flow-root;${ + // Ensures margins of children are contained so that the body background paints behind them. + // Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s + // important mostly for post-only views yet conceivably an issue in templated views too. + css: `:where(.block-editor-iframe__body){display:flow-root;}.is-root-container{display:flow-root;${ // Some themes will have `min-height: 100vh` for the root container, // which isn't a requirement in auto resize mode. enableResizing ? 'min-height:0!important;' : ''