Update/replace edit button with enter on selection (#65760)

WordPress · Oct 16, 2024 · 930b9e6 · 930b9e6
1 parent bbf2aad
commit 930b9e6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/...ock-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/...ock-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
@@ -10,6 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Adds block behaviour:
@@ -20,9 +21,18 @@ import { store as blockEditorStore } from '../../../store';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		isZoomOut,
+		__unstableGetEditorMode,
+	} = unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		__unstableSetEditorMode,
+		resetZoomLevel,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -56,7 +66,14 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if ( keyCode === ENTER ) {
+				if (
+					keyCode === ENTER &&
+					__unstableGetEditorMode() === 'zoom-out' &&
+					isZoomOut()
+				) {
+					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
+				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
@@ -88,6 +105,10 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
+			__unstableGetEditorMode,
+			__unstableSetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
 		]
 	);
 }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { dragHandle, trash, edit } from '@wordpress/icons';
+import { dragHandle, trash } from '@wordpress/icons';
 import { Button, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
@@ -20,7 +20,6 @@ import BlockDraggable from '../block-draggable';
 import BlockMover from '../block-mover';
 import Shuffle from '../block-toolbar/shuffle';
 import NavigableToolbar from '../navigable-toolbar';
-import { unlock } from '../../lock-unlock';
 
 export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	const selected = useSelect(
@@ -82,12 +81,9 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 		isPrevBlockTemplatePart,
 		canRemove,
 		canMove,
-		setIsInserterOpened,
 	} = selected;
 
-	const { removeBlock, __unstableSetEditorMode, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { removeBlock } = useDispatch( blockEditorStore );
 
 	const classNames = clsx( 'zoom-out-toolbar', {
 		'is-block-moving-mode': !! blockMovingMode,
@@ -135,23 +131,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 				<Shuffle clientId={ clientId } as={ ToolbarButton } />
 			) }
 
-			{ ! isBlockTemplatePart && (
-				<ToolbarButton
-					className="zoom-out-toolbar-button"
-					icon={ edit }
-					label={ __( 'Edit' ) }
-					onClick={ () => {
-						// Setting may be undefined.
-						if ( typeof setIsInserterOpened === 'function' ) {
-							setIsInserterOpened( false );
-						}
-						__unstableSetEditorMode( 'edit' );
-						resetZoomLevel();
-						__unstableContentRef.current?.focus();
-					} }
-				/>
-			) }
-
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton
 					className="zoom-out-toolbar-button"