Product Rating: Remove empty markup if no ratings are present

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

@@ -134,7 +134,7 @@ interface ProductRatingProps {
 	shouldDisplayMockedReviewsWhenProductHasNoReviews: boolean;
 }
 
-export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
+export const Block = ( props: ProductRatingProps ): JSX.Element | undefined => {
 	const {
 		textAlign,
 		isDescendentOfSingleProductBlock,
@@ -168,16 +168,18 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
 		mockedRatings
 	);
 
-	return (
-		<div className={ className } style={ styleProps.style }>
-			<div className="wc-block-components-product-rating__container">
-				{ content }
-				{ reviews && isDescendentOfSingleProductBlock ? (
-					<ReviewsCount reviews={ reviews } />
-				) : null }
+	if ( reviews || shouldDisplayMockedReviewsWhenProductHasNoReviews ) {
+		return (
+			<div className={ className } style={ styleProps.style }>
+				<div className="wc-block-components-product-rating__container">
+					{ content }
+					{ reviews && isDescendentOfSingleProductBlock ? (
+						<ReviewsCount reviews={ reviews } />
+					) : null }
+				</div>
 			</div>
-		</div>
-	);
+		);
+	}
 };
 
 export default withProductDataContext( Block );

src/BlockTypes/ProductRating.php

@@ -105,7 +105,7 @@ protected function render( $attributes, $content, $block ) {
 		$post_id = $block->context['postId'];
 		$product = wc_get_product( $post_id );
 
-		if ( $product ) {
+		if ( $product && $product->get_review_count() > 0 ) {
 			$product_reviews_count                    = $product->get_review_count();
 			$product_rating                           = $product->get_average_rating();
 			$parsed_attributes                        = $this->parse_attributes( $attributes );
@@ -202,5 +202,6 @@ protected function render( $attributes, $content, $block ) {
 				$rating_html
 			);
 		}
+		return '';
 	}
 }