From 2f1cd93cf3ea19c8f398f44ffa1a2097534cad02 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 Oct 2024 09:35:46 +0100 Subject: [PATCH] Zoom Out: Use the zoom-level value to scale the iframe (#66280) Co-authored-by: youknowriad Co-authored-by: ellatrix Co-authored-by: draganescu Co-authored-by: getdave --- .../src/components/block-canvas/index.js | 8 ++++---- packages/block-editor/src/components/iframe/index.js | 2 +- packages/block-editor/src/hooks/use-zoom-out.js | 4 ++-- packages/block-editor/src/store/private-selectors.js | 12 +++++++++++- .../editor/src/components/zoom-out-toggle/index.js | 2 +- storybook/stories/playground/index.story.js | 7 +++++-- storybook/stories/playground/zoom-out/index.js | 10 +++++----- 7 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js index cce3223acd9695..c399f38054ed4d 100644 --- a/packages/block-editor/src/components/block-canvas/index.js +++ b/packages/block-editor/src/components/block-canvas/index.js @@ -40,14 +40,14 @@ export function ExperimentalBlockCanvas( { const clearerRef = useBlockSelectionClearer(); const localRef = useRef(); const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] ); - const isZoomedOut = useSelect( - ( select ) => unlock( select( blockEditorStore ) ).isZoomOut(), + const zoomLevel = useSelect( + ( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(), [] ); const zoomOutIframeProps = - isZoomedOut && ! isTabletViewport + zoomLevel !== 100 && ! isTabletViewport ? { - scale: 'default', + scale: zoomLevel, frameSize: '40px', } : {}; diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 9fc9fd4be64bdd..85e1f12a7c0d63 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -354,7 +354,7 @@ function Iframe( { // but calc( 100px / 2px ) is not. iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-scale', - scale === 'default' + scale === 'auto-scaled' ? ( Math.min( containerWidth, maxWidth ) - parseInt( frameSize ) * 2 ) / scaleContainerWidth diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 914886497bbb38..bc2d325e81d61a 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -28,7 +28,7 @@ export function useZoomOut( zoomOut = true ) { return () => { if ( isZoomOutOnMount && isWideViewport ) { - setZoomLevel( 50 ); + setZoomLevel( 'auto-scaled' ); } else { resetZoomLevel(); } @@ -37,7 +37,7 @@ export function useZoomOut( zoomOut = true ) { useEffect( () => { if ( zoomOut && isWideViewport ) { - setZoomLevel( 50 ); + setZoomLevel( 'auto-scaled' ); } else { resetZoomLevel(); } diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index dff5dc0184a4d2..525aca4c236cbc 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -592,7 +592,17 @@ export function getSectionRootClientId( state ) { * @return {boolean} Whether the editor is zoomed. */ export function isZoomOut( state ) { - return state.zoomLevel < 100; + return state.zoomLevel === 'auto-scaled' || state.zoomLevel < 100; +} + +/** + * Returns whether the zoom level. + * + * @param {Object} state Global application state. + * @return {number|"auto-scaled"} Zoom level. + */ +export function getZoomLevel( state ) { + return state.zoomLevel; } /** diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index e07cb6ac92c833..619cc06c689c0b 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -31,7 +31,7 @@ const ZoomOutToggle = ( { disabled } ) => { if ( isZoomOut ) { resetZoomLevel(); } else { - setZoomLevel( 50 ); + setZoomLevel( 'auto-scaled' ); } }; diff --git a/storybook/stories/playground/index.story.js b/storybook/stories/playground/index.story.js index 699f3a295e9df8..eab17455c2954e 100644 --- a/storybook/stories/playground/index.story.js +++ b/storybook/stories/playground/index.story.js @@ -37,10 +37,13 @@ UndoRedo.parameters = { sourceLink: 'storybook/stories/playground/with-undo-redo/index.js', }; -export const ZoomOut = () => { - return ; +export const ZoomOut = ( props ) => { + return ; }; ZoomOut.parameters = { sourceLink: 'storybook/stories/playground/zoom-out/index.js', }; +ZoomOut.argTypes = { + zoomLevel: { control: { type: 'range', min: 10, max: 100, step: 5 } }, +}; diff --git a/storybook/stories/playground/zoom-out/index.js b/storybook/stories/playground/zoom-out/index.js index fae405c6b0ff30..4f2efcf48523e8 100644 --- a/storybook/stories/playground/zoom-out/index.js +++ b/storybook/stories/playground/zoom-out/index.js @@ -27,17 +27,17 @@ const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules( '@wordpress/edit-site' ); -function EnableZoomOut() { +function EnableZoomOut( { zoomLevel } ) { const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) ); useEffect( () => { - setZoomLevel( 50 ); - }, [ setZoomLevel ] ); + setZoomLevel( zoomLevel ? zoomLevel / 100 : 'auto-scaled' ); + }, [ setZoomLevel, zoomLevel ] ); return null; } -export default function EditorZoomOut() { +export default function EditorZoomOut( { zoomLevel } ) { const [ blocks, updateBlocks ] = useState( [] ); useEffect( () => { @@ -57,7 +57,7 @@ export default function EditorZoomOut() { onInput={ updateBlocks } onChange={ updateBlocks } > - +