Add "Edit" button to Zoom Out mode toolbar (WordPress#64571)

bph · Aug 31, 2024 · 579c9fa · 579c9fa
1 parent 98074c7
commit 579c9fa
Showing 1 changed file with 15 additions and 2 deletions.
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 } from '@wordpress/icons';
+import { dragHandle, trash, edit } from '@wordpress/icons';
 import { Button, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
@@ -77,7 +77,8 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 		canMove,
 	} = selected;
 
-	const { removeBlock } = useDispatch( blockEditorStore );
+	const { removeBlock, __unstableSetEditorMode } =
+		useDispatch( blockEditorStore );
 
 	const classNames = clsx( 'zoom-out-toolbar', {
 		'is-block-moving-mode': !! blockMovingMode,
@@ -124,6 +125,18 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 			{ canMove && canRemove && (
 				<Shuffle clientId={ clientId } as={ ToolbarButton } />
 			) }
+
+			{ ! isBlockTemplatePart && (
+				<ToolbarButton
+					className="zoom-out-toolbar-button"
+					icon={ edit }
+					label={ __( 'Edit' ) }
+					onClick={ () => {
+						__unstableSetEditorMode( 'edit' );
+					} }
+				/>
+			) }
+
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton
 					className="zoom-out-toolbar-button"