Fix JS error in Filter Products by Attribute block (#5301)

assets/js/blocks/attribute-filter/block.js

@@ -162,35 +162,6 @@ const AttributeFilterBlock = ( {
 		queryState.attributes,
 	] );
 
-	const checkedQuery = useMemo( () => {
-		return productAttributesQuery
-			.filter(
-				( { attribute } ) => attribute === attributeObject?.taxonomy
-			)
-			.flatMap( ( { slug } ) => slug );
-	}, [ productAttributesQuery, attributeObject?.taxonomy ] );
-
-	const currentCheckedQuery = useShallowEqual( checkedQuery );
-	const previousCheckedQuery = usePrevious( currentCheckedQuery );
-	// Track ATTRIBUTES QUERY changes so the block reflects current filters.
-	useEffect( () => {
-		if (
-			! isShallowEqual( previousCheckedQuery, currentCheckedQuery ) && // checked query changed
-			! isShallowEqual( checked, currentCheckedQuery ) // checked query doesn't match the UI
-		) {
-			setChecked( currentCheckedQuery );
-			if ( ! blockAttributes.showFilterButton ) {
-				onSubmit( currentCheckedQuery );
-			}
-		}
-	}, [
-		checked,
-		currentCheckedQuery,
-		previousCheckedQuery,
-		onSubmit,
-		blockAttributes.showFilterButton,
-	] );
-
 	/**
 	 * Returns an array of term objects that have been chosen via the checkboxes.
 	 */
@@ -230,6 +201,35 @@ const AttributeFilterBlock = ( {
 		]
 	);
 
+	const checkedQuery = useMemo( () => {
+		return productAttributesQuery
+			.filter(
+				( { attribute } ) => attribute === attributeObject?.taxonomy
+			)
+			.flatMap( ( { slug } ) => slug );
+	}, [ productAttributesQuery, attributeObject?.taxonomy ] );
+
+	const currentCheckedQuery = useShallowEqual( checkedQuery );
+	const previousCheckedQuery = usePrevious( currentCheckedQuery );
+	// Track ATTRIBUTES QUERY changes so the block reflects current filters.
+	useEffect( () => {
+		if (
+			! isShallowEqual( previousCheckedQuery, currentCheckedQuery ) && // checked query changed
+			! isShallowEqual( checked, currentCheckedQuery ) // checked query doesn't match the UI
+		) {
+			setChecked( currentCheckedQuery );
+			if ( ! blockAttributes.showFilterButton ) {
+				onSubmit( currentCheckedQuery );
+			}
+		}
+	}, [
+		checked,
+		currentCheckedQuery,
+		previousCheckedQuery,
+		onSubmit,
+		blockAttributes.showFilterButton,
+	] );
+
 	const multiple =
 		blockAttributes.displayStyle !== 'dropdown' ||
 		blockAttributes.queryType === 'or';