Fix inconsistent HTML of rating section (#5552)

assets/js/atomic/blocks/product-elements/rating/block.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import classnames from 'classnames';
 import {
 	useInnerBlockLayoutContext,
@@ -41,6 +41,21 @@ const Block = ( { className } ) => {
 		rating
 	);
 
+	const reviews = getRatingCount( product );
+	const ratingHTML = {
+		__html: sprintf(
+			/* translators: %1$s is referring to the average rating value, %2$s is referring to the number of ratings */
+			_n(
+				'Rated %1$s out of 5 based on %2$s customer rating',
+				'Rated %1$s out of 5 based on %2$s customer ratings',
+				reviews,
+				'woo-gutenberg-products-block'
+			),
+			sprintf( '<strong class="rating">%f</strong>', rating ),
+			sprintf( '<span class="rating">%d</span>', reviews )
+		),
+	};
+
 	return (
 		<div
 			className={ classnames(
@@ -59,7 +74,10 @@ const Block = ( { className } ) => {
 				role="img"
 				aria-label={ ratingText }
 			>
-				<span style={ starStyle }>{ ratingText }</span>
+				<span
+					style={ starStyle }
+					dangerouslySetInnerHTML={ ratingHTML }
+				/>
 			</div>
 		</div>
 	);
@@ -71,6 +89,12 @@ const getAverageRating = ( product ) => {
 	return Number.isFinite( rating ) && rating > 0 ? rating : 0;
 };
 
+const getRatingCount = ( product ) => {
+	const count = parseInt( product.review_count, 10 );
+
+	return Number.isFinite( count ) && count > 0 ? count : 0;
+};
+
 Block.propTypes = {
 	className: PropTypes.string,
 };

assets/js/base/components/reviews/review-list-item/index.js

@@ -124,14 +124,24 @@ function getReviewRating( review ) {
 		__( 'Rated %f out of 5', 'woo-gutenberg-products-block' ),
 		rating
 	);
+	const ratingHTML = {
+		__html: sprintf(
+			/* translators: %s is referring to the average rating value */
+			__( 'Rated %s out of 5', 'woo-gutenberg-products-block' ),
+			sprintf( '<strong class="rating">%f</strong>', rating )
+		),
+	};
 	return (
 		<div className="wc-block-review-list-item__rating wc-block-components-review-list-item__rating">
 			<div
 				className="wc-block-review-list-item__rating__stars wc-block-components-review-list-item__rating__stars"
 				role="img"
 				aria-label={ ratingText }
 			>
-				<span style={ starStyle }>{ ratingText }</span>
+				<span
+					style={ starStyle }
+					dangerouslySetInnerHTML={ ratingHTML }
+				/>
 			</div>
 		</div>
 	);