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,