diff --git a/components/form-token-field/index.js b/components/form-token-field/index.js
index 524f05bb7ec92f..7d33e286f9bec0 100644
--- a/components/form-token-field/index.js
+++ b/components/form-token-field/index.js
@@ -451,9 +451,11 @@ class FormTokenField extends Component {
return components;
}
- renderToken( token ) {
+ renderToken( token, index, tokens ) {
const value = this.getTokenValue( token );
const status = token.status ? token.status : undefined;
+ const termPosition = index + 1;
+ const termsCount = tokens.length;
return (
);
}
@@ -583,7 +587,7 @@ FormTokenField.defaultProps = {
messages: {
added: __( 'Item added.' ),
removed: __( 'Item removed.' ),
- remove: __( 'Remove item: %s.' ),
+ remove: __( 'Remove item' ),
},
};
diff --git a/components/form-token-field/token.js b/components/form-token-field/token.js
index 21d3554bdb1bfc..90c6c95f9c3359 100644
--- a/components/form-token-field/token.js
+++ b/components/form-token-field/token.js
@@ -7,7 +7,8 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import { sprintf } from '@wordpress/i18n';
+import withInstanceId from '../higher-order/with-instance-id';
+import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -25,6 +26,9 @@ function Token( {
onMouseEnter,
onMouseLeave,
messages,
+ termPosition,
+ termsCount,
+ instanceId,
} ) {
const tokenClasses = classnames( 'components-form-token-field__token', {
'is-error': 'error' === status,
@@ -36,6 +40,15 @@ function Token( {
const onClick = () => onClickRemove( { value } );
+ const transformedValue = displayTransform( value );
+ const termPositionAndCount = sprintf(
+ /* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
+ __( '%1$s (%2$s of %3$s)' ),
+ transformedValue,
+ termPosition,
+ termsCount
+ );
+
return (
-
- { displayTransform( value ) }
+
+ { termPositionAndCount }
+ { transformedValue }
);
}
-export default Token;
+export default withInstanceId( Token );
diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
index 5f603ac76d977f..5a89da360e1a9c 100644
--- a/editor/components/post-taxonomies/flat-term-selector.js
+++ b/editor/components/post-taxonomies/flat-term-selector.js
@@ -172,7 +172,7 @@ class FlatTermSelector extends Component {
);
const termAddedLabel = sprintf( _x( '%s added', 'term' ), singularName );
const termRemovedLabel = sprintf( _x( '%s removed', 'term' ), singularName );
- const removeTermLabel = sprintf( _x( 'Remove %s: %%s', 'term' ), singularName );
+ const removeTermLabel = sprintf( _x( 'Remove %s', 'term' ), singularName );
return (