Product rating: improve preview style when the product doesn't have rating (#9684)

* product rating: improve preview style when no rating is visible

* fix class naming

* fix cutted star

* change variable

* fix cut border

Author: gigitux

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 (
+		<div
+			className={ classnames(
+				'wc-block-components-product-rating__norating-container',
+				`${ parentClassName }-product-rating__norating-container`
+			) }
+		>
+			<div
+				className={ 'wc-block-components-product-rating__norating' }
+				role="img"
+			>
+				<span style={ starStyle } />
+			</div>
+			<span>{ __( 'No Reviews', 'woo-gutenberg-products-block' ) }</span>
+		</div>
+	);
+};
+
 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 ? (
-		<Rating
-			rating={ 0 }
-			reviews={ 0 }
-			parentClassName={ parentClassName }
-		/>
+		<NoRating parentClassName={ parentClassName } />
 	) : null;
 
 	const content = reviews ? (

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 {