Introduce product name formatting

assets/js/base/components/cart-checkout/order-summary/order-summary-item.js

@@ -52,6 +52,11 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		[]
 	);
 
+	const productNameValidation = useCallback(
+		( value ) => mustBeString( value ) && mustContain( value, '<name/>' ),
+		[]
+	);
+
 	const arg = useMemo(
 		() => ( {
 			context: 'summary',
@@ -110,6 +115,15 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		validation: productPriceValidation,
 	} );
 
+	// Allow extensions to filter and format product names.
+	const productNameFormat = __experimentalApplyCheckoutFilter( {
+		filterName: 'productNameFormat',
+		defaultValue: '<name/>',
+		extensions,
+		arg,
+		validation: productNameValidation,
+	} );
+
 	return (
 		<div className="wc-block-components-order-summary-item">
 			<div className="wc-block-components-order-summary-item__image">
@@ -130,6 +144,7 @@ const OrderSummaryItem = ( { cartItem } ) => {
 					disabled={ true }
 					name={ name }
 					permalink={ permalink }
+					format= { productNameFormat }
 				/>
 				<ProductPrice
 					currency={ priceCurrency }

assets/js/base/components/product-name/index.js

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types';
 import { decodeEntities } from '@wordpress/html-entities';
 import classnames from 'classnames';
+import { createInterpolateElement } from 'wordpress-element';
 
 /**
  * Internal dependencies
@@ -15,10 +16,19 @@ const ProductName = ( {
 	disabled = false,
 	name,
 	permalink = '',
+	format = '<name/>',
 	...props
 } ) => {
+
 	const classes = classnames( 'wc-block-components-product-name', className );
-	return disabled ? (
+
+	if ( ! format.includes( '<name/>' ) ) {
+		format = '<name/>';
+		// eslint-disable-next-line no-console
+		console.error( 'Product name formats need to include the `<name/>` tag.' );
+	}
+
+	const productNameComponent = disabled ? (
 		<span className={ classes } { ...props }>
 			{ decodeEntities( name ) }
 		</span>
@@ -27,6 +37,10 @@ const ProductName = ( {
 			{ decodeEntities( name ) }
 		</a>
 	);
+
+	return createInterpolateElement( format, {
+		name: productNameComponent
+	} );
 };
 
 ProductName.propTypes = {

assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx

@@ -116,6 +116,11 @@ const CartLineItemRow = ( {
 		[]
 	);
 
+	const productNameValidation = useCallback(
+		( value ) => mustBeString( value ) && mustContain( value, '<name/>' ),
+		[]
+	);
+
 	const cartItemClassNameValidation = useCallback(
 		( value ) => mustBeString( value ),
 		[]
@@ -204,6 +209,16 @@ const CartLineItemRow = ( {
 		validation: productPriceValidation,
 	} );
 
+	// Allow extensions to filter and format product names.
+
+	const productNameFormat = __experimentalApplyCheckoutFilter( {
+		filterName: 'productNameFormat',
+		defaultValue: '<name/>',
+		extensions,
+		arg,
+		validation: productNameValidation,
+	} );
+
 	return (
 		<tr
 			className={ classnames( 'wc-block-cart-items__row', cartItemClassNameFilter, {
@@ -231,6 +246,7 @@ const CartLineItemRow = ( {
 					disabled={ isPendingDelete || isProductHiddenFromCatalog }
 					name={ name }
 					permalink={ permalink }
+					format={ productNameFormat }
 				/>
 				{ showBackorderBadge ? (
 					<ProductBackorderBadge />