diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx
index 3e846e0be17..d42ed5a642e 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx
@@ -40,12 +40,35 @@ const getRatingCount = ( product: ProductResponseItem ) => {
return Number.isFinite( count ) && count > 0 ? count : 0;
};
+const getStarStyle = ( rating: number ) => ( {
+ width: ( rating / 5 ) * 100 + '%',
+} );
+
+const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
+ const starStyle = getStarStyle( 0 );
+
+ return (
+
+
+
+
+
{ __( 'No Reviews', 'woo-gutenberg-products-block' ) }
+
+ );
+};
+
const Rating = ( props: RatingProps ): JSX.Element => {
const { rating, reviews, parentClassName } = props;
- const starStyle = {
- width: ( rating / 5 ) * 100 + '%',
- };
+ const starStyle = getStarStyle( rating );
const ratingText = sprintf(
/* translators: %f is referring to the average rating value */
@@ -132,11 +155,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
}
);
const mockedRatings = shouldDisplayMockedReviewsWhenProductHasNoReviews ? (
-
+
) : null;
const content = reviews ? (
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss
index 2d7a5fe3acd..85456ea84e5 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss
@@ -56,6 +56,37 @@
margin-top: 0;
margin-bottom: $gap-small;
}
+
+ &__norating-container {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+ gap: $gap-smaller;
+ }
+
+ &__norating {
+ display: inline-block;
+ overflow: hidden;
+ position: relative;
+ width: 1.5em;
+ height: 1.618em;
+ line-height: 1.618;
+ font-size: 1em;
+ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+ font-family: star;
+ font-weight: 400;
+ -webkit-text-stroke: 2px var(--wp--preset--color--black, #000);
+ &::before {
+ content: "\53";
+ top: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+ color: transparent;
+ white-space: nowrap;
+ text-align: center;
+ }
+ }
}
.wp-block-woocommerce-single-product {