Update move block and delete block button labels

WordPress · Jun 18, 2019 · 654df82 · 654df82
1 parent d554ba3
commit 654df82
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-mobile-toolbar.native.js b/packages/block-editor/src/components/block-list/block-mobile-toolbar.native.js
@@ -7,8 +7,8 @@ import { Keyboard, View } from 'react-native';
  * WordPress dependencies
  */
 import { ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
 /**
@@ -21,6 +21,7 @@ import InspectorControls from '../inspector-controls';
 const BlockMobileToolbar = ( {
 	clientId,
 	onDelete,
+	order,
 } ) => (
 	<View style={ styles.toolbar }>
 		<BlockMover clientIds={ [ clientId ] } />
@@ -30,14 +31,30 @@ const BlockMobileToolbar = ( {
 		<InspectorControls.Slot />
 
 		<ToolbarButton
-			label={ __( 'Remove' ) }
+			label={
+				sprintf(
+					/* translators: accessibility text. %s: current block position (number). */
+					__( 'Remove block at row %s' ),
+					order + 1
+				)
+			}
 			onClick={ onDelete }
 			icon="trash"
+			extraProps={ { hint: __( 'Double tap to remove the block' ) } }
 		/>
 	</View>
 );
 
 export default compose(
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockIndex,
+		} = select( 'core/block-editor' );
+
+		return {
+			order: getBlockIndex( clientId ),
+		};
+	} ),
 	withDispatch( ( dispatch, { clientId, rootClientId, onDelete } ) => {
 		const { removeBlock } = dispatch( 'core/block-editor' );
 		return {

diff --git a/packages/block-editor/src/components/block-mover/index.native.js b/packages/block-editor/src/components/block-mover/index.native.js
@@ -7,7 +7,7 @@ import { first, last, partial, castArray } from 'lodash';
  * WordPress dependencies
  */
 import { ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
 
@@ -16,21 +16,40 @@ const BlockMover = ( {
 	isLast,
 	onMoveDown,
 	onMoveUp,
+	firstIndex,
+	lastIndex,
 } ) => (
 	<>
 		<ToolbarButton
-			accessibilityLabel={ __( 'Move up' ) }
-			label={ __( 'Move up' ) }
+			label={ ! isFirst ?
+				sprintf(
+					/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+					__( 'Move block up from row %1$s to row %2$s' ),
+					firstIndex + 1,
+					firstIndex
+				) :
+				__( 'Move block up' )
+			}
 			isDisabled={ isFirst }
 			onClick={ onMoveUp }
 			icon="arrow-up-alt"
+			extraProps={ { hint: __( 'Double tap to move the block up' ) } }
 		/>
 
 		<ToolbarButton
-			label={ __( 'Move down' ) }
+			label={ ! isLast ?
+				sprintf(
+					/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+					__( 'Move block down from row %1$s to row %2$s' ),
+					lastIndex + 1,
+					lastIndex
+				) :
+				__( 'Move block down' )
+			}
 			isDisabled={ isLast }
 			onClick={ onMoveDown }
 			icon="arrow-down-alt"
+			extraProps={ { hint: __( 'Double tap to move the block down' ) } }
 		/>
 	</>
 );
@@ -46,6 +65,8 @@ export default compose(
 		const lastIndex = getBlockIndex( last( normalizedClientIds ), rootClientId );
 
 		return {
+			firstIndex,
+			lastIndex,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
 		};