Use same markup as existing stacked movers

WordPress · Jul 11, 2024 · e813cfc · e813cfc
1 parent eaa7ed7
commit e813cfc
Showing 1 changed file with 100 additions and 48 deletions.
diff --git a/packages/block-editor/src/components/grid/grid-item-movers.js b/packages/block-editor/src/components/grid/grid-item-movers.js
@@ -1,10 +1,21 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';
+import { Button, VisuallyHidden } from '@wordpress/components';
+import {
+	chevronLeft,
+	chevronUp,
+	chevronDown,
+	chevronRight,
+} from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -43,50 +54,12 @@ export function GridItemMovers( {
 
 	return (
 		<BlockControls group="parent">
-			<ToolbarButton
-				icon={ arrowUp }
-				label={ __( 'Move block up' ) }
-				disabled={ rowStart <= 1 }
-				onClick={ () => {
-					onChange( {
-						rowStart: rowStart - 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber,
-							rowStartNumber - 1
-						)
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowDown }
-				label={ __( 'Move block down' ) }
-				disabled={ rowCount && rowEnd >= rowCount }
-				onClick={ () => {
-					onChange( {
-						rowStart: rowStart + 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber,
-							rowStartNumber + 1
-						)
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowLeft }
+			<GridItemMover
+				className="is-left-button"
+				icon={ chevronLeft }
 				label={ __( 'Move block left' ) }
-				disabled={ columnStart <= 1 }
+				description={ __( 'Move block left' ) }
+				isDisabled={ columnStart <= 1 }
 				onClick={ () => {
 					onChange( {
 						columnStart: columnStartNumber - 1,
@@ -103,10 +76,58 @@ export function GridItemMovers( {
 					);
 				} }
 			/>
-			<ToolbarButton
-				icon={ arrowRight }
+			<div className="block-editor-block-mover__move-button-container">
+				<GridItemMover
+					className="is-up-button"
+					icon={ chevronUp }
+					label={ __( 'Move block up' ) }
+					description={ __( 'Move block up' ) }
+					isDisabled={ rowStart <= 1 }
+					onClick={ () => {
+						onChange( {
+							rowStart: rowStart - 1,
+						} );
+						__unstableMarkNextChangeAsNotPersistent();
+						moveBlocksToPosition(
+							[ blockClientId ],
+							gridClientId,
+							gridClientId,
+							getNumberOfBlocksBeforeCell(
+								columnStartNumber,
+								rowStartNumber - 1
+							)
+						);
+					} }
+				/>
+				<GridItemMover
+					className="is-down-button"
+					icon={ chevronDown }
+					label={ __( 'Move block down' ) }
+					description={ __( 'Move block down' ) }
+					isDisabled={ rowCount && rowEnd >= rowCount }
+					onClick={ () => {
+						onChange( {
+							rowStart: rowStart + 1,
+						} );
+						__unstableMarkNextChangeAsNotPersistent();
+						moveBlocksToPosition(
+							[ blockClientId ],
+							gridClientId,
+							gridClientId,
+							getNumberOfBlocksBeforeCell(
+								columnStartNumber,
+								rowStartNumber + 1
+							)
+						);
+					} }
+				/>
+			</div>
+			<GridItemMover
+				className="is-right-button"
+				icon={ chevronRight }
 				label={ __( 'Move block right' ) }
-				disabled={ columnCount && columnEnd >= columnCount }
+				description={ __( 'Move block right' ) }
+				isDisabled={ columnCount && columnEnd >= columnCount }
 				onClick={ () => {
 					onChange( {
 						columnStart: columnStartNumber + 1,
@@ -126,3 +147,34 @@ export function GridItemMovers( {
 		</BlockControls>
 	);
 }
+
+function GridItemMover( {
+	className,
+	icon,
+	label,
+	isDisabled,
+	onClick,
+	description,
+} ) {
+	const instanceId = useInstanceId( GridItemMover );
+	const descriptionId = `block-editor-block-mover-button__description-${ instanceId }`;
+	return (
+		<>
+			<Button
+				className={ clsx(
+					'block-editor-block-mover-button',
+					className
+				) }
+				icon={ icon }
+				label={ label }
+				aria-describedby={ descriptionId }
+				onClick={ isDisabled ? null : onClick }
+				disabled={ isDisabled }
+				accessibleWhenDisabled
+			/>
+			<VisuallyHidden id={ descriptionId }>
+				{ description }
+			</VisuallyHidden>
+		</>
+	);
+}