Skip to content

Commit

Permalink
Zoom out: fix scaling issues (#65998)
Browse files Browse the repository at this point in the history
* 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 38de9fc.

* 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 <jones.jeremydavid@gmail.com>
Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
  • Loading branch information
10 people committed Oct 16, 2024
1 parent 55c9052 commit a9ab8b8
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 5 deletions.
10 changes: 6 additions & 4 deletions packages/block-editor/src/components/iframe/content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
}

.block-editor-iframe__html {
border: 0 solid $gray-300;
transform-origin: top center;
@include editor-canvas-resize-animation;
}
Expand All @@ -20,14 +19,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});
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/iframe/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/iframe/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

0 comments on commit a9ab8b8

Please sign in to comment.