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' + ) } +

+
+ ) }