Update AdvancedFilters to use createInterpolateElement instead of interpolateComponents

packages/js/components/changelog/update-interpolate-advanced-filters

@@ -0,0 +1,4 @@
+Significance: major
+Type: update
+
+Updated AdvancedFilter to use createInterpolateElement instead of interpolateComponents.

packages/js/components/src/advanced-filters/README.md

@@ -4,14 +4,14 @@ Displays a configurable set of filters which can modify query parameters. Displa
 
 ## Usage
 
-Below is a config example complete with translation strings. Advanced filters makes use of [interpolateComponents](https://github.com/Automattic/interpolate-components#readme) to organize sentence structure, resulting in a filter visually represented as a sentence fragment in any language.
+Below is a config example complete with translation strings. Advanced filters makes use of [createInterpolateElement](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/#createinterpolateelement) to organize sentence structure, resulting in a filter visually represented as a sentence fragment in any language.
 
 ```js
 const config = {
 	title: __(
 		// A sentence describing filters for Orders
 		// See screen shot for context: https://cloudup.com/cSsUY9VeCVJ
-		'Orders Match {{select /}} Filters',
+		'Orders Match <select/> Filters',
 		'woocommerce'
 	),
 	filters: {
@@ -25,10 +25,7 @@ const config = {
 				),
 				// A sentence describing an Order Status filter
 				// See screen shot for context: https://cloudup.com/cSsUY9VeCVJ
-				title: __(
-					'Order Status {{rule /}} {{filter /}}',
-					'woocommerce'
-				),
+				title: __( 'Order Status <rule/> <filter/>', 'woocommerce' ),
 				filter: __( 'Select an order status', 'woocommerce' ),
 			},
 			rules: [

packages/js/components/src/advanced-filters/attribute-filter.js

@@ -3,10 +3,10 @@
  */
 import PropTypes from 'prop-types';
 import { SelectControl as Select, Spinner } from '@wordpress/components';
-import interpolateComponents from '@automattic/interpolate-components';
 import classnames from 'classnames';
 import {
 	createElement,
+	createInterpolateElement,
 	Fragment,
 	useEffect,
 	useState,
@@ -54,28 +54,22 @@ const getScreenReaderText = ( {
 		return '';
 	}
 
-	const filterStr = interpolateComponents( {
+	const filterStr = createInterpolateElement(
 		/* eslint-disable-next-line max-len */
 		/* translators: Sentence fragment describing a product attribute match. Example: "Color Is Not Blue" - attribute = Color, equals = Is Not, value = Blue */
-		mixedString: __(
-			'{{attribute /}} {{equals /}} {{value /}}',
-			'woocommerce'
-		),
-		components: {
+		__( '<attribute/> <equals/> <value/>', 'woocommerce' ),
+		{
 			attribute: <Fragment>{ attributeName }</Fragment>,
 			equals: <Fragment>{ rule.label }</Fragment>,
 			value: <Fragment>{ attributeTerm }</Fragment>,
-		},
-	} );
+		}
+	);
 
 	return textContent(
-		interpolateComponents( {
-			mixedString: config.labels.title,
-			components: {
-				filter: <Fragment>{ filterStr }</Fragment>,
-				rule: <Fragment />,
-				title: <Fragment />,
-			},
+		createInterpolateElement( config.labels.title, {
+			filter: <Fragment>{ filterStr }</Fragment>,
+			rule: <Fragment />,
+			title: <Fragment />,
 		} )
 	);
 };
@@ -154,114 +148,109 @@ const AttributeFilter = ( props ) => {
 					}
 				) }
 			>
-				{ interpolateComponents( {
-					mixedString: labels.title,
-					components: {
-						title: <span className={ className } />,
-						rule: (
-							<Select
-								className={ classnames(
-									className,
-									'woocommerce-filters-advanced__rule'
-								) }
-								options={ rules }
-								value={ rule }
-								onChange={ ( selectedValue ) =>
-									onFilterChange( {
-										property: 'rule',
-										value: selectedValue,
-									} )
-								}
-								aria-label={ labels.rule }
-							/>
-						),
-						filter: (
-							<div
-								className={ classnames(
-									className,
-									'woocommerce-filters-advanced__attribute-fieldset'
-								) }
-							>
-								{ ! Array.isArray( value ) ||
-								! value.length ||
-								selectedAttribute.length ? (
-									<Search
-										className="woocommerce-filters-advanced__input woocommerce-search"
-										onChange={ ( [ attr ] ) => {
-											setSelectedAttribute(
-												attr ? [ attr ] : []
-											);
-											setSelectedAttributeTerm( '' );
-											onFilterChange( {
-												property: 'value',
-												value: [
-													attr && attr.key,
-												].filter( Boolean ),
-											} );
-										} }
-										type="attributes"
-										placeholder={ __(
-											'Attribute name',
-											'woocommerce'
-										) }
-										multiple={ false }
-										selected={ selectedAttribute }
-										inlineTags
-										aria-label={ __(
-											'Attribute name',
-											'woocommerce'
-										) }
-									/>
+				{ createInterpolateElement( labels.title, {
+					title: <span className={ className } />,
+					rule: (
+						<Select
+							className={ classnames(
+								className,
+								'woocommerce-filters-advanced__rule'
+							) }
+							options={ rules }
+							value={ rule }
+							onChange={ ( selectedValue ) =>
+								onFilterChange( {
+									property: 'rule',
+									value: selectedValue,
+								} )
+							}
+							aria-label={ labels.rule }
+						/>
+					),
+					filter: (
+						<div
+							className={ classnames(
+								className,
+								'woocommerce-filters-advanced__attribute-fieldset'
+							) }
+						>
+							{ ! Array.isArray( value ) ||
+							! value.length ||
+							selectedAttribute.length ? (
+								<Search
+									className="woocommerce-filters-advanced__input woocommerce-search"
+									onChange={ ( [ attr ] ) => {
+										setSelectedAttribute(
+											attr ? [ attr ] : []
+										);
+										setSelectedAttributeTerm( '' );
+										onFilterChange( {
+											property: 'value',
+											value: [ attr && attr.key ].filter(
+												Boolean
+											),
+										} );
+									} }
+									type="attributes"
+									placeholder={ __(
+										'Attribute name',
+										'woocommerce'
+									) }
+									multiple={ false }
+									selected={ selectedAttribute }
+									inlineTags
+									aria-label={ __(
+										'Attribute name',
+										'woocommerce'
+									) }
+								/>
+							) : (
+								<Spinner />
+							) }
+							{ selectedAttribute.length > 0 &&
+								( attributeTerms.length ? (
+									<Fragment>
+										<span className="woocommerce-filters-advanced__attribute-field-separator">
+											=
+										</span>
+										<SelectControl
+											className="woocommerce-filters-advanced__input woocommerce-search"
+											placeholder={ __(
+												'Attribute value',
+												'woocommerce'
+											) }
+											inlineTags
+											isSearchable
+											multiple={ false }
+											showAllOnFocus
+											options={ attributeTerms }
+											selected={ selectedAttributeTerm }
+											onChange={ ( term ) => {
+												// Clearing the input using delete/backspace causes an empty array to be passed here.
+												if (
+													typeof term !== 'string'
+												) {
+													term = '';
+												}
+												setSelectedAttributeTerm(
+													term
+												);
+												onFilterChange( {
+													property: 'value',
+													value: [
+														selectedAttribute[ 0 ]
+															.key,
+														term,
+													].filter( Boolean ),
+												} );
+											} }
+										/>
+									</Fragment>
 								) : (
 									<Spinner />
-								) }
-								{ selectedAttribute.length > 0 &&
-									( attributeTerms.length ? (
-										<Fragment>
-											<span className="woocommerce-filters-advanced__attribute-field-separator">
-												=
-											</span>
-											<SelectControl
-												className="woocommerce-filters-advanced__input woocommerce-search"
-												placeholder={ __(
-													'Attribute value',
-													'woocommerce'
-												) }
-												inlineTags
-												isSearchable
-												multiple={ false }
-												showAllOnFocus
-												options={ attributeTerms }
-												selected={
-													selectedAttributeTerm
-												}
-												onChange={ ( term ) => {
-													// Clearing the input using delete/backspace causes an empty array to be passed here.
-													if (
-														typeof term !== 'string'
-													) {
-														term = '';
-													}
-													setSelectedAttributeTerm(
-														term
-													);
-													onFilterChange( {
-														property: 'value',
-														value: [
-															selectedAttribute[ 0 ]
-																.key,
-															term,
-														].filter( Boolean ),
-													} );
-												} }
-											/>
-										</Fragment>
-									) : (
-										<Spinner />
-									) ) }
-							</div>
-						),
-					},
+								) ) }
+						</div>
+					),
 				} ) }
 			</div>
 			{ screenReaderText && (