Fix: Attribute Filters: allow choosing between single/multiple selection

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

@@ -46,6 +46,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"selectType": {
+			"type": "string",
+			"default": "multiple" 
+		},
 		"isPreview": {
 			"type": "boolean",
 			"default": false

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

@@ -366,9 +366,7 @@ const AttributeFilterBlock = ( {
 		updateCheckedFilters,
 	] );
 
-	const multiple =
-		blockAttributes.displayStyle !== 'dropdown' ||
-		blockAttributes.queryType === 'or';
+	const multiple = blockAttributes.selectType !== 'single';
 
 	/**
 	 * When a checkbox in the list changes, update state.

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

@@ -51,6 +51,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
 		queryType,
 		showCounts,
 		showFilterButton,
+		selectType,
 	} = attributes;
 
 	const [ isEditing, setIsEditing ] = useState(
@@ -214,39 +215,71 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
 				>
 					<ToggleGroupControl
 						label={ __(
-							'Query Type',
+							'Allow selecting multiple options?',
 							'woo-gutenberg-products-block'
 						) }
-						help={
-							queryType === 'and'
-								? __(
-										'Products that have all of the selected attributes will be shown.',
-										'woo-gutenberg-products-block'
-								  )
-								: __(
-										'Products that have any of the selected attributes will be shown.',
-										'woo-gutenberg-products-block'
-								  )
-						}
-						value={ queryType }
+						value={ selectType || 'multiple' }
 						onChange={ ( value: string ) =>
 							setAttributes( {
-								queryType: value,
+								selectType: value,
 							} )
 						}
 					>
 						<ToggleGroupControlOption
-							value="and"
+							value="multiple"
 							label={ __(
-								'And',
+								'Multiple',
 								'woo-gutenberg-products-block'
 							) }
 						/>
 						<ToggleGroupControlOption
-							value="or"
-							label={ __( 'Or', 'woo-gutenberg-products-block' ) }
+							value="single"
+							label={ __(
+								'Single',
+								'woo-gutenberg-products-block'
+							) }
 						/>
 					</ToggleGroupControl>
+					{ selectType === 'multiple' && (
+						<ToggleGroupControl
+							label={ __(
+								'Query Type',
+								'woo-gutenberg-products-block'
+							) }
+							help={
+								queryType === 'and'
+									? __(
+											'Products that have all of the selected attributes will be shown.',
+											'woo-gutenberg-products-block'
+									  )
+									: __(
+											'Products that have any of the selected attributes will be shown.',
+											'woo-gutenberg-products-block'
+									  )
+							}
+							value={ queryType }
+							onChange={ ( value: string ) =>
+								setAttributes( {
+									queryType: value,
+								} )
+							}
+						>
+							<ToggleGroupControlOption
+								value="and"
+								label={ __(
+									'And',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="or"
+								label={ __(
+									'Or',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+						</ToggleGroupControl>
+					) }
 					<ToggleGroupControl
 						label={ __(
 							'Display Style',

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

@@ -26,8 +26,8 @@ const getProps = ( el: HTMLElement ) => {
 				el.dataset.displayStyle ||
 				metadata.attributes.displayStyle.default,
 			showFilterButton: el.dataset.showFilterButton === 'true',
-			isPreview: false,
-			className: el.dataset.className || '',
+			selectType:
+				el.dataset.selectType || metadata.attributes.selectType.default,
 		},
 	};
 };

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

@@ -66,6 +66,7 @@ registerBlockType( metadata, {
 						headingLevel: 3,
 						displayStyle: instance?.raw?.display_type || 'list',
 						showFilterButton: false,
+						selectType: instance?.raw?.select_type || 'multiple',
 						isPreview: false,
 					} ),
 			},
@@ -83,6 +84,7 @@ registerBlockType( metadata, {
 			headingLevel,
 			displayStyle,
 			showFilterButton,
+			selectType,
 		} = attributes;
 		const data: Record< string, unknown > = {
 			'data-attribute-id': attributeId,
@@ -97,6 +99,9 @@ registerBlockType( metadata, {
 		if ( showFilterButton ) {
 			data[ 'data-show-filter-button' ] = showFilterButton;
 		}
+		if ( selectType === 'single' ) {
+			data[ 'data-select-type' ] = selectType;
+		}
 		return (
 			<div
 				{ ...useBlockProps.save( {

assets/js/blocks/attribute-filter/types.ts

@@ -4,15 +4,16 @@
 import type { BlockEditProps } from '@wordpress/blocks';
 
 export interface BlockAttributes {
-	className: string;
+	className?: string;
 	attributeId: number;
 	showCounts: boolean;
 	queryType: string;
 	heading: string;
 	headingLevel: number;
 	displayStyle: string;
 	showFilterButton: boolean;
-	isPreview: boolean;
+	selectType: string;
+	isPreview?: boolean;
 }
 
 export interface EditProps extends BlockEditProps< BlockAttributes > {