From 786f8c9dc5a8298a81f0713371e880e047eb40ba Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 9 Oct 2024 08:41:19 +0200 Subject: [PATCH 1/3] Zoom layout shift: Alternate fix. --- packages/block-editor/src/components/iframe/content.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 90b887993bf6d..6a766648fd3da 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -25,6 +25,10 @@ border: 0 solid $gray-300; transform-origin: top center; @include editor-canvas-resize-animation; + + // Applying flex here prevents the body element, and title inside, from margin-collapse. + display: flex; + flex-direction: column; } .block-editor-iframe__html.is-zoomed-out { @@ -51,8 +55,6 @@ body { min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale}); - display: flex; - flex-direction: column; > .is-root-container:not(.wp-block-post-content) { flex: 1; From 231d06f71625072b82922de8a5d60271ab583151 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:05:02 +1100 Subject: [PATCH 2/3] Add body tag nesting --- packages/block-editor/src/components/iframe/content.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 6a766648fd3da..394af617979b2 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -27,8 +27,10 @@ @include editor-canvas-resize-animation; // Applying flex here prevents the body element, and title inside, from margin-collapse. - display: flex; - flex-direction: column; + body { + display: flex; + flex-direction: column; + } } .block-editor-iframe__html.is-zoomed-out { From 79b8fe34c4f6d02b1bd9f3836555fffb4c857738 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:23:06 +1100 Subject: [PATCH 3/3] Try additional rule --- packages/block-editor/src/components/iframe/content.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 394af617979b2..dc5cbb91a80fe 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -27,10 +27,8 @@ @include editor-canvas-resize-animation; // Applying flex here prevents the body element, and title inside, from margin-collapse. - body { - display: flex; - flex-direction: column; - } + display: flex; + flex-direction: column; } .block-editor-iframe__html.is-zoomed-out { @@ -57,6 +55,8 @@ body { min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale}); + display: flex; + flex-direction: column; > .is-root-container:not(.wp-block-post-content) { flex: 1;