diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 3ec701cfc4a14d..d2a908b4126b06 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -1,9 +1,8 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; - +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies */ @@ -19,16 +18,25 @@ export function useZoomOut( zoomOut = true ) { const { __unstableGetEditorMode } = useSelect( blockEditorStore ); const originalEditingMode = useRef( null ); - const mode = __unstableGetEditorMode(); useEffect( () => { // Only set this on mount so we know what to return to when we unmount. if ( ! originalEditingMode.current ) { - originalEditingMode.current = mode; + originalEditingMode.current = __unstableGetEditorMode(); + } + + if ( zoomOut && __unstableGetEditorMode() !== 'zoom-out' ) { + __unstableSetEditorMode( 'zoom-out' ); + } else if ( + ! zoomOut && + __unstableGetEditorMode() === 'zoom-out' && + originalEditingMode.current !== __unstableGetEditorMode() + ) { + __unstableSetEditorMode( originalEditingMode.current ); } return () => { - // We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount + // Restore the original mode on unmount if it was changed to 'zoom-out' if ( __unstableGetEditorMode() === 'zoom-out' && __unstableGetEditorMode() !== originalEditingMode.current @@ -36,18 +44,5 @@ export function useZoomOut( zoomOut = true ) { __unstableSetEditorMode( originalEditingMode.current ); } }; - }, [] ); - - // 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' ); - } else if ( - ! zoomOut && - __unstableGetEditorMode() === 'zoom-out' && - originalEditingMode.current !== mode - ) { - __unstableSetEditorMode( originalEditingMode.current ); - } - }, [ __unstableSetEditorMode, zoomOut, mode ] ); + }, [ zoomOut, __unstableGetEditorMode, __unstableSetEditorMode ] ); } diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index cd4569c45e5801..b937fde36c87cc 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1800,6 +1800,15 @@ export function editorMode( state = 'edit', action ) { return 'edit'; } + // Let inserting a single block always trigger Edit mode. + if ( + action.type === 'INSERT_BLOCKS' && + action.blocks.length === 1 && + action.blocks[ 0 ].innerBlocks.length === 0 + ) { + return 'edit'; + } + if ( action.type === 'SET_EDITOR_MODE' ) { return action.mode; }