Allow HTML in the All Products Block Product Titles (https://github.com/woocommerce/woocommerce-blocks/pull/4363)

* Render titles as HTML in ProductName component and use Typescript

* Update snaps

plugins/woocommerce-blocks/assets/js/base/components/product-name/index.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import { decodeEntities } from '@wordpress/html-entities';
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-const ProductName = ( {
-	className = '',
-	disabled = false,
-	name,
-	permalink = '',
-	...props
-} ) => {
-	const classes = classnames( 'wc-block-components-product-name', className );
-	return disabled ? (
-		<span className={ classes } { ...props }>
-			{ decodeEntities( name ) }
-		</span>
-	) : (
-		<a className={ classes } href={ permalink } { ...props }>
-			{ decodeEntities( name ) }
-		</a>
-	);
-};
-
-ProductName.propTypes = {
-	className: PropTypes.string,
-	disabled: PropTypes.bool,
-	name: PropTypes.string.isRequired,
-	permalink: PropTypes.string,
-};
-
-export default ProductName;

plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Render the Product name.
+ *
+ * The store API runs titles through `wp_kses_post()` which removes dangerous HTML tags, so using it inside `dangerouslySetInnerHTML` is considered safe.
+ */
+export default ( {
+	className = '',
+	disabled = false,
+	name,
+	permalink = '',
+	...props
+}: {
+	className: string;
+	disabled: boolean;
+	name: string;
+	permalink: string;
+} ): JSX.Element => {
+	const classes = classnames( 'wc-block-components-product-name', className );
+	return disabled ? (
+		<span
+			className={ classes }
+			{ ...props }
+			dangerouslySetInnerHTML={ {
+				__html: decodeEntities( name ),
+			} }
+		/>
+	) : (
+		<a
+			className={ classes }
+			href={ permalink }
+			{ ...props }
+			dangerouslySetInnerHTML={ {
+				__html: decodeEntities( name ),
+			} }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/product-name/test/__snapshots__/index.js.snap

@@ -3,35 +3,47 @@
 exports[`ProductName should merge classes and props 1`] = `
 <a
   className="wc-block-components-product-name lorem-ipsum"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
   href="/"
   rel="nofollow"
->
-  Test product
-</a>
+/>
 `;
 
 exports[`ProductName should not render a link if disabled is true 1`] = `
 <span
   className="wc-block-components-product-name"
->
-  Test product
-</span>
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
+/>
 `;
 
 exports[`ProductName should render a link if disabled is false 1`] = `
 <a
   className="wc-block-components-product-name"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
   href="/"
->
-  Test product
-</a>
+/>
 `;
 
 exports[`ProductName should render a link if disabled is not defined 1`] = `
 <a
   className="wc-block-components-product-name"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
   href="/"
->
-  Test product
-</a>
+/>
 `;