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'
+ ) }
+
+ { __(
+ 'The selected attribute does not have any term assigned to products.',
+ 'woo-gutenberg-products-block'
+ ) }
+