From 3cd5c19b83bd1fd64d1a1308ccb1b77820cbb7b2 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 1 Oct 2024 20:43:59 -0700 Subject: [PATCH 1/7] Factor `frameSize` into scaling and document width styling --- .../src/components/iframe/content.scss | 1 + .../block-editor/src/components/iframe/index.js | 16 +++++++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 90b887993bf6db..b6531d84afb56c 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -48,6 +48,7 @@ $total-frame-height: calc(2 * #{$frame-size}); $total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px); margin-bottom: calc(-1 * #{$total-height}); + margin-inline: calc(-1 * #{$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 3e022cf95ae556..60129e7395ab10 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -306,16 +306,26 @@ function Iframe( { iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); const maxWidth = 750; + const frameSizeIsNumber = frameSize === 'number'; + // The added space from `frameSize` has to be accounted for in scale calculation. + // This just punts in case `frameSize` can’t be treated as a pixel value. It’d + // probably be good to formally type `frameSize` as number and treat it as pixels. + // Core usage is pixels only and supporting any unit would be complicated. + let frameWidth = 0; + if ( frameSizeIsNumber || frameSize.endsWith( 'px' ) ) { + frameWidth = + 2 * ( frameSizeIsNumber ? frameSize : parseInt( frameSize ) ); + } + const usedWidth = Math.min( containerWidth, maxWidth ) - frameWidth; iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-scale', scale === 'default' - ? Math.min( containerWidth, maxWidth ) / - prevContainerWidthRef.current + ? usedWidth / prevContainerWidthRef.current : scale ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-frame-size', - typeof frameSize === 'number' ? `${ frameSize }px` : frameSize + frameSizeIsNumber ? `${ frameSize }px` : frameSize ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-content-height', From 167d5f25ef7100920239c5d639620cefa9d67d80 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 2 Oct 2024 08:07:22 -0700 Subject: [PATCH 2/7] Avoid decimals for pixel precision --- .../block-editor/src/components/iframe/content.scss | 6 +++--- packages/block-editor/src/components/iframe/index.js | 11 +++++++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index b6531d84afb56c..55892df365dd8d 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -40,15 +40,15 @@ // Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome // layout, so we use border matching the background instead of margins. - border: calc(#{$frame-size} / #{$scale}) solid $gray-300; + border: $frame-size solid $gray-300; // 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 * (#{$scale} * #{$frame-size})); $total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px); margin-bottom: calc(-1 * #{$total-height}); - margin-inline: calc(-1 * #{$frame-size} / #{$scale}); + margin-inline: calc(-1 * #{$frame-size}); 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 60129e7395ab10..653b68f757277e 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -317,15 +317,18 @@ function Iframe( { 2 * ( frameSizeIsNumber ? frameSize : parseInt( frameSize ) ); } const usedWidth = Math.min( containerWidth, maxWidth ) - frameWidth; - iframeDocument.documentElement.style.setProperty( - '--wp-block-editor-iframe-zoom-out-scale', + const usedScale = scale === 'default' ? usedWidth / prevContainerWidthRef.current - : scale + : scale; + const integerFrameSize = Math.round( frameWidth / 2 / usedScale ); + iframeDocument.documentElement.style.setProperty( + '--wp-block-editor-iframe-zoom-out-scale', + usedScale ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-frame-size', - frameSizeIsNumber ? `${ frameSize }px` : frameSize + frameWidth !== 0 ? `${ integerFrameSize }px` : frameSize ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-content-height', From f86a7cc7d9a732d0695fbab69e677b4e68c843d8 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 7 Oct 2024 08:05:44 -0700 Subject: [PATCH 3/7] Fix testing for number type of `frameSize` --- packages/block-editor/src/components/iframe/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 653b68f757277e..23e62de50a56f2 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -306,7 +306,7 @@ function Iframe( { iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); const maxWidth = 750; - const frameSizeIsNumber = frameSize === 'number'; + const frameSizeIsNumber = typeof frameSize === 'number'; // The added space from `frameSize` has to be accounted for in scale calculation. // This just punts in case `frameSize` can’t be treated as a pixel value. It’d // probably be good to formally type `frameSize` as number and treat it as pixels. From 7a24f82028632e7b7588bbce9d28d7024a3db3b5 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 7 Oct 2024 08:07:55 -0700 Subject: [PATCH 4/7] Revise comment about `frameSize` in scale calculation --- packages/block-editor/src/components/iframe/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 23e62de50a56f2..a4480602f075db 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -307,10 +307,10 @@ function Iframe( { const maxWidth = 750; const frameSizeIsNumber = typeof frameSize === 'number'; - // The added space from `frameSize` has to be accounted for in scale calculation. - // This just punts in case `frameSize` can’t be treated as a pixel value. It’d - // probably be good to formally type `frameSize` as number and treat it as pixels. - // Core usage is pixels only and supporting any unit would be complicated. + // The added space from `frameSize` has to be factored in for accurate scale calculation, + // but if `frameSize` can’t be treated as a pixel value it’s left out. Accounting for other + // units (e.g. rem or %) would be complicated. Usage in core is pixels only. If we can + // formally type `frameSize` as number (of pixels) the conditionals here can be obviated. let frameWidth = 0; if ( frameSizeIsNumber || frameSize.endsWith( 'px' ) ) { frameWidth = From 1374d0bda67e653240cea65466af038f7f64f187 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 8 Oct 2024 12:15:08 -0700 Subject: [PATCH 5/7] Restore `frameSize` counter-scaling for non-pixel values --- packages/block-editor/src/components/iframe/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index a4480602f075db..1f2965419b931a 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -328,7 +328,9 @@ function Iframe( { ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-frame-size', - frameWidth !== 0 ? `${ integerFrameSize }px` : frameSize + frameWidth !== 0 + ? `${ integerFrameSize }px` + : `calc( ${ frameSize } / ${ usedScale } )` ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-content-height', From b542ae4da2d4c685f7a654d0f9ba47b07f114a27 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 9 Oct 2024 19:12:00 -0700 Subject: [PATCH 6/7] Remove unused CSS variable --- packages/block-editor/src/components/iframe/content.scss | 1 - packages/block-editor/src/components/iframe/index.js | 7 ------- 2 files changed, 8 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 55892df365dd8d..337a383c376656 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -32,7 +32,6 @@ $frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size); $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); transform: scale(#{$scale}); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 1f2965419b931a..744bde6d348cf6 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -344,10 +344,6 @@ function Iframe( { '--wp-block-editor-iframe-zoom-out-container-width', `${ containerWidth }px` ); - iframeDocument.documentElement.style.setProperty( - '--wp-block-editor-iframe-zoom-out-prev-container-width', - `${ prevContainerWidthRef.current }px` - ); return () => { iframeDocument.documentElement.classList.remove( 'is-zoomed-out' ); @@ -367,9 +363,6 @@ function Iframe( { iframeDocument.documentElement.style.removeProperty( '--wp-block-editor-iframe-zoom-out-container-width' ); - iframeDocument.documentElement.style.removeProperty( - '--wp-block-editor-iframe-zoom-out-prev-container-width' - ); }; }, [ scale, From 696c0d5708913930339c4cf3d525ad24dd9864e3 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 9 Oct 2024 19:34:48 -0700 Subject: [PATCH 7/7] Revise comment again --- packages/block-editor/src/components/iframe/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 744bde6d348cf6..3fe527bcc8e700 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -307,10 +307,10 @@ function Iframe( { const maxWidth = 750; const frameSizeIsNumber = typeof frameSize === 'number'; - // The added space from `frameSize` has to be factored in for accurate scale calculation, - // but if `frameSize` can’t be treated as a pixel value it’s left out. Accounting for other - // units (e.g. rem or %) would be complicated. Usage in core is pixels only. If we can - // formally type `frameSize` as number (of pixels) the conditionals here can be obviated. + // `frameSize` has to be factored into default scale calculation because it narrows the + // content width. If it’s a non-pixel value it’s still applied in the style but can’t be + // directly factored into the scale. A consumer could pass a `scale` that has factored in + // their non-pixel `frameSize` if they need to. Core relies only on pixel values. let frameWidth = 0; if ( frameSizeIsNumber || frameSize.endsWith( 'px' ) ) { frameWidth =