diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index bdf33c944deb1..deda4e3b9d089 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -646,6 +646,8 @@ function BlockListBlockProvider( props ) { blocksWithSameName.length && blocksWithSameName[ 0 ] !== clientId; + const editorMode = __unstableGetEditorMode(); + return { ...previewContext, mode: getBlockMode( clientId ), @@ -672,6 +674,7 @@ function BlockListBlockProvider( props ) { ) && hasSelectedInnerBlock( clientId ), blockApiVersion: blockType?.apiVersion || 1, blockTitle: match?.title || blockType?.title, + editorMode, isSubtreeDisabled: blockEditingMode === 'disabled' && isBlockSubtreeDisabled( clientId ), @@ -680,8 +683,7 @@ function BlockListBlockProvider( props ) { ! isDragging(), initialPosition: _isSelected && - ( __unstableGetEditorMode() === 'edit' || - __unstableGetEditorMode() === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode + ( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode ? getSelectedBlocksInitialCaretPosition() : undefined, isHighlighted: isBlockHighlighted( clientId ), @@ -728,6 +730,7 @@ function BlockListBlockProvider( props ) { themeSupportsLayout, isTemporarilyEditingAsBlocks, blockEditingMode, + editorMode, mayDisplayControls, mayDisplayParentControls, index, @@ -782,6 +785,7 @@ function BlockListBlockProvider( props ) { hasOverlay, initialPosition, blockEditingMode, + editorMode, isHighlighted, isMultiSelected, isPartiallySelected, diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 15fb83139237c..c3a279a618b5d 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -26,6 +26,7 @@ import { import { useFocusHandler } from './use-focus-handler'; import { useEventHandlers } from './use-selected-block-event-handlers'; import { useNavModeExit } from './use-nav-mode-exit'; +import { useZoomOutModeExit } from './use-zoom-out-mode-exit'; import { useBlockRefProvider } from './use-block-refs'; import { useIntersectionObserver } from './use-intersection-observer'; import { useScrollIntoView } from './use-scroll-into-view'; @@ -85,6 +86,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { name, blockApiVersion, blockTitle, + editorMode, isSelected, isSubtreeDisabled, hasOverlay, @@ -115,6 +117,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { useFocusHandler( clientId ), useEventHandlers( { clientId, isSelected } ), useNavModeExit( clientId ), + useZoomOutModeExit( { editorMode } ), useIsHovered( { clientId } ), useIntersectionObserver(), useMovingAnimation( { triggerAnimationOnChange: index, clientId } ), diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js new file mode 100644 index 0000000000000..bb6edd066f06f --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { useRefEffect } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../../store'; +import { unlock } from '../../../lock-unlock'; + +/** + * Allows Zoom Out mode to be exited by double clicking in the selected block. + * + * @param {string} clientId Block client ID. + */ +export function useZoomOutModeExit( { editorMode } ) { + const { __unstableSetEditorMode } = unlock( + useDispatch( blockEditorStore ) + ); + + return useRefEffect( + ( node ) => { + if ( editorMode !== 'zoom-out' ) { + return; + } + + function onDoubleClick( event ) { + if ( ! event.defaultPrevented ) { + event.preventDefault(); + __unstableSetEditorMode( 'edit' ); + } + } + + node.addEventListener( 'dblclick', onDoubleClick ); + + return () => { + node.removeEventListener( 'dblclick', onDoubleClick ); + }; + }, + [ editorMode, __unstableSetEditorMode ] + ); +}