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 } + ); } -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 (