Attribute ID saving

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

@@ -2,7 +2,13 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { Fragment, useCallback, useMemo } from '@wordpress/element';
+import {
+	Fragment,
+	useCallback,
+	useMemo,
+	useState,
+	useEffect,
+} from '@wordpress/element';
 import classNames from 'classnames';
 
 /**
@@ -14,6 +20,13 @@ 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>
@@ -30,6 +43,25 @@ const CheckboxList = ( { className, onChange, options, isLoading } ) => {
 		);
 	}, [] );
 
+	const onCheckboxChange = useCallback(
+		( event ) => {
+			const isChecked = event.target.checked;
+			const checkedValue = event.target.value;
+			const newChecked = checked;
+
+			if ( ! isChecked ) {
+				newChecked.filter( ( value ) => value !== checkedValue );
+			} else {
+				newChecked.push( checkedValue );
+			}
+
+			newChecked.sort();
+
+			setChecked( newChecked );
+		},
+		[ options, checked ]
+	);
+
 	const renderOptions = useCallback( () => {
 		return (
 			<Fragment>
@@ -38,16 +70,20 @@ const CheckboxList = ( { className, onChange, options, isLoading } ) => {
 						<input
 							type="checkbox"
 							id={ option.key }
-							name={ option.key }
-							value="1"
-							onChange={ onChange }
+							value={ option.key }
+							onChange={ onCheckboxChange }
+							checked={
+								checked.includes( option.key )
+									? 'checked'
+									: false
+							}
 						/>
 						<label htmlFor={ option.key }>{ option.label }</label>
 					</li>
 				) ) }
 			</Fragment>
 		);
-	}, [ options ] );
+	}, [ options, checked ] );
 
 	const listClass = classNames(
 		'wc-block-checkbox-list',

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

@@ -7,7 +7,8 @@ import {
 	useQueryStateContext,
 } from '@woocommerce/base-hooks';
 import { useCallback, Fragment, useEffect, useState } from '@wordpress/element';
-import { keyBy, invert, map, trim, split, join } from 'lodash';
+import { find, join, findIndex } from 'lodash';
+import { ATTRIBUTES } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -22,6 +23,8 @@ const AttributeFilterBlock = ( { attributes } ) => {
 	const { showCounts, attributeId, queryType } = attributes;
 
 	const [ options, setOptions ] = useState( [] );
+	const [ checkedOptions, setCheckedOptions ] = useState( [] );
+	const [ currentAttribute, setCurrentAttribute ] = useState( [] );
 
 	const [ productAttributes, setProductAttributes ] = useQueryStateByKey(
 		'product-grid',
@@ -116,40 +119,43 @@ const AttributeFilterBlock = ( { attributes } ) => {
 		allTermsIsLoading,
 	] );
 
-	const onChange = useCallback( ( event ) => {
-		const checked = event.target.checked;
-		const slug = event.target.name;
-		const keyedAttributes = keyBy( productAttributes, 'attribute' );
-
-		// Get current terms as array.
-		const terms =
-			keyedAttributes.pa_color && keyedAttributes.pa_color.slug
-				? invert(
-						map( split( keyedAttributes.pa_color.slug, ',' ), trim )
-				  )
-				: [];
-
-		if ( checked ) {
-			terms[ slug ] = 1;
-		} else {
-			delete terms[ slug ];
-		}
-
-		keyedAttributes.pa_color = {};
-		keyedAttributes.pa_color.attribute = 'pa_color';
-		keyedAttributes.pa_color.slug = join(
-			Object.values( invert( terms ) ).filter( Boolean ),
-			','
+	useEffect( () => {
+		setCurrentAttribute(
+			find( ATTRIBUTES, [ 'attribute_id', attributeId + '' ] )
 		);
-		keyedAttributes.pa_color.operator = 'or' === queryType ? 'in' : 'and';
+	}, [ attributeId ] );
 
-		if ( ! keyedAttributes.pa_color.slug ) {
-			delete keyedAttributes.pa_color;
+	useEffect( () => {
+		const taxonomy = currentAttribute.attribute_name;
+		const newProductAttributes = productAttributes;
+		const currentQueryIndex = findIndex( newProductAttributes, [
+			'attribute',
+			taxonomy,
+		] );
+
+		const updatedQuery = {
+			attribute: taxonomy,
+			operator: 'or' === queryType ? 'in' : 'and',
+			slug: join( checkedOptions, ',' ),
+		};
+
+		if ( ! updatedQuery.slug ) {
+			delete newProductAttributes[ currentQueryIndex ];
+		} else {
+			newProductAttributes[ currentQueryIndex ] = updatedQuery;
 		}
 
-		setProductAttributes( Object.values( keyedAttributes ) );
+		setProductAttributes( newProductAttributes );
+	}, [ checkedOptions, currentAttribute, productAttributes ] );
+
+	const onChange = useCallback( ( checked ) => {
+		setCheckedOptions( checked );
 	}, [] );
 
+	if ( ! currentAttribute ) {
+		return null;
+	}
+
 	return (
 		<div className="wc-block-attribute-filter">
 			<CheckboxList

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

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { Fragment, useState } from '@wordpress/element';
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { Fragment, useState, useCallback } from '@wordpress/element';
 import { InspectorControls, BlockControls } from '@wordpress/editor';
 import {
 	Placeholder,
@@ -15,6 +15,8 @@ import {
 } from '@wordpress/components';
 import Gridicon from 'gridicons';
 import { ATTRIBUTES } from '@woocommerce/block-settings';
+import { SearchListControl } from '@woocommerce/components';
+import { mapValues, toArray } from 'lodash';
 
 /**
  * Internal dependencies
@@ -24,7 +26,6 @@ import './editor.scss';
 import { IconExternal } from '../../components/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 import ToggleButtonControl from '../../components/toggle-button-control';
-import ProductAttributeControl from '@woocommerce/block-components/product-attribute-control';
 
 const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 	const [ isEditing, setIsEditing ] = useState( ! attributes.attributeId );
@@ -154,7 +155,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 				'woo-gutenberg-products-block'
 			) }
 			instructions={ __(
-				'Display a list of filters based on a chosen product attribute.',
+				'Display a list of filters based on a chosen attribute.',
 				'woo-gutenberg-products-block'
 			) }
 		>
@@ -187,17 +188,64 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 		</Placeholder>
 	);
 
+	const onDone = useCallback( () => {
+		setIsEditing( false );
+		debouncedSpeak(
+			__(
+				'Showing attribute filter block preview.',
+				'woo-gutenberg-products-block'
+			)
+		);
+	}, [] );
+
+	const onChange = useCallback( ( selected ) => {
+		setAttributes( {
+			attributeId: selected[ 0 ].id,
+		} );
+	}, [] );
+
 	const renderEditMode = () => {
-		const onDone = () => {
-			setIsEditing( false );
-			debouncedSpeak(
-				__(
-					'Showing attribute filter block preview.',
-					'woo-gutenberg-products-block'
-				)
-			);
+		const { attributeId } = attributes;
+
+		const messages = {
+			clear: __(
+				'Clear selected attribute',
+				'woo-gutenberg-products-block'
+			),
+			list: __( 'Product Attributes', 'woo-gutenberg-products-block' ),
+			noItems: __(
+				"Your store doesn't have any product attributes.",
+				'woo-gutenberg-products-block'
+			),
+			search: __(
+				'Search for product attribute',
+				'woo-gutenberg-products-block'
+			),
+			selected: ( n ) =>
+				sprintf(
+					_n(
+						'%d attribute selected',
+						'%d attributes selected',
+						n,
+						'woo-gutenberg-products-block'
+					),
+					n
+				),
+			updated: __(
+				'Product attribute search results updated.',
+				'woo-gutenberg-products-block'
+			),
 		};
 
+		const list = toArray(
+			mapValues( ATTRIBUTES, ( item ) => {
+				return {
+					id: parseInt( item.attribute_id, 10 ),
+					name: item.attribute_label,
+				};
+			} )
+		);
+
 		return (
 			<Placeholder
 				className="wc-block-attribute-filter"
@@ -207,12 +255,21 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 					'woo-gutenberg-products-block'
 				) }
 				instructions={ __(
-					'Display a list of filters based on a chosen product attribute.',
+					'Display a list of filters based on a chosen attribute.',
 					'woo-gutenberg-products-block'
 				) }
 			>
 				<div className="wc-block-attribute-filter__selection">
-					<ProductAttributeControl onChange={ () => {} } />
+					<SearchListControl
+						className="woocommerce-product-attributes"
+						list={ list }
+						selected={ list.filter(
+							( { id } ) => id === attributeId
+						) }
+						onChange={ onChange }
+						messages={ messages }
+						isSingle
+					/>
 					<Button isDefault onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>

assets/js/blocks/attribute-filter/editor.scss

@@ -16,6 +16,11 @@
 			font-size: 14px;
 		}
 	}
+	.woocommerce-search-list__search {
+		border-top: 0;
+		margin-top: 0;
+		padding-top: 0;
+	}
 	.wc-block-attribute-filter__add_attribute_button {
 		margin: 0 0 1em;
 		line-height: 24px;

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

@@ -15,13 +15,17 @@ const containers = document.querySelectorAll(
 if ( containers.length ) {
 	Array.prototype.forEach.call( containers, ( el ) => {
 		const attributes = {
-			attributeId: el.dataset.attributeid || 1, // @todo
+			attributeId: parseInt( el.dataset.attributeid || 0, 10 ),
 			showCounts: el.dataset.showcounts === 'true',
 			displayStyle: el.dataset.displaystyle,
 			queryType: el.dataset.querytype,
 		};
 		el.classList.remove( 'is-loading' );
 
+		if ( ! attributes.attributeId ) {
+			return null;
+		}
+
 		render( <Block attributes={ attributes } />, el );
 	} );
 }

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

@@ -48,8 +48,9 @@ registerBlockType( 'woocommerce/attribute-filter', {
 	 * Save the props to post content.
 	 */
 	save( { attributes } ) {
-		const { showCounts, displayStyle, queryType } = attributes;
+		const { showCounts, displayStyle, queryType, attributeId } = attributes;
 		const data = {
+			'data-attributeid': attributeId,
 			'data-showcounts': showCounts,
 			'data-displaystyle': displayStyle,
 			'data-querytype': queryType,