Display "Add review" link if there's no product rating

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

@@ -25,6 +25,16 @@ type Props = {
 	className?: string;
 };
 
+type RatingProps = {
+	reviews: number;
+	rating: number;
+	parentClassName?: string;
+};
+
+type AddReviewProps = {
+	href?: string;
+};
+
 const getAverageRating = (
 	product: Omit< ProductResponseItem, 'average_rating' > & {
 		average_rating: string;
@@ -35,6 +45,11 @@ const getAverageRating = (
 	return Number.isFinite( rating ) && rating > 0 ? rating : 0;
 };
 
+const getReviewsHref = ( product: ProductResponseItem ) => {
+	const { permalink } = product;
+	return `${ permalink }#reviews`;
+};
+
 const getRatingCount = ( product: ProductResponseItem ) => {
 	const count = isNumber( product.review_count )
 		? product.review_count
@@ -43,27 +58,8 @@ const getRatingCount = ( product: ProductResponseItem ) => {
 	return Number.isFinite( count ) && count > 0 ? count : 0;
 };
 
-/**
- * Product Rating Block Component.
- *
- * @param {Object} props             Incoming props.
- * @param {string} [props.className] CSS Class name for the component.
- * @param {string} [props.textAlign] Text alignment.
- *
- * @return {*} The component.
- */
-export const Block = ( props: Props ): JSX.Element | null => {
-	const { textAlign } = props;
-	const { parentClassName } = useInnerBlockLayoutContext();
-	const { product } = useProductDataContext();
-	const rating = getAverageRating( product );
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
-
-	if ( ! rating ) {
-		return null;
-	}
+const Rating = ( props: RatingProps ): JSX.Element => {
+	const { rating, reviews, parentClassName } = props;
 
 	const starStyle = {
 		width: ( rating / 5 ) * 100 + '%',
@@ -75,7 +71,6 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		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 */
@@ -89,38 +84,80 @@ export const Block = ( props: Props ): JSX.Element | null => {
 			sprintf( '<span class="rating">%d</span>', reviews )
 		),
 	};
-
 	return (
 		<div
 			className={ classnames(
-				colorProps.className,
-				'wc-block-components-product-rating',
-				{
-					[ `${ parentClassName }__product-rating` ]: parentClassName,
-				},
-				{
-					[ `has-text-align-${ textAlign }` ]: textAlign,
-				}
+				'wc-block-components-product-rating__stars',
+				`${ parentClassName }__product-rating__stars`
 			) }
+			role="img"
+			aria-label={ ratingText }
+		>
+			<span style={ starStyle } dangerouslySetInnerHTML={ ratingHTML } />
+		</div>
+	);
+};
+
+const AddReview = ( props: AddReviewProps ): JSX.Element | null => {
+	const { href } = props;
+	const label = __( 'Add review', 'woo-gutenberg-products-block' );
+
+	return href ? (
+		<a className="wc-block-components-product-rating__link" href={ href }>
+			{ label }
+		</a>
+	) : null;
+};
+
+/**
+ * Product Rating Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @param {string} [props.textAlign] Text alignment.
+ *
+ * @return {*} The component.
+ */
+export const Block = ( props: Props ): JSX.Element | null => {
+	const { textAlign } = props;
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const rating = getAverageRating( product );
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
+	const reviews = getRatingCount( product );
+	const href = getReviewsHref( product );
+
+	const className = classnames(
+		colorProps.className,
+		'wc-block-components-product-rating',
+		{
+			[ `${ parentClassName }__product-rating` ]: parentClassName,
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		}
+	);
+
+	const content = reviews ? (
+		<Rating
+			rating={ rating }
+			reviews={ reviews }
+			parentClassName={ parentClassName }
+		/>
+	) : (
+		<AddReview href={ href } />
+	);
+
+	return (
+		<div
+			className={ className }
 			style={ {
 				...colorProps.style,
 				...typographyProps.style,
 				...spacingProps.style,
 			} }
 		>
-			<div
-				className={ classnames(
-					'wc-block-components-product-rating__stars',
-					`${ parentClassName }__product-rating__stars`
-				) }
-				role="img"
-				aria-label={ ratingText }
-			>
-				<span
-					style={ starStyle }
-					dangerouslySetInnerHTML={ ratingHTML }
-				/>
-			</div>
+			{ content }
 		</div>
 	);
 };

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

@@ -18,6 +18,7 @@ import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 import { BlockAttributes } from './types';
+import './editor.scss';
 
 const Edit = ( {
 	attributes,

assets/js/atomic/blocks/product-elements/rating/editor.scss

@@ -0,0 +1,3 @@
+.wc-block-components-product-rating__link {
+	pointer-events: none;
+}

assets/js/atomic/blocks/product-elements/rating/style.scss

@@ -4,6 +4,7 @@
 	margin-bottom: $gap-small;
 
 	&__stars {
+		display: inline-block;
 		overflow: hidden;
 		position: relative;
 		width: 5.3em;
@@ -45,9 +46,36 @@
 			white-space: nowrap;
 		}
 	}
+
+	&__link {
+		display: inline-block;
+		width: 100%;
+		text-align: inherit;
+		@include font-size(small);
+	}
 }
+
 .wc-block-single-product {
 	.wc-block-components-product-rating__stars {
 		margin: 0;
 	}
 }
+
+.wc-block-all-products,
+.wp-block-query {
+	.is-loading {
+		.wc-block-components-product-rating {
+			@include placeholder();
+			width: 7em;
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+}
+
+// Fix applied specifically to Classic Template
+.woocommerce-loop-product__link {
+	.wc-block-components-product-rating__stars {
+		display: block;
+	}
+}

assets/js/atomic/blocks/product-elements/sku/index.ts

@@ -36,4 +36,4 @@ const blockConfig: CustomBlockConfiguration = {
 	edit,
 };
 
-registerBlockType( 'woocommerce/product-sku', { ...blockConfig } );
+registerBlockType( 'woocommerce/product-sku', { ...blockConfig } );

src/BlockTypes/AbstractProductGrid.php

@@ -572,7 +572,6 @@ protected function get_rating_html( $product ) {
 			return '';
 		}
 		$rating_count = $product->get_rating_count();
-		$review_count = $product->get_review_count();
 		$average      = $product->get_average_rating();
 
 		if ( $rating_count > 0 ) {

src/BlockTypes/ProductRating.php

@@ -76,11 +76,16 @@ protected function get_block_type_uses_context() {
 	 * @return string
 	 */
 	public function filter_rating_html( $html, $rating, $count ) {
-		if ( 0 < $rating ) {
+		$product_permalink = get_permalink();
+		if ( 0 < $rating || false === $product_permalink ) {
 			/* translators: %s: rating */
 			$label = sprintf( __( 'Rated %s out of 5', 'woo-gutenberg-products-block' ), $rating );
 			$html  = '<div class="wc-block-components-product-rating__stars wc-block-grid__product-rating__stars" role="img" aria-label="' . esc_attr( $label ) . '">' . wc_get_star_rating_html( $rating, $count ) . '</div>';
+		} else {
+			$product_review_url = esc_url( $product_permalink . '#reviews' );
+			$html               = '<a class="wc-block-components-product-rating__link" href="' . $product_review_url . '">' . __( 'Add review', 'woo-gutenberg-products-block' ) . '</a>';
 		}
+
 		return $html;
 	}