From 38de9fc24b6ee46ae82b879416026a7f5b59c7f2 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 9 Oct 2024 13:44:49 -0500 Subject: [PATCH] Calculation in CSS --- .../src/components/iframe/content.scss | 6 ++++++ .../block-editor/src/components/iframe/index.js | 14 ++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 3daa659cf5ebfa..5ba58f47cd6265 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -21,9 +21,15 @@ $inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height); $content-height: var(--wp-block-editor-iframe-zoom-out-content-height); $prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width); + $container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw); + $max-width: 750px; transform: scale(#{$scale}); + &.is-default-scale { + transform: scale( calc( ( min( #{$container-width}, #{$max-width} ) - 2 * #{$frame-size} ) / #{$prev-container-width} ) ); + } + background-color: $gray-300; // Chrome seems to respect that transform scale shouldn't affect the layout size of the element, diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index f9ef74b8cd1e49..809f7f83632081 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -305,14 +305,13 @@ function Iframe( { iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); - const maxWidth = 750; + if ( scale === 'default' ) { + iframeDocument.documentElement.classList.add( 'is-default-scale' ); + } + iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-scale', - scale === 'default' - ? ( Math.min( containerWidth, maxWidth ) - - parseInt( frameSize ) * 2 ) / - prevContainerWidthRef.current - : scale + scale ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-frame-size', @@ -356,6 +355,9 @@ function Iframe( { iframeDocument.documentElement.style.removeProperty( '--wp-block-editor-iframe-zoom-out-prev-container-width' ); + iframeDocument.documentElement.classList.remove( + 'is-default-scale' + ); }; }, [ scale,