From 03b4412e223674e8d93afb8c21afa7563f0b46b6 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Wed, 18 Sep 2024 23:12:59 +0530 Subject: [PATCH 1/6] remove: zoomout mount from browse styles --- .../src/components/global-styles/screen-style-variations.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js index 4fefbe39ac55ce..81c404a029bb8a 100644 --- a/packages/edit-site/src/components/global-styles/screen-style-variations.js +++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js @@ -3,7 +3,6 @@ */ import { Card, CardBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useZoomOut } from '@wordpress/block-editor'; /** * Internal dependencies @@ -12,10 +11,6 @@ import ScreenHeader from './header'; import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content'; function ScreenStyleVariations() { - // Move to zoom out mode when this component is mounted - // and back to the previous mode when unmounted. - useZoomOut(); - return ( <> Date: Wed, 18 Sep 2024 23:39:53 +0530 Subject: [PATCH 2/6] revert: zoomout changes --- .../src/components/global-styles/screen-style-variations.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js index 81c404a029bb8a..4fefbe39ac55ce 100644 --- a/packages/edit-site/src/components/global-styles/screen-style-variations.js +++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js @@ -3,6 +3,7 @@ */ import { Card, CardBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { useZoomOut } from '@wordpress/block-editor'; /** * Internal dependencies @@ -11,6 +12,10 @@ import ScreenHeader from './header'; import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content'; function ScreenStyleVariations() { + // Move to zoom out mode when this component is mounted + // and back to the previous mode when unmounted. + useZoomOut(); + return ( <> Date: Wed, 18 Sep 2024 23:41:08 +0530 Subject: [PATCH 3/6] update: container width variable --- 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 3e022cf95ae556..cf2fa6c39ac2ae 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -456,7 +456,7 @@ function Iframe( { '--wp-block-editor-iframe-zoom-out-container-width': isZoomedOut && `${ containerWidth }px`, '--wp-block-editor-iframe-zoom-out-prev-container-width': - isZoomedOut && `${ prevContainerWidthRef.current }px`, + isZoomedOut && `${ containerWidth.current }px`, } } > { iframe } From 57f9c91eb467ec93ae2c972bef206408ac846f88 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Thu, 19 Sep 2024 00:09:49 +0530 Subject: [PATCH 4/6] revert: js changes --- 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 cf2fa6c39ac2ae..3e022cf95ae556 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -456,7 +456,7 @@ function Iframe( { '--wp-block-editor-iframe-zoom-out-container-width': isZoomedOut && `${ containerWidth }px`, '--wp-block-editor-iframe-zoom-out-prev-container-width': - isZoomedOut && `${ containerWidth.current }px`, + isZoomedOut && `${ prevContainerWidthRef.current }px`, } } > { iframe } From 18ff9c766fe0f915f95e0d75bffe9b2e1c540652 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Thu, 19 Sep 2024 00:10:25 +0530 Subject: [PATCH 5/6] remove: unnessary css causing issue with scroll to appear at middle of screen --- packages/block-editor/src/components/iframe/content.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 90b887993bf6db..bbf22acea7524a 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -14,13 +14,6 @@ display: flex; } -.block-editor-iframe__scale-container.is-zoomed-out { - $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; - margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2); -} - .block-editor-iframe__html { border: 0 solid $gray-300; transform-origin: top center; From e24c9b7b1f118641ea5c99c53054fa2fb6b365ae Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Thu, 19 Sep 2024 18:45:26 +0530 Subject: [PATCH 6/6] remove: transform scale & update border calculation to make zoomout work on small display --- packages/block-editor/src/components/iframe/content.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index bbf22acea7524a..ec25ecac75540d 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -27,13 +27,12 @@ $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}); background-color: $gray-300; // 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: calc(#{$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.