Fix: Spilled icecream error with Filter Products by Attribute when no…

… attribute was selected (#4847)

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 (
+				<Notice status="warning" isDismissible={ false }>
+					<p>
+						{ __(
+							'Please select an attribute to use this filter!',
+							'woo-gutenberg-products-block'
+						) }
+					</p>
+				</Notice>
+			);
+		}
+		return null;
+	}
+
 	if ( displayedOptions.length === 0 && ! attributeTermsLoading ) {
+		if ( isEditor ) {
+			return (
+				<Notice status="warning" isDismissible={ false }>
+					<p>
+						{ __(
+							'The selected attribute does not have any term assigned to products.',
+							'woo-gutenberg-products-block'
+						) }
+					</p>
+				</Notice>
+			);
+		}
 		return null;
 	}
 
@@ -337,11 +367,13 @@ const AttributeFilterBlock = ( {
 
 	return (
 		<>
-			{ ! isEditor && blockAttributes.heading && (
-				<TagName className="wc-block-attribute-filter__title">
-					{ blockAttributes.heading }
-				</TagName>
-			) }
+			{ ! isEditor &&
+				blockAttributes.heading &&
+				displayedOptions.length > 0 && (
+					<TagName className="wc-block-attribute-filter__title">
+						{ blockAttributes.heading }
+					</TagName>
+				) }
 			<div
 				className={ `wc-block-attribute-filter style-${ blockAttributes.displayStyle }` }
 			>