Double click block to exit zoom out mode (WordPress#64573)

Co-authored-by: getdave <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: MaggieCabrera <[email protected]>
carstingaxion · Sep 4, 2024 · fae4d1b · fae4d1b
1 parent abf72c9
commit fae4d1b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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 ]
+	);
+}