diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx
index 0ddd43d0379..bda7514d1a8 100644
--- a/assets/js/blocks/rating-filter/block.tsx
+++ b/assets/js/blocks/rating-filter/block.tsx
@@ -4,6 +4,7 @@
import { __, sprintf } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
import Rating from '@woocommerce/base-components/product-rating';
+import { Notice } from 'wordpress-components';
import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks';
import {
useQueryStateByKey,
@@ -90,6 +91,9 @@ const RatingFilterBlock = ( {
initialFilters
);
+ const [ displayNoProductRatingsNotice, setDisplayNoProductRatingsNotice ] =
+ useState( false );
+
/**
* Used to redirect the page when filters are changed so templates using the Classic Template block can filter.
*
@@ -189,6 +193,7 @@ const RatingFilterBlock = ( {
if ( filteredCountsLoading || blockAttributes.isPreview ) {
return;
}
+
const orderedRatings =
! filteredCountsLoading &&
objectHasProp( filteredCounts, 'rating_counts' ) &&
@@ -196,6 +201,12 @@ const RatingFilterBlock = ( {
? [ ...filteredCounts.rating_counts ].reverse()
: [];
+ if ( isEditor && orderedRatings.length === 0 ) {
+ setDisplayedOptions( previewOptions );
+ setDisplayNoProductRatingsNotice( true );
+ return;
+ }
+
const newOptions = orderedRatings
.filter(
( item ) => isObject( item ) && Object.keys( item ).length > 0
@@ -229,6 +240,7 @@ const RatingFilterBlock = ( {
filteredCounts,
filteredCountsLoading,
productRatings,
+ isEditor,
] );
/**
@@ -292,6 +304,16 @@ const RatingFilterBlock = ( {
return (
<>
+ { displayNoProductRatingsNotice && (
+
+ { __(
+ "Your store doesn't have any products with ratings yet. This filter option will display when a product receives a review.",
+ 'woo-gutenberg-products-block'
+ ) }
+