Implement __experimentalCreateInterpolateElement for translations. (#…

…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

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

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": {