From 436b8d9d454feaaee4fa3276be31947a45a3f56e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Jul 2024 17:50:23 +0100 Subject: [PATCH] Zoom Out: Add a control to enter and leave zoom out mode revert changes Use 100% for desktop and 50% for zoom out update menu items Allow users to set zoom out back to 100% when the patterns tab is open Reset zoom when switching device mode Add text for zoom refactor click handler to a shared function Move in and out of zoom out when resizing below tablet viewport size --- .../src/components/iframe/index.js | 6 +- .../src/components/inserter/menu.js | 17 +++++- .../editor/src/components/header/index.js | 3 +- .../src/components/preview-dropdown/index.js | 56 ++++++++++++++++--- .../src/components/visual-editor/index.js | 14 +++-- 5 files changed, 74 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 669e2fe25a9fb..3a0823f1c3cd4 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -242,10 +242,8 @@ function Iframe( { const isZoomedOut = scale !== 1; useEffect( () => { - if ( ! isZoomedOut ) { - prevContainerWidth.current = containerWidth; - } - }, [ containerWidth, isZoomedOut ] ); + prevContainerWidth.current = containerWidth; + }, [ containerWidth ] ); const disabledRef = useDisabled( { isDisabled: ! readonly } ); const bodyRef = useMergeRefs( [ diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index e0bc29d62e1b9..b47d960d767b7 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -10,6 +10,7 @@ import { forwardRef, useState, useCallback, + useEffect, useMemo, useRef, useLayoutEffect, @@ -17,7 +18,7 @@ import { import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useDebouncedInput } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -32,7 +33,6 @@ import InserterSearchResults from './search-results'; import useInsertionPoint from './hooks/use-insertion-point'; import { store as blockEditorStore } from '../../store'; import TabbedSidebar from '../tabbed-sidebar'; -import { useZoomOut } from '../../hooks/use-zoom-out'; const NOOP = () => {}; function InserterMenu( @@ -149,7 +149,18 @@ function InserterMenu( const showZoomOut = showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab; - useZoomOut( showZoomOut ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); + useEffect( () => { + if ( showZoomOut ) { + __unstableSetEditorMode( 'zoom-out' ); + } + + return () => { + if ( showZoomOut ) { + __unstableSetEditorMode( 'edit' ); // TODO: set back to whatever it was previously + } + }; + }, [ showZoomOut ] ); const inserterSearch = useMemo( () => { if ( selectedTab === 'media' ) { diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 2a60422959600..b8eda30c72186 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -57,7 +57,6 @@ function Header( { showIconLabels, hasFixedToolbar, isNestedEntity, - isZoomedOutView, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { @@ -136,7 +135,7 @@ function Header( { ) } { const { getDeviceType, getCurrentPostType } = select( editorStore ); @@ -39,6 +43,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { }; }, [] ); const { setDeviceType } = useDispatch( editorStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const isMobile = useViewportMatch( 'medium', '<' ); if ( isMobile ) { return null; @@ -70,11 +75,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { * @type {Array} */ const choices = [ - { - value: 'Desktop', - label: __( 'Desktop' ), - icon: desktop, - }, { value: 'Tablet', label: __( 'Tablet' ), @@ -87,6 +87,25 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { }, ]; + if ( isZoomOutExperiment ) { + choices.unshift( { + value: 'ZoomOut', + label: __( 'Zoom to 50%' ), + icon:

{ __( '50%' ) }

, + } ); + choices.unshift( { + value: 'ZoomIn', + label: __( 'Zoom to 100%' ), + icon:

{ __( '100%' ) }

, + } ); + } else { + choices.unshift( { + value: 'Desktop', + label: __( 'Desktop' ), + icon: desktop, + } ); + } + /** * The selected choice. * @@ -110,22 +129,45 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { */ const onSelect = ( value ) => { setDeviceType( value ); + let editorMode = 'edit'; // Rather than setting to edit, we may need to set back to whatever it was previously. if ( value === 'Desktop' ) { speak( __( 'Desktop selected' ), 'assertive' ); } else if ( value === 'Tablet' ) { speak( __( 'Tablet selected' ), 'assertive' ); - } else { + } else if ( value === 'Mobile' ) { speak( __( 'Mobile selected' ), 'assertive' ); + } else if ( value === 'ZoomIn' ) { + speak( __( 'Zoom to 100% selected' ), 'assertive' ); + } else { + speak( __( 'Zoom to 50% selected' ), 'assertive' ); + editorMode = 'zoom-out'; + } + + if ( isZoomOutExperiment ) { + __unstableSetEditorMode( editorMode ); } }; + const getIcon = () => { + if ( isZoomOutExperiment ) { + if ( deviceType === 'Desktop' || deviceType === 'ZoomIn' ) { + return <>{ __( '100%' ) }; + } + if ( deviceType === 'ZoomOut' ) { + return <>{ __( '50%' ) }; + } + } + + return deviceIcons[ deviceType.toLowerCase() ]; + }; + return ( diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 8b4877704f5f1..a67feb530e96a 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -107,6 +107,7 @@ function VisualEditor( { } ) { const [ resizeObserver, sizes ] = useResizeObserver(); const isMobileViewport = useViewportMatch( 'small', '<' ); + const isTabletViewport = useViewportMatch( 'medium', '<' ); const { renderingMode, postContentAttributes, @@ -341,12 +342,13 @@ function VisualEditor( { } ), ] ); - const zoomOutProps = isZoomOutMode - ? { - scale: 'default', - frameSize: '48px', - } - : {}; + const zoomOutProps = + isZoomOutMode && ! isTabletViewport + ? { + scale: 'default', + frameSize: '48px', + } + : {}; const forceFullHeight = postType === NAVIGATION_POST_TYPE; const enableResizing =