From d76c3e07148f45538a62eaf8da4480de3a21b634 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 17 Feb 2020 16:31:55 +0000
Subject: [PATCH] Implement __experimentalCreateInterpolateElement for
 translations. (https://github.com/woocommerce/woocommerce-blocks/pull/1736)

* Improved placeholders of translatable string

* Improved one more string

* Include wordpress element package

* Implement __experimentalCreateInterpolateElement for translations

* Dump fragments

Co-authored-by: Claudio Sanches <contato@claudiosanches.com>
---
 .../assets/js/blocks/reviews/edit-utils.js    | 79 ++++++++++---------
 plugins/woocommerce-blocks/package-lock.json  | 22 ++++++
 plugins/woocommerce-blocks/package.json       |  3 +-
 3 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/edit-utils.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/edit-utils.js
index 08ebd295889..46770ba90b1 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/edit-utils.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/edit-utils.js
@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { Fragment, RawHTML } from '@wordpress/element';
-import { escapeHTML } from '@wordpress/escape-html';
+import { __ } from '@wordpress/i18n';
+import { __experimentalCreateInterpolateElement } from 'wordpress-element';
 import {
 	Notice,
 	ToggleControl,
@@ -36,7 +35,7 @@ export const getBlockControls = ( editMode, setAttributes ) => (
 
 export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
 	return (
-		<Fragment>
+		<>
 			<ToggleControl
 				label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
 				checked={ attributes.showReviewRating }
@@ -51,21 +50,24 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
 					className="wc-block-reviews__notice"
 					isDismissible={ false }
 				>
-					<RawHTML>
-						{ sprintf(
-							escapeHTML(
-								/* translators: A notice that links to WooCommerce settings. */
-								__(
-									'Product rating is disabled in your %sstore settings%s.',
-									'woo-gutenberg-products-block'
-								)
+					{ __experimentalCreateInterpolateElement(
+						__(
+							'Product rating is disabled in your <a>store settings</a>.',
+							'woo-gutenberg-products-block'
+						),
+						{
+							a: (
+								// eslint-disable-next-line jsx-a11y/anchor-has-content
+								<a
+									href={ getAdminLink(
+										'admin.php?page=wc-settings&tab=products'
+									) }
+									target="_blank"
+									rel="noopener noreferrer"
+								/>
 							),
-							`<a href="${ getAdminLink(
-								'admin.php?page=wc-settings&tab=products'
-							) }" target="_blank">`,
-							'</a>'
-						) }
-					</RawHTML>
+						}
+					) }
 				</Notice>
 			) }
 			<ToggleControl
@@ -105,7 +107,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
 				}
 			/>
 			{ attributes.showReviewImage && (
-				<Fragment>
+				<>
 					<ToggleButtonControl
 						label={ __(
 							'Review image',
@@ -137,26 +139,29 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
 							className="wc-block-reviews__notice"
 							isDismissible={ false }
 						>
-							<RawHTML>
-								{ sprintf(
-									escapeHTML(
-										/* translators: A notice that links to WordPress settings. */
-										__(
-											'Reviewer photo is disabled in your %ssite settings%s.',
-											'woo-gutenberg-products-block'
-										)
+							{ __experimentalCreateInterpolateElement(
+								__(
+									'Reviewer photo is disabled in your <a>site settings</a>.',
+									'woo-gutenberg-products-block'
+								),
+								{
+									a: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											href={ getAdminLink(
+												'options-discussion.php'
+											) }
+											target="_blank"
+											rel="noopener noreferrer"
+										/>
 									),
-									`<a href="${ getAdminLink(
-										'options-discussion.php'
-									) }" target="_blank">`,
-									'</a>'
-								) }
-							</RawHTML>
+								}
+							) }
 						</Notice>
 					) }
-				</Fragment>
+				</>
 			) }
-		</Fragment>
+		</>
 	);
 };
 
@@ -165,7 +170,7 @@ export const getSharedReviewListControls = ( attributes, setAttributes ) => {
 	const maxPerPage = 20;
 
 	return (
-		<Fragment>
+		<>
 			<ToggleControl
 				label={ __( 'Order by', 'woo-gutenberg-products-block' ) }
 				checked={ attributes.showOrderby }
@@ -219,6 +224,6 @@ export const getSharedReviewListControls = ( attributes, setAttributes ) => {
 					min={ minPerPage }
 				/>
 			) }
-		</Fragment>
+		</>
 	);
 };
diff --git a/plugins/woocommerce-blocks/package-lock.json b/plugins/woocommerce-blocks/package-lock.json
index b6c382e9c51..98572f8dcc2 100644
--- a/plugins/woocommerce-blocks/package-lock.json
+++ b/plugins/woocommerce-blocks/package-lock.json
@@ -29642,6 +29642,28 @@
         }
       }
     },
+    "wordpress-element": {
+      "version": "npm:@wordpress/element@2.11.0",
+      "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.11.0.tgz",
+      "integrity": "sha512-56ZO8a+E7QEsYwiqS+3BQPSHrCPsOAIEz5smXzntb2f6BjvOKeA64pup40mdn1pNGexe06LBA8cjoZVdLBHB1w==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "@wordpress/escape-html": "^1.7.0",
+        "lodash": "^4.17.15",
+        "react": "^16.9.0",
+        "react-dom": "^16.9.0"
+      },
+      "dependencies": {
+        "@wordpress/escape-html": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.7.0.tgz",
+          "integrity": "sha512-xDOBo0P3Jnbdbb/UypsQaplsD2k4UXgd/EpKhMAKhDa2m20GxWWmEKW9IB3/5bS4Rh2YZjVM9WL4JyWPUo4hEA==",
+          "requires": {
+            "@babel/runtime": "^7.8.3"
+          }
+        }
+      }
+    },
     "wordwrap": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json
index 924e99f6887..cec13f75fcb 100644
--- a/plugins/woocommerce-blocks/package.json
+++ b/plugins/woocommerce-blocks/package.json
@@ -146,7 +146,8 @@
 		"react-number-format": "4.3.1",
 		"trim-html": "0.1.9",
 		"use-debounce": "3.3.0",
-		"wordpress-components": "npm:@wordpress/components@8.5.0"
+		"wordpress-components": "npm:@wordpress/components@8.5.0",
+		"wordpress-element": "npm:@wordpress/element@2.11.0"
 	},
 	"husky": {
 		"hooks": {