From 21fa10f062b7105099f8e7d0258402d361a23abd Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Mon, 28 Nov 2022 09:03:25 +0100 Subject: [PATCH 1/5] Filter by Rating Block > Display a notice in the editor if the store has no products with ratings. --- assets/js/blocks/rating-filter/block.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx index 0ddd43d0379..4c08fd007d2 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, @@ -272,6 +273,19 @@ const RatingFilterBlock = ( { [ checked ] ); + if ( isEditor && ! isDisabled && displayedOptions.length === 0 ) { + return ( + +

+ { __( + 'There are no products with ratings.', + 'woo-gutenberg-products-block' + ) } +

+ + ); + } + if ( ! filteredCountsLoading && displayedOptions.length === 0 ) { setWrapperVisibility( false ); return null; From b6e4b7d0f810df80b12d96305410926717a8729e Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Wed, 30 Nov 2022 20:02:13 +0100 Subject: [PATCH 2/5] update the notice import. --- assets/js/blocks/rating-filter/block.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx index 4c08fd007d2..18d94f88ffa 100644 --- a/assets/js/blocks/rating-filter/block.tsx +++ b/assets/js/blocks/rating-filter/block.tsx @@ -4,7 +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 { Notice } from '@wordpress/components'; import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks'; import { useQueryStateByKey, From 0cc2a61d322c9bbf60c2e9806c7793eed81e01d4 Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Thu, 1 Dec 2022 13:35:29 +0100 Subject: [PATCH 3/5] rely on wordpress-components instead of @wordpress/components --- assets/js/blocks/rating-filter/block.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx index 18d94f88ffa..4c08fd007d2 100644 --- a/assets/js/blocks/rating-filter/block.tsx +++ b/assets/js/blocks/rating-filter/block.tsx @@ -4,7 +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 { Notice } from 'wordpress-components'; import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks'; import { useQueryStateByKey, From e985e35f73fe33f5a72bcb2f9f6af6408aaee625 Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Thu, 8 Dec 2022 12:53:11 +0100 Subject: [PATCH 4/5] Update the copy and allow users to preview/update the content, settings, and color for the filter even when the store doesn't have any ratings yet --- assets/js/blocks/rating-filter/block.tsx | 48 ++++++++++++++-------- assets/js/blocks/rating-filter/preview.tsx | 23 +++++++++++ 2 files changed, 53 insertions(+), 18 deletions(-) diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx index 4c08fd007d2..e29a28afac8 100644 --- a/assets/js/blocks/rating-filter/block.tsx +++ b/assets/js/blocks/rating-filter/block.tsx @@ -25,7 +25,7 @@ import classnames from 'classnames'; /** * Internal dependencies */ -import { previewOptions } from './preview'; +import { editorPreviewOptions, previewOptions } from './preview'; import './style.scss'; import { Attributes } from './types'; import { getActiveFilters } from './utils'; @@ -190,12 +190,16 @@ const RatingFilterBlock = ( { if ( filteredCountsLoading || blockAttributes.isPreview ) { return; } + + const defaultPreviewCounts = isEditor ? editorPreviewOptions : []; + const orderedRatings = ! filteredCountsLoading && objectHasProp( filteredCounts, 'rating_counts' ) && - Array.isArray( filteredCounts.rating_counts ) + Array.isArray( filteredCounts.rating_counts ) && + filteredCounts.rating_counts.length > 0 ? [ ...filteredCounts.rating_counts ].reverse() - : []; + : defaultPreviewCounts; const newOptions = orderedRatings .filter( @@ -230,6 +234,7 @@ const RatingFilterBlock = ( { filteredCounts, filteredCountsLoading, productRatings, + isEditor, ] ); /** @@ -273,20 +278,11 @@ const RatingFilterBlock = ( { [ checked ] ); - if ( isEditor && ! isDisabled && displayedOptions.length === 0 ) { - return ( - -

- { __( - 'There are no products with ratings.', - 'woo-gutenberg-products-block' - ) } -

- - ); - } - - if ( ! filteredCountsLoading && displayedOptions.length === 0 ) { + if ( + ! isEditor && + ! filteredCountsLoading && + displayedOptions.length === 0 + ) { setWrapperVisibility( false ); return null; } @@ -297,15 +293,31 @@ const RatingFilterBlock = ( { isBoolean ); - if ( ! hasFilterableProducts ) { + if ( ! isEditor && ! hasFilterableProducts ) { setWrapperVisibility( false ); return null; } setWrapperVisibility( true ); + const isEditorWithNoProductRatings = + isEditor && + objectHasProp( filteredCounts, 'rating_counts' ) && + Array.isArray( filteredCounts.rating_counts ) && + filteredCounts.rating_counts.length === 0; + return ( <> + { isEditorWithNoProductRatings && ( + +

+ { __( + "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' + ) } +

+ + ) }
Date: Mon, 12 Dec 2022 09:48:56 +0100 Subject: [PATCH 5/5] address CR. --- assets/js/blocks/rating-filter/block.tsx | 34 ++++++++++------------ assets/js/blocks/rating-filter/preview.tsx | 23 --------------- 2 files changed, 15 insertions(+), 42 deletions(-) diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx index e29a28afac8..bda7514d1a8 100644 --- a/assets/js/blocks/rating-filter/block.tsx +++ b/assets/js/blocks/rating-filter/block.tsx @@ -25,7 +25,7 @@ import classnames from 'classnames'; /** * Internal dependencies */ -import { editorPreviewOptions, previewOptions } from './preview'; +import { previewOptions } from './preview'; import './style.scss'; import { Attributes } from './types'; import { getActiveFilters } from './utils'; @@ -91,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. * @@ -191,15 +194,18 @@ const RatingFilterBlock = ( { return; } - const defaultPreviewCounts = isEditor ? editorPreviewOptions : []; - const orderedRatings = ! filteredCountsLoading && objectHasProp( filteredCounts, 'rating_counts' ) && - Array.isArray( filteredCounts.rating_counts ) && - filteredCounts.rating_counts.length > 0 + Array.isArray( filteredCounts.rating_counts ) ? [ ...filteredCounts.rating_counts ].reverse() - : defaultPreviewCounts; + : []; + + if ( isEditor && orderedRatings.length === 0 ) { + setDisplayedOptions( previewOptions ); + setDisplayNoProductRatingsNotice( true ); + return; + } const newOptions = orderedRatings .filter( @@ -278,11 +284,7 @@ const RatingFilterBlock = ( { [ checked ] ); - if ( - ! isEditor && - ! filteredCountsLoading && - displayedOptions.length === 0 - ) { + if ( ! filteredCountsLoading && displayedOptions.length === 0 ) { setWrapperVisibility( false ); return null; } @@ -293,22 +295,16 @@ const RatingFilterBlock = ( { isBoolean ); - if ( ! isEditor && ! hasFilterableProducts ) { + if ( ! hasFilterableProducts ) { setWrapperVisibility( false ); return null; } setWrapperVisibility( true ); - const isEditorWithNoProductRatings = - isEditor && - objectHasProp( filteredCounts, 'rating_counts' ) && - Array.isArray( filteredCounts.rating_counts ) && - filteredCounts.rating_counts.length === 0; - return ( <> - { isEditorWithNoProductRatings && ( + { displayNoProductRatingsNotice && (

{ __( diff --git a/assets/js/blocks/rating-filter/preview.tsx b/assets/js/blocks/rating-filter/preview.tsx index 2a9cbfcb768..4c3daf982b1 100644 --- a/assets/js/blocks/rating-filter/preview.tsx +++ b/assets/js/blocks/rating-filter/preview.tsx @@ -61,26 +61,3 @@ export const previewOptions = [ value: '1', }, ]; - -export const editorPreviewOptions = [ - { - rating: 5, - count: 1, - }, - { - rating: 4, - count: 1, - }, - { - rating: 3, - count: 1, - }, - { - rating: 2, - count: 1, - }, - { - rating: 1, - count: 1, - }, -];