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 {