From ced4f8ca1204fb1737faf44f46e1d27aa78d966e Mon Sep 17 00:00:00 2001 From: Maggie Date: Thu, 10 Oct 2024 17:51:44 +0200 Subject: [PATCH] Zoom out: fix scaling issues (#65998) * changed from using borders to use pseudo elements * added comments * Include frame size in the scaling calculation Instead of adding the frame size as a border (which causes reflow issues), include the frame size in the scaling calculation so there's always a left/right gutter of the frame size. * Account for scaling in the frame height * Calculation in CSS * Revert "Calculation in CSS" This reverts commit 38de9fc24b6ee46ae82b879416026a7f5b59c7f2. * Add comment about why the calculation for scaling needs to happen in the JS * Force px value for frameSize * Restore previous frameSize var setting * Add back line break * Use padding top/bottom instead of before/after for top/bottom frame * Remove more before/after css since we are using padding --------- Co-authored-by: Jerry Jones Co-authored-by: Alex Lende Co-authored-by: MaggieCabrera Co-authored-by: jeryj Co-authored-by: ajlende Co-authored-by: richtabor Co-authored-by: ndiego Co-authored-by: getdave Co-authored-by: talldan --- .../block-editor/src/components/iframe/content.scss | 10 ++++++---- packages/block-editor/src/components/iframe/index.js | 8 +++++++- packages/block-editor/src/components/iframe/style.scss | 1 + 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 9e908da09c84f0..206f1adf329461 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -3,7 +3,6 @@ } .block-editor-iframe__html { - border: 0 solid $gray-300; transform-origin: top center; @include editor-canvas-resize-animation; } @@ -19,14 +18,17 @@ background-color: $gray-300; - padding: calc(#{$frame-size} / #{$scale}) 0; - // Chrome seems to respect that transform scale shouldn't affect the layout size of the element, // so we need to adjust the height of the content to match the scale by using negative margins. $extra-content-height: calc(#{$content-height} * (1 - #{$scale})); - $total-frame-height: calc(2 * #{$frame-size}); + $total-frame-height: calc(2 * #{$frame-size} / #{$scale}); $total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px); margin-bottom: calc(-1 * #{$total-height}); + // Add the top/bottom frame size. We use scaling to account for the left/right, as + // the padding left/right causes the contents to reflow, which breaks the 1:1 scaling + // of the content. + padding-top: calc(#{$frame-size} / #{$scale}); + padding-bottom: calc(#{$frame-size} / #{$scale}); body { min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale}); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index fa7ce26526f410..d234339909a5c1 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -306,13 +306,19 @@ function Iframe( { iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); const maxWidth = 750; + // This scaling calculation has to happen within the JS because CSS calc() can + // only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid + // but calc( 100px / 2px ) is not. iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-scale', scale === 'default' - ? Math.min( containerWidth, maxWidth ) / + ? ( Math.min( containerWidth, maxWidth ) - + parseInt( frameSize ) * 2 ) / prevContainerWidthRef.current : scale ); + + // frameSize has to be a px value for the scaling and frame size to be computed correctly. iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-frame-size', typeof frameSize === 'number' ? `${ frameSize }px` : frameSize diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss index e460df3ab3e0a9..dcddcdf0950a45 100644 --- a/packages/block-editor/src/components/iframe/style.scss +++ b/packages/block-editor/src/components/iframe/style.scss @@ -12,5 +12,6 @@ $container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw); $prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw); width: $prev-container-width; + // This is to offset the movement of the iframe when we open sidebars margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2); }