MVP: Attribute filter block powered interactivity API

assets/js/blocks/collection-filters/inner-blocks/attribute-filter/block.json

@@ -0,0 +1,52 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"name": "woocommerce/collection-attribute-filter",
+	"version": "1.0.0",
+	"title": "Collection Attribute Filter",
+	"description": "Enable customers to filter the product grid by selecting one or more attributes, such as color.",
+	"category": "woocommerce",
+	"keywords": [
+		"WooCommerce"
+	],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"ancestor": [
+		"woocommerce/collection-filters"
+	],
+	"supports": {
+		"interactivity": true
+	},
+	"usesContext": [
+		"collectionData"
+	],
+	"attributes": {
+		"queryParam": {
+			"type": "object",
+			"default": {}
+		},
+		"attributeId": {
+			"type": "number",
+			"default": 0
+		},
+		"showCounts": {
+			"type": "boolean",
+			"default": false
+		},
+		"queryType": {
+			"type": "string",
+			"default": "or"
+		},
+		"displayStyle": {
+			"type": "string",
+			"default": "list"
+		},
+		"selectType": {
+			"type": "string",
+			"default": "multiple"
+		},
+		"isPreview": {
+			"type": "boolean",
+			"default": false
+		}
+	}
+}

assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/attribute-checkbox-list.tsx

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import FilterElementLabel from '@woocommerce/base-components/filter-element-label';
+import { CheckboxList } from '@woocommerce/blocks-components';
+import { AttributeTerm } from '@woocommerce/types';
+
+type Props = {
+	attributeTerms: AttributeTerm[];
+	showCounts?: boolean;
+};
+export const AttributeCheckboxList = ( {
+	attributeTerms,
+	showCounts,
+}: Props ) => (
+	<CheckboxList
+		className="attribute-checkbox-list"
+		onChange={ () => null }
+		options={ attributeTerms.map( ( term ) => ( {
+			label: (
+				<FilterElementLabel
+					name={ term.name }
+					count={ showCounts ? term.count : null }
+				/>
+			),
+			value: term.slug,
+		} ) ) }
+	/>
+);

assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/attribute-dropdown.tsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import FormTokenField from '@woocommerce/base-components/form-token-field';
+import { AttributeObject } from '@woocommerce/types';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, chevronDown } from '@wordpress/icons';
+
+type Props = {
+	attributeObject: Partial< AttributeObject > | undefined;
+};
+export const AttributeDropdown = ( { attributeObject }: Props ) => (
+	<div className="attribute-dropdown">
+		<FormTokenField
+			suggestions={ [] }
+			placeholder={ sprintf(
+				/* translators: %s attribute name. */
+				__( 'Select %s', 'woo-gutenberg-products-block' ),
+				attributeObject?.label
+			) }
+			onChange={ () => null }
+			value={ [] }
+		/>
+		<Icon icon={ chevronDown } size={ 30 } />
+	</div>
+);

assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/attribute-select-controls.tsx

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { sort } from 'fast-sort';
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { SearchListControl } from '@woocommerce/editor-components/search-list-control';
+import { getSetting } from '@woocommerce/settings';
+import { SearchListItem } from '@woocommerce/editor-components/search-list-control/types';
+import { AttributeSetting } from '@woocommerce/types';
+
+const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );
+
+type AttributeSelectControlsProps = {
+	isCompact: boolean;
+	setAttributeId: ( id: number ) => void;
+	attributeId: number;
+};
+
+export const AttributeSelectControls = ( {
+	isCompact,
+	setAttributeId,
+	attributeId,
+}: AttributeSelectControlsProps ) => {
+	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 a product attribute:',
+			'woo-gutenberg-products-block'
+		),
+		selected: ( n: number ) =>
+			sprintf(
+				/* translators: %d is the number of attributes selected. */
+				_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 = sort(
+		ATTRIBUTES.map( ( item ) => {
+			return {
+				id: parseInt( item.attribute_id, 10 ),
+				name: item.attribute_label,
+			};
+		} )
+	).asc( 'name' );
+
+	const onChange = ( selected: SearchListItem[] ) => {
+		if ( ! selected || ! selected.length ) {
+			return;
+		}
+
+		const selectedId = selected[ 0 ].id;
+		const productAttribute = ATTRIBUTES.find(
+			( attribute ) => attribute.attribute_id === selectedId.toString()
+		);
+
+		if ( ! productAttribute || attributeId === selectedId ) {
+			return;
+		}
+
+		setAttributeId( selectedId as number );
+	};
+
+	return (
+		<SearchListControl
+			className="woocommerce-product-attributes"
+			list={ list }
+			selected={ list.filter( ( { id } ) => id === attributeId ) }
+			onChange={ onChange }
+			messages={ messages }
+			isSingle
+			isCompact={ isCompact }
+		/>
+	);
+};

assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/inspector-controls.tsx

@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	ToggleControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { AttributeSelectControls } from './attribute-select-controls';
+import { EditProps } from '../types';
+
+export const Inspector = ( { attributes, setAttributes }: EditProps ) => {
+	const { attributeId, showCounts, queryType, displayStyle, selectType } =
+		attributes;
+	return (
+		<InspectorControls key="inspector">
+			<PanelBody
+				title={ __(
+					'Display Settings',
+					'woo-gutenberg-products-block'
+				) }
+			>
+				<ToggleControl
+					label={ __(
+						'Display product count',
+						'woo-gutenberg-products-block'
+					) }
+					checked={ showCounts }
+					onChange={ () =>
+						setAttributes( {
+							showCounts: ! showCounts,
+						} )
+					}
+				/>
+				<ToggleGroupControl
+					label={ __(
+						'Allow selecting multiple options?',
+						'woo-gutenberg-products-block'
+					) }
+					value={ selectType || 'multiple' }
+					onChange={ ( value: string ) =>
+						setAttributes( {
+							selectType: value,
+						} )
+					}
+					className="wc-block-attribute-filter__multiple-toggle"
+				>
+					<ToggleGroupControlOption
+						value="multiple"
+						label={ __(
+							'Multiple',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+					<ToggleGroupControlOption
+						value="single"
+						label={ __( 'Single', 'woo-gutenberg-products-block' ) }
+					/>
+				</ToggleGroupControl>
+				{ selectType === 'multiple' && (
+					<ToggleGroupControl
+						label={ __(
+							'Filter Conditions',
+							'woo-gutenberg-products-block'
+						) }
+						help={
+							queryType === 'and'
+								? __(
+										'Choose to return filter results for all of the attributes selected.',
+										'woo-gutenberg-products-block'
+								  )
+								: __(
+										'Choose to return filter results for any of the attributes selected.',
+										'woo-gutenberg-products-block'
+								  )
+						}
+						value={ queryType }
+						onChange={ ( value: string ) =>
+							setAttributes( {
+								queryType: value,
+							} )
+						}
+						className="wc-block-attribute-filter__conditions-toggle"
+					>
+						<ToggleGroupControlOption
+							value="and"
+							label={ __(
+								'All',
+								'woo-gutenberg-products-block'
+							) }
+						/>
+						<ToggleGroupControlOption
+							value="or"
+							label={ __(
+								'Any',
+								'woo-gutenberg-products-block'
+							) }
+						/>
+					</ToggleGroupControl>
+				) }
+				<ToggleGroupControl
+					label={ __(
+						'Display Style',
+						'woo-gutenberg-products-block'
+					) }
+					value={ displayStyle }
+					onChange={ ( value: string ) =>
+						setAttributes( {
+							displayStyle: value,
+						} )
+					}
+					className="wc-block-attribute-filter__display-toggle"
+				>
+					<ToggleGroupControlOption
+						value="list"
+						label={ __( 'List', 'woo-gutenberg-products-block' ) }
+					/>
+					<ToggleGroupControlOption
+						value="dropdown"
+						label={ __(
+							'Dropdown',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+				</ToggleGroupControl>
+			</PanelBody>
+			<PanelBody
+				title={ __(
+					'Content Settings',
+					'woo-gutenberg-products-block'
+				) }
+				initialOpen={ false }
+			>
+				<AttributeSelectControls
+					isCompact={ true }
+					attributeId={ attributeId }
+					setAttributes={ setAttributes }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+};