diff --git a/assets/js/blocks/attribute-filter/block.tsx b/assets/js/blocks/attribute-filter/block.tsx
index bb1048b8f56..5b25f7731f6 100644
--- a/assets/js/blocks/attribute-filter/block.tsx
+++ b/assets/js/blocks/attribute-filter/block.tsx
@@ -525,7 +525,7 @@ const AttributeFilterBlock = ( {
disabled={ isDisabled }
placeholder={ sprintf(
/* translators: %s attribute name. */
- __( 'Any %s', 'woo-gutenberg-products-block' ),
+ __( 'Select %s', 'woo-gutenberg-products-block' ),
attributeObject.label
) }
onChange={ ( tokens: string[] ) => {
@@ -611,24 +611,24 @@ const AttributeFilterBlock = ( {
isDisabled={ isDisabled }
/>
) }
-
- { checked.length > 0 && (
- setChecked( [] ) }
- screenReaderLabel={ __(
- 'Reset stock filter',
- 'woo-gutenberg-products-block'
- ) }
- />
- ) }
- { blockAttributes.showFilterButton && (
- onSubmit( checked ) }
- />
- ) }
-
+
+
+ { checked.length > 0 && (
+ setChecked( [] ) }
+ screenReaderLabel={ __(
+ 'Reset stock filter',
+ 'woo-gutenberg-products-block'
+ ) }
+ />
+ ) }
+ { blockAttributes.showFilterButton && (
+ onSubmit( checked ) }
+ />
+ ) }
>
);
diff --git a/assets/js/blocks/attribute-filter/style.scss b/assets/js/blocks/attribute-filter/style.scss
index cae4051f562..bf5e4fba343 100644
--- a/assets/js/blocks/attribute-filter/style.scss
+++ b/assets/js/blocks/attribute-filter/style.scss
@@ -50,6 +50,30 @@
opacity: 0.6;
}
+ .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
+ border: 1px solid $gray-700;
+ border-radius: 4px;
+ padding: $gap-smaller;
+
+ .components-form-token-field__input::placeholder {
+ color: $black;
+ }
+
+ .components-form-token-field__suggestions-list {
+ border: 1px solid $gray-700;
+ border-radius: 4px;
+ margin-top: $gap-smaller;
+ max-height: 21em;
+
+ .components-form-token-field__suggestion {
+ color: $black;
+ border: 1px solid $gray-400;
+ border-radius: 4px;
+ margin: $gap-small;
+ padding: $gap-small;
+ }
+ }
+ }
}
.wc-block-attribute-filter__multiple-toggle,