diff --git a/assets/js/blocks/attribute-filter/block.js b/assets/js/blocks/attribute-filter/block.js index 36112a8b541..a15e3aab38c 100644 --- a/assets/js/blocks/attribute-filter/block.js +++ b/assets/js/blocks/attribute-filter/block.js @@ -17,6 +17,7 @@ import Label from '@woocommerce/base-components/filter-element-label'; import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button'; import isShallowEqual from '@wordpress/is-shallow-equal'; import { decodeEntities } from '@wordpress/html-entities'; +import { Notice } from '@wordpress/components'; /** * Internal dependencies @@ -61,7 +62,7 @@ const AttributeFilterBlock = ( { } = useCollection( { namespace: '/wc/store', resourceName: 'products/attributes/terms', - resourceValues: [ attributeObject.id ], + resourceValues: [ attributeObject?.id || 0 ], shouldSelect: blockAttributes.attributeId > 0, } ); @@ -73,7 +74,7 @@ const AttributeFilterBlock = ( { isLoading: filteredCountsLoading, } = useCollectionData( { queryAttribute: { - taxonomy: attributeObject.taxonomy, + taxonomy: attributeObject?.taxonomy, queryType: blockAttributes.queryType, }, queryState: { @@ -151,7 +152,7 @@ const AttributeFilterBlock = ( { setDisplayedOptions( newOptions ); }, [ - attributeObject.taxonomy, + attributeObject?.taxonomy, attributeTerms, attributeTermsLoading, blockAttributes.showCounts, @@ -164,10 +165,10 @@ const AttributeFilterBlock = ( { const checkedQuery = useMemo( () => { return productAttributesQuery .filter( - ( { attribute } ) => attribute === attributeObject.taxonomy + ( { attribute } ) => attribute === attributeObject?.taxonomy ) .flatMap( ( { slug } ) => slug ); - }, [ productAttributesQuery, attributeObject.taxonomy ] ); + }, [ productAttributesQuery, attributeObject?.taxonomy ] ); const currentCheckedQuery = useShallowEqual( checkedQuery ); const previousCheckedQuery = usePrevious( currentCheckedQuery ); @@ -327,7 +328,36 @@ const AttributeFilterBlock = ( { ] ); + // Short-circuit if no attribute is selected. + if ( ! attributeObject ) { + if ( isEditor ) { + return ( + +

+ { __( + 'Please select an attribute to use this filter!', + 'woo-gutenberg-products-block' + ) } +

+
+ ); + } + return null; + } + if ( displayedOptions.length === 0 && ! attributeTermsLoading ) { + if ( isEditor ) { + return ( + +

+ { __( + 'The selected attribute does not have any term assigned to products.', + 'woo-gutenberg-products-block' + ) } +

+
+ ); + } return null; } @@ -337,11 +367,13 @@ const AttributeFilterBlock = ( { return ( <> - { ! isEditor && blockAttributes.heading && ( - - { blockAttributes.heading } - - ) } + { ! isEditor && + blockAttributes.heading && + displayedOptions.length > 0 && ( + + { blockAttributes.heading } + + ) }