Skip to content

Commit

Permalink
Restores setting zoom out mode to useZoomOut hook
Browse files Browse the repository at this point in the history
  • Loading branch information
jeryj committed Oct 9, 2024
1 parent fc62bf6 commit d4dbf14
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 22 deletions.
4 changes: 2 additions & 2 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1077,11 +1077,11 @@ _Parameters_

### useZoomOut

A hook used to set the zoomed out view, invoking the hook sets the mode.
A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.

_Parameters_

- _zoomOut_ `boolean`: If we should zoom out or not.
- _zoomOut_ `boolean`: If we should enter into zoomOut mode or not

### Warning

Expand Down
56 changes: 36 additions & 20 deletions packages/block-editor/src/hooks/use-zoom-out.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,55 @@ import { useEffect, useRef } from '@wordpress/element';
*/
import { store as blockEditorStore } from '../store';
import { unlock } from '../lock-unlock';

/**
* A hook used to set the zoomed out view, invoking the hook sets the mode.
* A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
*
* @param {boolean} zoomOut If we should zoom out or not.
* @param {boolean} zoomOut If we should enter into zoomOut mode or not
*/
export function useZoomOut( zoomOut = true ) {
const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
const { __unstableSetEditorMode, setZoomLevel } = unlock(
useDispatch( blockEditorStore )
);
const { __unstableGetEditorMode } = unlock( useSelect( blockEditorStore ) );

const originalIsZoomOutRef = useRef( null );
const originalEditingModeRef = useRef( null );
const mode = __unstableGetEditorMode();

useEffect( () => {
// Only set this on mount so we know what to return to when we unmount.
if ( ! originalIsZoomOutRef.current ) {
originalIsZoomOutRef.current = isZoomOut();
if ( ! originalEditingModeRef.current ) {
originalEditingModeRef.current = mode;
}

// The effect opens the zoom-out view if we want it open and the canvas is not currently zoomed-out.
if ( zoomOut && isZoomOut() === false ) {
return () => {
// We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
if (
__unstableGetEditorMode() === 'zoom-out' &&
__unstableGetEditorMode() !== originalEditingModeRef.current
) {
__unstableSetEditorMode( originalEditingModeRef.current );
setZoomLevel( 100 );
}
};
}, [] );

// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
useEffect( () => {
if ( zoomOut && mode !== 'zoom-out' ) {
__unstableSetEditorMode( 'zoom-out' );
setZoomLevel( 50 );
} else if (
! zoomOut &&
isZoomOut() &&
originalIsZoomOutRef.current !== isZoomOut()
__unstableGetEditorMode() === 'zoom-out' &&
originalEditingModeRef.current !== mode
) {
setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
__unstableSetEditorMode( originalEditingModeRef.current );
setZoomLevel( 100 );
}

return () => {
if ( isZoomOut() && isZoomOut() !== originalIsZoomOutRef.current ) {
setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
}
};
}, [ isZoomOut, setZoomLevel, zoomOut ] );
}, [
__unstableGetEditorMode,
__unstableSetEditorMode,
zoomOut,
setZoomLevel,
] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
}

0 comments on commit d4dbf14

Please sign in to comment.