Filter all products block by attribute

assets/js/base/components/checkbox-list/index.js

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import {
+	Fragment,
+	useCallback,
+	useMemo,
+	useState,
+	useEffect,
+} from '@wordpress/element';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Component used to show a list of checkboxes in a group.
+ */
+const CheckboxList = ( { className, onChange, options, isLoading } ) => {
+	// Holds all checked options.
+	const [ checked, setChecked ] = useState( [] );
+
+	useEffect( () => {
+		onChange( checked );
+	}, [ checked ] );
+
+	const renderPlaceholder = useMemo( () => {
+		return (
+			<Fragment>
+				{ [ ...Array( 5 ) ].map( ( x, i ) => (
+					<li
+						key={ i }
+						style={ {
+							/* stylelint-disable */
+							width: Math.floor( Math.random() * 75 ) + 25 + '%',
+						} }
+					/>
+				) ) }
+			</Fragment>
+		);
+	}, [] );
+
+	const onCheckboxChange = useCallback(
+		( event ) => {
+			const isChecked = event.target.checked;
+			const checkedValue = event.target.value;
+			const newChecked = checked.filter(
+				( value ) => value !== checkedValue
+			);
+
+			if ( isChecked ) {
+				newChecked.push( checkedValue );
+			}
+
+			newChecked.sort();
+
+			setChecked( newChecked );
+		},
+		[ options, checked ]
+	);
+
+	const renderOptions = useCallback( () => {
+		return (
+			<Fragment>
+				{ options.map( ( option ) => (
+					<li key={ option.key }>
+						<input
+							type="checkbox"
+							id={ option.key }
+							value={ option.key }
+							onChange={ onCheckboxChange }
+							checked={ checked.includes( option.key ) }
+						/>
+						<label htmlFor={ option.key }>{ option.label }</label>
+					</li>
+				) ) }
+			</Fragment>
+		);
+	}, [ options, checked ] );
+
+	const listClass = classNames(
+		'wc-block-checkbox-list',
+		isLoading && 'is-loading',
+		className
+	);
+
+	return (
+		<ul className={ listClass }>
+			{ isLoading ? renderPlaceholder : renderOptions() }
+		</ul>
+	);
+};
+
+CheckboxList.propTypes = {
+	onChange: PropTypes.func,
+	options: PropTypes.arrayOf(
+		PropTypes.shape( {
+			key: PropTypes.string.isRequired,
+			label: PropTypes.node.isRequired,
+			checked: PropTypes.bool,
+		} )
+	),
+	className: PropTypes.string,
+	isLoading: PropTypes.bool,
+};
+
+export default CheckboxList;

assets/js/base/components/checkbox-list/style.scss

@@ -0,0 +1,17 @@
+.editor-styles-wrapper .wc-block-checkbox-list,
+.wc-block-checkbox-list {
+	margin: 0;
+	padding: 0;
+	list-style: none outside;
+
+	li {
+		margin: 0 0 $gap-smallest;
+		padding: 0;
+		list-style: none outside;
+	}
+	&.is-loading {
+		li {
+			@include placeholder();
+		}
+	}
+}

assets/js/base/components/price-slider/index.js

@@ -12,7 +12,7 @@ import {
 } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useDebounce } from '@woocommerce/base-hooks';
+import { useDebounce, usePrevious } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -47,15 +47,25 @@ const PriceSlider = ( {
 		formatCurrencyForInput( maxPrice, priceFormat, currencySymbol )
 	);
 	const debouncedChangeValue = useDebounce( [ minPrice, maxPrice ], 500 );
+	const prevMinConstraint = usePrevious( minConstraint );
+	const prevMaxConstraint = usePrevious( maxConstraint );
 
 	useEffect( () => {
-		if ( minPrice === undefined || minConstraint > minPrice ) {
+		if (
+			minPrice === undefined ||
+			minConstraint > minPrice ||
+			minPrice === prevMinConstraint
+		) {
 			setMinPrice( minConstraint );
 		}
 	}, [ minConstraint ] );
 
 	useEffect( () => {
-		if ( maxPrice === undefined || maxConstraint < maxPrice ) {
+		if (
+			maxPrice === undefined ||
+			maxConstraint < maxPrice ||
+			maxPrice === prevMaxConstraint
+		) {
 			setMaxPrice( maxConstraint );
 		}
 	}, [ maxConstraint ] );
@@ -82,6 +92,18 @@ const PriceSlider = ( {
 	 * Handles styles for the shaded area of the range slider.
 	 */
 	const getProgressStyle = useMemo( () => {
+		if (
+			! isFinite( minPrice ) ||
+			! isFinite( maxPrice ) ||
+			! isFinite( minConstraint ) ||
+			! isFinite( maxConstraint )
+		) {
+			return {
+				'--low': '0%',
+				'--high': '100%',
+			};
+		}
+
 		const low =
 			Math.round(
 				100 *
@@ -99,7 +121,7 @@ const PriceSlider = ( {
 			'--low': low + '%',
 			'--high': high + '%',
 		};
-	}, [ minPrice, minConstraint, maxPrice, maxConstraint ] );
+	}, [ minPrice, maxPrice, minConstraint, maxConstraint ] );
 
 	/**
 	 * Trigger the onChange prop callback with new values.

assets/js/base/hooks/index.js

@@ -4,3 +4,4 @@ export * from './use-store-products';
 export * from './use-collection';
 export * from './use-collection-header';
 export * from './use-debounce';
+export * from './use-previous';

assets/js/base/hooks/use-collection-header.js

@@ -41,7 +41,12 @@ import { useShallowEqual } from './use-shallow-equal';
  *                              loading (true) or not.
  */
 export const useCollectionHeader = ( headerKey, options ) => {
-	const { namespace, resourceName, resourceValues, query } = options;
+	const {
+		namespace,
+		resourceName,
+		resourceValues = [],
+		query = {},
+	} = options;
 	if ( ! namespace || ! resourceName ) {
 		throw new Error(
 			'The options object must have valid values for the namespace and ' +

assets/js/base/hooks/use-collection.js

@@ -36,7 +36,12 @@ import { useShallowEqual } from './use-shallow-equal';
  *                              loading (true) or not.
  */
 export const useCollection = ( options ) => {
-	const { namespace, resourceName, resourceValues, query } = options;
+	const {
+		namespace,
+		resourceName,
+		resourceValues = [],
+		query = {},
+	} = options;
 	if ( ! namespace || ! resourceName ) {
 		throw new Error(
 			'The options object must have valid values for the namespace and ' +

assets/js/base/hooks/use-previous.js

@@ -0,0 +1,15 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Use Previous from https://usehooks.com/usePrevious/.
+ * @param {mixed} value
+ */
+export const usePrevious = ( value ) => {
+	const ref = useRef();
+
+	useEffect( () => {
+		ref.current = value;
+	}, [ value ] );
+
+	return ref.current;
+};

assets/js/base/hooks/use-query-state.js

@@ -40,15 +40,20 @@ export const useQueryStateContext = ( context ) => {
  *
  * @param {string} context  What context to retrieve the query state for.
  * @param {*}      queryKey The specific query key to retrieve the value for.
+ * @param {*}      defaultValue  Default value if query does not exist.
  *
  * @return {*}  Whatever value is set at the query state index using the
  *              provided context and query key.
  */
-export const useQueryStateByKey = ( context, queryKey ) => {
+export const useQueryStateByKey = (
+	context,
+	queryKey,
+	defaultValue = undefined
+) => {
 	const queryValue = useSelect(
 		( select ) => {
 			const store = select( storeKey );
-			return store.getValueForQueryKey( context, queryKey, undefined );
+			return store.getValueForQueryKey( context, queryKey, defaultValue );
 		},
 		[ context, queryKey ]
 	);