Add basic edit button UI (#45815)

WordPress · Nov 16, 2022 · 4e6fd54 · 4e6fd54
1 parent 3b6f814
commit 4e6fd54
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 20 deletions.
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js b/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { edit } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+const BlockEditButton = ( { label, clientId } ) => {
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	const onClick = () => {
+		selectBlock( clientId );
+	};
+
+	return <Button icon={ edit } label={ label } onClick={ onClick } />;
+};
+
+export default BlockEditButton;
diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -33,6 +33,7 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
+import BlockEditButton from './block-edit-button';
 import { useListViewContext } from './context';
 import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -132,6 +133,14 @@ function ListViewBlock( {
 		  )
 		: __( 'Options' );
 
+	const editAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block.
+				__( 'Edit %s block' ),
+				blockInformation.title
+		  )
+		: __( 'Edit' );
+
 	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
@@ -146,6 +155,11 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
+	const listViewBlockEditClassName = classnames(
+		'block-editor-list-view-block__menu-cell',
+		{ 'is-visible': isHovered || isFirstSelectedBlock }
+	);
+
 	// If ListView has experimental features related to the Persistent List View,
 	// only focus the selected list item on mount; otherwise the list would always
 	// try to steal the focus from the editor canvas.
@@ -307,26 +321,44 @@ function ListViewBlock( {
 			) }
 
 			{ showBlockActions && (
-				<TreeGridCell
-					className={ listViewBlockSettingsClassName }
-					aria-selected={ !! isSelected || forceSelectionContentLock }
-				>
-					{ ( { ref, tabIndex, onFocus } ) => (
-						<BlockSettingsDropdown
-							clientIds={ dropdownClientIds }
-							icon={ moreVertical }
-							label={ settingsAriaLabel }
-							toggleProps={ {
-								ref,
-								className: 'block-editor-list-view-block__menu',
-								tabIndex,
-								onFocus,
-							} }
-							disableOpenOnArrowDown
-							__experimentalSelectBlock={ updateSelection }
-						/>
-					) }
-				</TreeGridCell>
+				<>
+					<TreeGridCell
+						className={ listViewBlockEditClassName }
+						aria-selected={
+							!! isSelected || forceSelectionContentLock
+						}
+					>
+						{ () => (
+							<BlockEditButton
+								label={ editAriaLabel }
+								clientId={ clientId }
+							/>
+						) }
+					</TreeGridCell>
+					<TreeGridCell
+						className={ listViewBlockSettingsClassName }
+						aria-selected={
+							!! isSelected || forceSelectionContentLock
+						}
+					>
+						{ ( { ref, tabIndex, onFocus } ) => (
+							<BlockSettingsDropdown
+								clientIds={ dropdownClientIds }
+								icon={ moreVertical }
+								label={ settingsAriaLabel }
+								toggleProps={ {
+									ref,
+									className:
+										'block-editor-list-view-block__menu',
+									tabIndex,
+									onFocus,
+								} }
+								disableOpenOnArrowDown
+								__experimentalSelectBlock={ updateSelection }
+							/>
+						) }
+					</TreeGridCell>
+				</>
 			) }
 		</ListViewLeaf>
 	);