diff --git a/assets/js/base/components/dropdown-selector/index.js b/assets/js/base/components/dropdown-selector/index.js
index 54d1273c661..9ca3b63e7e4 100644
--- a/assets/js/base/components/dropdown-selector/index.js
+++ b/assets/js/base/components/dropdown-selector/index.js
@@ -2,9 +2,10 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import classNames from 'classnames';
 import Downshift from 'downshift';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,33 +14,9 @@ import DropdownSelectorInput from './input';
 import DropdownSelectorInputWrapper from './input-wrapper';
 import DropdownSelectorMenu from './menu';
 import DropdownSelectorSelectedChip from './selected-chip';
+import DropdownSelectorSelectedValue from './selected-value';
 import './style.scss';
 
-/**
- * State reducer for the downshift component.
- * See: https://github.com/downshift-js/downshift#statereducer
- */
-const stateReducer = ( state, changes ) => {
-	switch ( changes.type ) {
-		case Downshift.stateChangeTypes.keyDownEnter:
-		case Downshift.stateChangeTypes.clickItem:
-			return {
-				...changes,
-				highlightedIndex: state.highlightedIndex,
-				isOpen: true,
-				inputValue: '',
-			};
-		case Downshift.stateChangeTypes.blurInput:
-		case Downshift.stateChangeTypes.mouseUp:
-			return {
-				...changes,
-				inputValue: state.inputValue,
-			};
-		default:
-			return changes;
-	}
-};
-
 /**
  * Component used to show an input box with a dropdown with suggestions.
  */
@@ -50,6 +27,7 @@ const DropdownSelector = ( {
 	inputLabel = '',
 	isDisabled = false,
 	isLoading = false,
+	multiple = false,
 	onChange = () => {},
 	options = [],
 } ) => {
@@ -60,11 +38,33 @@ const DropdownSelector = ( {
 		'is-loading': isLoading,
 	} );
 
-	const focusInput = ( isOpen ) => {
-		if ( ! isOpen ) {
-			inputRef.current.focus();
-		}
-	};
+	/**
+	 * State reducer for the downshift component.
+	 * See: https://github.com/downshift-js/downshift#statereducer
+	 */
+	const stateReducer = useCallback(
+		( state, changes ) => {
+			switch ( changes.type ) {
+				case Downshift.stateChangeTypes.keyDownEnter:
+				case Downshift.stateChangeTypes.clickItem:
+					return {
+						...changes,
+						highlightedIndex: state.highlightedIndex,
+						isOpen: multiple,
+						inputValue: '',
+					};
+				case Downshift.stateChangeTypes.blurInput:
+				case Downshift.stateChangeTypes.mouseUp:
+					return {
+						...changes,
+						inputValue: state.inputValue,
+					};
+				default:
+					return changes;
+			}
+		},
+		[ multiple ]
+	);
 
 	return (
 		<Downshift
@@ -82,7 +82,12 @@ const DropdownSelector = ( {
 				isOpen,
 				openMenu,
 			} ) => (
-				<div className={ classes }>
+				<div
+					className={ classNames( classes, {
+						'is-multiple': multiple,
+						'is-single': ! multiple,
+					} ) }
+				>
 					{ /* eslint-disable-next-line jsx-a11y/label-has-for */ }
 					<label
 						{ ...getLabelProps( {
@@ -93,25 +98,32 @@ const DropdownSelector = ( {
 					</label>
 					<DropdownSelectorInputWrapper
 						isOpen={ isOpen }
-						onClick={ () => focusInput( isOpen ) }
+						onClick={ () => inputRef.current.focus() }
 					>
 						{ checked.map( ( value ) => {
 							const option = options.find(
 								( o ) => o.value === value
 							);
-							return (
+							const onRemoveItem = ( val ) => {
+								onChange( val );
+								inputRef.current.focus();
+							};
+							return multiple ? (
 								<DropdownSelectorSelectedChip
 									key={ value }
-									onRemoveItem={ ( val ) => {
-										onChange( val );
-										focusInput( isOpen );
-									} }
+									onRemoveItem={ onRemoveItem }
+									option={ option }
+								/>
+							) : (
+								<DropdownSelectorSelectedValue
+									key={ value }
+									onClick={ () => inputRef.current.focus() }
+									onRemoveItem={ onRemoveItem }
 									option={ option }
 								/>
 							);
 						} ) }
 						<DropdownSelectorInput
-							attributeLabel={ attributeLabel }
 							checked={ checked }
 							getInputProps={ getInputProps }
 							inputRef={ inputRef }
@@ -119,8 +131,20 @@ const DropdownSelector = ( {
 							onFocus={ openMenu }
 							onRemoveItem={ ( val ) => {
 								onChange( val );
-								focusInput( isOpen );
+								inputRef.current.focus();
 							} }
+							placeholder={
+								checked.length > 0 && multiple
+									? null
+									: sprintf(
+											// Translators: %s attribute name.
+											__(
+												'Any %s',
+												'woo-gutenberg-products-block'
+											),
+											attributeLabel
+									  )
+							}
 							value={ inputValue }
 						/>
 					</DropdownSelectorInputWrapper>
diff --git a/assets/js/base/components/dropdown-selector/input.js b/assets/js/base/components/dropdown-selector/input.js
index 22a1f23e35d..5cefc8dba37 100644
--- a/assets/js/base/components/dropdown-selector/input.js
+++ b/assets/js/base/components/dropdown-selector/input.js
@@ -1,16 +1,11 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
 const DropdownSelectorInput = ( {
-	attributeLabel,
 	checked,
 	getInputProps,
 	inputRef,
 	isDisabled,
 	onFocus,
 	onRemoveItem,
+	placeholder,
 	value,
 } ) => {
 	return (
@@ -29,14 +24,7 @@ const DropdownSelectorInput = ( {
 						onRemoveItem( checked[ checked.length - 1 ] );
 					}
 				},
-				placeholder:
-					checked.length === 0
-						? sprintf(
-								// Translators: %s attribute name.
-								__( 'Any %s', 'woo-gutenberg-products-block' ),
-								attributeLabel
-						  )
-						: null,
+				placeholder,
 			} ) }
 		/>
 	);
diff --git a/assets/js/base/components/dropdown-selector/selected-chip.js b/assets/js/base/components/dropdown-selector/selected-chip.js
index 4741c916294..638236062de 100644
--- a/assets/js/base/components/dropdown-selector/selected-chip.js
+++ b/assets/js/base/components/dropdown-selector/selected-chip.js
@@ -7,8 +7,7 @@ const DropdownSelectorSelectedChip = ( { onRemoveItem, option } ) => {
 	return (
 		<button
 			className="wc-block-dropdown-selector__selected-chip"
-			onClick={ ( e ) => {
-				e.stopPropagation();
+			onClick={ () => {
 				onRemoveItem( option.value );
 			} }
 			onKeyDown={ ( e ) => {
@@ -21,7 +20,9 @@ const DropdownSelectorSelectedChip = ( { onRemoveItem, option } ) => {
 				option.name
 			) }
 		>
-			{ option.label }
+			<span className="wc-block-dropdown-selector__selected-chip__label">
+				{ option.label }
+			</span>
 			<span className="wc-block-dropdown-selector__selected-chip__remove">
 				𝘅
 			</span>
diff --git a/assets/js/base/components/dropdown-selector/selected-value.js b/assets/js/base/components/dropdown-selector/selected-value.js
new file mode 100644
index 00000000000..3127da7c220
--- /dev/null
+++ b/assets/js/base/components/dropdown-selector/selected-value.js
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+
+const DropdownSelectorSelectedValue = ( { onClick, onRemoveItem, option } ) => {
+	const labelRef = useRef( null );
+
+	useEffect( () => {
+		labelRef.current.focus();
+	}, [ labelRef ] );
+
+	return (
+		<div className="wc-block-dropdown-selector__selected-value">
+			<button
+				ref={ labelRef }
+				className="wc-block-dropdown-selector__selected-value__label"
+				onClick={ ( e ) => {
+					e.stopPropagation();
+					onClick( option.value );
+				} }
+				aria-label={ sprintf(
+					__(
+						'Replace current %s filter',
+						'woo-gutenberg-products-block'
+					),
+					option.name
+				) }
+			>
+				{ option.label }
+			</button>
+			<button
+				className="wc-block-dropdown-selector__selected-value__remove"
+				onClick={ () => {
+					onRemoveItem( option.value );
+				} }
+				onKeyDown={ ( e ) => {
+					if ( e.key === 'Backspace' || e.key === 'Delete' ) {
+						onRemoveItem( option.value );
+					}
+				} }
+				aria-label={ sprintf(
+					__( 'Remove %s filter', 'woo-gutenberg-products-block' ),
+					option.name
+				) }
+			>
+				𝘅
+			</button>
+		</div>
+	);
+};
+
+export default DropdownSelectorSelectedValue;
diff --git a/assets/js/base/components/dropdown-selector/style.scss b/assets/js/base/components/dropdown-selector/style.scss
index ce7fe0e4ba1..eb14b133233 100644
--- a/assets/js/base/components/dropdown-selector/style.scss
+++ b/assets/js/base/components/dropdown-selector/style.scss
@@ -5,7 +5,7 @@
 }
 
 .wc-block-dropdown-selector__input-wrapper {
-	align-items: baseline;
+	align-items: center;
 	border: 1px solid #9f9f9f;
 	border-radius: 4px;
 	cursor: text;
@@ -26,13 +26,46 @@
 }
 
 .wc-block-dropdown-selector__input {
-	background: transparent;
-	border: 0;
-	flex: 1;
 	font-size: 0.8em;
 	height: 1.8em;
 	min-width: 0;
-	margin: 1.5px;
+
+	.is-single & {
+		margin: 0 4px;
+		padding: 0;
+		width: 100%;
+
+		&:hover,
+		&:focus,
+		&:active {
+			outline: 0;
+		}
+
+		&:not(:first-child):focus {
+			margin-bottom: 1.5px;
+			margin-top: 1.5px;
+		}
+
+		&:not(:first-child):not(:focus) {
+			@include visually-hidden();
+			// Fixes an issue in Firefox that `flex: wrap` in the container was making
+			// this element to still occupy one line.
+			position: absolute;
+		}
+	}
+
+	.is-multiple & {
+		flex: 1;
+		min-width: 0;
+		margin: 1.5px;
+	}
+}
+
+// Visually hide the input
+.is-single .wc-block-dropdown-selector__input:first-child,
+.is-multiple .wc-block-dropdown-selector__input {
+	background: transparent;
+	border: 0;
 
 	&:hover,
 	&:focus,
@@ -41,38 +74,78 @@
 	}
 }
 
-.wc-block-dropdown-selector__selected-chip {
-	background-color: $core-grey-light-600;
-	border: 1px solid #9f9f9f;
-	border-radius: 4px;
-	color: $core-grey-dark-600;
-	display: inline-block;
-	font-size: 0.8em;
-	font-weight: inherit;
-	height: 1.8em;
-	margin: 1.5px;
-	padding: 0 0 0 0.3em;
-	white-space: nowrap;
+.wc-block-dropdown-selector {
+	// Reset <button> styles
+	.wc-block-dropdown-selector__selected-chip,
+	.wc-block-dropdown-selector__selected-value__label,
+	.wc-block-dropdown-selector__selected-value__remove {
+		background-color: transparent;
+		border: 0;
+		color: inherit;
+		font-size: inherit;
+		font-weight: inherit;
+		text-transform: initial;
 
-	&:hover,
-	&:focus,
-	&:active {
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: transparent;
+			text-decoration: none;
+		}
+	}
+
+	.wc-block-dropdown-selector__selected-value {
+		align-items: center;
+		color: $core-grey-dark-600;
+		display: inline-flex;
+		height: 1.8em;
+		padding: 1.5px 1.5px 1.5px 4px;
+		width: 100%;
+	}
+
+	.wc-block-dropdown-selector__selected-chip {
+		align-items: center;
 		background-color: $core-grey-light-600;
 		border: 1px solid #9f9f9f;
+		border-radius: 4px;
 		color: $core-grey-dark-600;
+		display: inline-flex;
+		height: 1.8em;
+		margin: 1.5px;
+		padding: 0 0 0 4px;
+		white-space: nowrap;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: $core-grey-light-400;
+			border: 1px solid #9f9f9f;
+			color: $core-grey-dark-600;
+		}
 	}
-}
 
-.wc-block-dropdown-selector__selected-chip__remove {
-	background-color: transparent;
-	border: 0;
-	display: inline-block;
-	padding: 0 0.3em;
+	.wc-block-dropdown-selector__selected-value__label,
+	.wc-block-dropdown-selector__selected-chip__label {
+		font-size: 0.8em;
+		flex-grow: 1;
+		padding: 0;
+		text-align: left;
+	}
+
+	.wc-block-dropdown-selector__selected-value__remove,
+	.wc-block-dropdown-selector__selected-chip__remove {
+		background-color: transparent;
+		border: 0;
+		display: inline-block;
+		line-height: 1;
+		padding: 0 0.3em;
+	}
 }
 
 .wc-block-dropdown-selector__list {
 	list-style: none;
 	margin: -1px 0 0;
+	padding: 0;
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -89,6 +162,9 @@
 .wc-block-dropdown-selector__list-item {
 	background-color: #fff;
 	color: $core-grey-dark-600;
+	cursor: default;
+	font-size: 0.8em;
+	margin: 0;
 	padding: 0 $gap-smallest;
 
 	&.is-selected {
diff --git a/assets/js/blocks/attribute-filter/block.js b/assets/js/blocks/attribute-filter/block.js
index ddfe6bbd374..584a0d0bf9f 100644
--- a/assets/js/blocks/attribute-filter/block.js
+++ b/assets/js/blocks/attribute-filter/block.js
@@ -124,6 +124,9 @@ const AttributeFilterBlock = ( {
 		shouldSelect: blockAttributes.attributeId > 0,
 	} );
 
+	const filterAvailableFilters =
+		blockAttributes.displayStyle !== 'dropdown' &&
+		blockAttributes.queryType === 'and';
 	const {
 		results: filteredCounts,
 		isLoading: filteredCountsLoading,
@@ -132,7 +135,7 @@ const AttributeFilterBlock = ( {
 			taxonomy: attributeObject.taxonomy,
 			queryType: blockAttributes.queryType,
 		},
-		queryState,
+		queryState: filterAvailableFilters ? queryState : null,
 	} );
 
 	/**
@@ -202,41 +205,88 @@ const AttributeFilterBlock = ( {
 		[ attributeTerms ]
 	);
 
+	const multiple =
+		blockAttributes.displayStyle !== 'dropdown' ||
+		blockAttributes.queryType === 'or';
+
 	/**
 	 * When a checkbox in the list changes, update state.
 	 */
 	const onChange = useCallback(
 		( checkedValue ) => {
-			const isChecked = ! checked.includes( checkedValue );
-			const newChecked = checked.filter(
-				( value ) => value !== checkedValue
-			);
-			const checkedOption = displayedOptions.find(
-				( option ) => option.value === checkedValue
-			);
-
-			if ( isChecked ) {
-				newChecked.push( checkedValue );
-				newChecked.sort();
-				speak(
-					sprintf(
-						__(
-							'%s filter added.',
-							'woo-gutenberg-products-block'
-						),
-						checkedOption.name
-					)
+			const getFilterNameFromValue = ( filterValue ) => {
+				const { name } = displayedOptions.find(
+					( option ) => option.value === filterValue
 				);
+
+				return name;
+			};
+
+			const announceFilterChange = ( { filterAdded, filterRemoved } ) => {
+				const filterAddedName = filterAdded
+					? getFilterNameFromValue( filterAdded )
+					: null;
+				const filterRemovedName = filterRemoved
+					? getFilterNameFromValue( filterRemoved )
+					: null;
+				if ( filterAddedName && filterRemovedName ) {
+					speak(
+						sprintf(
+							__(
+								// translators: %s attribute terms (for example: 'red', 'blue', 'large'...)
+								'%s filter replaced with %s.',
+								'woo-gutenberg-products-block'
+							),
+							filterAddedName,
+							filterRemovedName
+						)
+					);
+				} else if ( filterAddedName ) {
+					speak(
+						sprintf(
+							// translators: %s attribute term (for example: 'red', 'blue', 'large'...)
+							__(
+								'%s filter added.',
+								'woo-gutenberg-products-block'
+							),
+							filterAddedName
+						)
+					);
+				} else if ( filterRemovedName ) {
+					speak(
+						sprintf(
+							// translators: %s attribute term (for example: 'red', 'blue', 'large'...)
+							__(
+								'%s filter removed.',
+								'woo-gutenberg-products-block'
+							),
+							filterRemovedName
+						)
+					);
+				}
+			};
+
+			const previouslyChecked = checked.includes( checkedValue );
+			let newChecked;
+
+			if ( ! multiple ) {
+				newChecked = previouslyChecked ? [] : [ checkedValue ];
+				const filterAdded = previouslyChecked ? null : checkedValue;
+				const filterRemoved =
+					checked.length === 1 ? checked[ 0 ] : null;
+				announceFilterChange( { filterAdded, filterRemoved } );
 			} else {
-				speak(
-					sprintf(
-						__(
-							'%s filter removed.',
-							'woo-gutenberg-products-block'
-						),
-						checkedOption.name
-					)
+				newChecked = checked.filter(
+					( value ) => value !== checkedValue
 				);
+
+				if ( ! previouslyChecked ) {
+					newChecked.push( checkedValue );
+					newChecked.sort();
+					announceFilterChange( { filterAdded: checkedValue } );
+				} else {
+					announceFilterChange( { filterRemoved: checkedValue } );
+				}
 			}
 
 			const newSelectedTerms = getSelectedTerms( newChecked );
@@ -249,15 +299,7 @@ const AttributeFilterBlock = ( {
 				blockAttributes.queryType === 'or' ? 'in' : 'and'
 			);
 		},
-		[
-			attributeTerms,
-			checked,
-			productAttributesQuery,
-			setProductAttributesQuery,
-			attributeObject,
-			blockAttributes,
-			displayedOptions,
-		]
+		[ displayedOptions, multiple ]
 	);
 
 	if ( displayedOptions.length === 0 && ! attributeTermsLoading ) {
@@ -281,6 +323,7 @@ const AttributeFilterBlock = ( {
 						className={ 'wc-block-attribute-filter-dropdown' }
 						inputLabel={ blockAttributes.heading }
 						isLoading={ isLoading }
+						multiple={ multiple }
 						onChange={ onChange }
 						options={ displayedOptions }
 					/>
diff --git a/assets/js/blocks/attribute-filter/style.scss b/assets/js/blocks/attribute-filter/style.scss
index 22a96c96705..9aad5c0ee6f 100644
--- a/assets/js/blocks/attribute-filter/style.scss
+++ b/assets/js/blocks/attribute-filter/style.scss
@@ -1,11 +1,13 @@
 .wc-block-attribute-filter {
 	margin-bottom: $gap-large;
 
-	.wc-block-attribute-filter-list-count::before {
-		content: " (";
-	}
-	.wc-block-attribute-filter-list-count::after {
-		content: ")";
+	.wc-block-attribute-filter-list-count {
+		&::before {
+			content: " (";
+		}
+		&::after {
+			content: ")";
+		}
 	}
 
 	.wc-block-attribute-filter-list {
@@ -25,9 +27,8 @@
 		}
 	}
 
-	.wc-block-dropdown-selector {
-		.wc-block-dropdown-selector__list .wc-block-attribute-filter-list-count {
-			opacity: 0.6;
-		}
+	.is-single .wc-block-attribute-filter-list-count,
+	.wc-block-dropdown-selector .wc-block-dropdown-selector__list .wc-block-attribute-filter-list-count {
+		opacity: 0.6;
 	}
 }