diff --git a/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/attribute-dropdown.tsx b/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/attribute-dropdown.tsx index 17ab261e585..933ab2e111a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/attribute-dropdown.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/components/attribute-dropdown.tsx @@ -11,7 +11,6 @@ import { PreviewDropdown } from '../../components/preview-dropdown'; type Props = { label: string; - textColor: string; }; export const AttributeDropdown = ( { label }: Props ) => { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/edit.tsx index 405ca0714b4..b800af6b010 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/attribute-filter/edit.tsx @@ -41,8 +41,6 @@ import { Inspector } from './components/inspector-controls'; import { AttributeCheckboxList } from './components/attribute-checkbox-list'; import { AttributeDropdown } from './components/attribute-dropdown'; import './style.scss'; -import { extractBuiltInColor } from '../../utils'; -import { useStyleProps } from '../../../../base/hooks'; const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] ); @@ -62,13 +60,6 @@ const Edit = ( props: EditProps ) => { showCounts, } = blockAttributes; - const { className, style } = useStyleProps( props.attributes ); - const builtInColor = extractBuiltInColor( className ); - - const textColor = builtInColor - ? `var(--wp--preset--color--${ builtInColor })` - : style.color; - const attributeObject = getAttributeFromId( attributeId ); const [ isEditing, setIsEditing ] = useState( @@ -267,7 +258,6 @@ const Edit = ( props: EditProps ) => { attributeObject.label || __( 'attribute', 'woocommerce' ) } - textColor={ textColor || '' } /> ) : ( ( value: T ): value is NonNullable< T > { + return value !== null && value !== undefined; +} + function getUrl( selectedTerms: string[], slug: string, @@ -47,18 +51,14 @@ store( 'woocommerce/collection-attribute-filter', { const dropdownContext = getContext< DropdownContext >( 'woocommerce/interactivity-dropdown' ); - const context = getContext< AttributeFilterContext >(); + const filters = dropdownContext.selectedItems + .map( ( item ) => item.value ) + .filter( nonNullable ); - if ( dropdownContext.selectedItem.value ) { - navigate( - getUrl( - [ dropdownContext.selectedItem.value ], - context.attributeSlug, - context.queryType - ) - ); - } + navigate( + getUrl( filters, context.attributeSlug, context.queryType ) + ); }, updateProducts: ( event: HTMLElementEvent< HTMLInputElement > ) => { if ( ! event.target.value ) return; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/utils.ts b/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/utils.ts deleted file mode 100644 index 653c0711117..00000000000 --- a/plugins/woocommerce-blocks/assets/js/blocks/collection-filters/utils.ts +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Extracts the built-in color from a block class name string if it exists. - * Returns null if no built-in color is found. - * - * @param blockClassString The block class name string. - * @return {string|null} The color name or null if no built-in color is found. - */ -export const extractBuiltInColor = ( blockClassString: string ) => { - const regex = /has-(?!link|text|background)([a-z-]+)-color/; - const match = blockClassString.match( regex ); - return match ? match[ 1 ] : null; -}; diff --git a/plugins/woocommerce-blocks/packages/interactivity-components/dropdown/index.ts b/plugins/woocommerce-blocks/packages/interactivity-components/dropdown/index.ts index 65a9070ca8a..f4438bceea5 100644 --- a/plugins/woocommerce-blocks/packages/interactivity-components/dropdown/index.ts +++ b/plugins/woocommerce-blocks/packages/interactivity-components/dropdown/index.ts @@ -2,7 +2,6 @@ * External dependencies */ import { getContext, store } from '@woocommerce/interactivity'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -11,6 +10,7 @@ import './style.scss'; export type DropdownContext = { selectType: 'multiple' | 'single'; + defaultPlaceholder: string; item: { label: string; value: string; @@ -42,18 +42,18 @@ type DropdownStore = { store< DropdownStore >( 'woocommerce/interactivity-dropdown', { state: { get placeholderText(): string { - const { selectType, selectedItems } = + const { selectType, selectedItems, defaultPlaceholder } = getContext< DropdownContext >(); if ( selectType === 'single' ) { return selectedItems?.length && selectedItems[ 0 ].label ? selectedItems[ 0 ]?.label - : __( 'Select an option', 'woocommerce' ); + : defaultPlaceholder; } else if ( selectType === 'multiple' && selectedItems.length === 0 ) { - return __( 'Select options', 'woocommerce' ); + return defaultPlaceholder; } return ''; diff --git a/plugins/woocommerce/changelog/43211-dev-placeholder-override b/plugins/woocommerce/changelog/43211-dev-placeholder-override new file mode 100644 index 00000000000..006e7f74256 --- /dev/null +++ b/plugins/woocommerce/changelog/43211-dev-placeholder-override @@ -0,0 +1,4 @@ +Significance: patch +Type: add + +[Experimental] support passing a placeholder text to the interactivity Dropdown component. \ No newline at end of file diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/CollectionAttributeFilter.php b/plugins/woocommerce/src/Blocks/BlockTypes/CollectionAttributeFilter.php index 8d3921b5030..41ba4a7efe2 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/CollectionAttributeFilter.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/CollectionAttributeFilter.php @@ -211,8 +211,10 @@ final class CollectionAttributeFilter extends AbstractBlock { return ''; } - $list_items = array(); - $selected_item = array(); + $list_items = array(); + $selected_items = array(); + + $product_attribute = wc_get_attribute( $attributes['attributeId'] ); foreach ( $options as $option ) { $item = array( @@ -223,7 +225,7 @@ final class CollectionAttributeFilter extends AbstractBlock { $list_items[] = $item; if ( $option['selected'] ) { - $selected_item = $item; + $selected_items[] = $item; } } @@ -231,7 +233,10 @@ final class CollectionAttributeFilter extends AbstractBlock { array( 'items' => $list_items, 'action' => 'woocommerce/collection-attribute-filter::actions.navigate', - 'selected_items' => array( $selected_item ), + 'selected_items' => $selected_items, + 'select_type' => $attributes['selectType'] ?? 'multiple', + // translators: %s is a product attribute name. + 'placeholder' => sprintf( __( 'Select %s', 'woocommerce' ), $product_attribute->name ), ) ); } diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/CollectionRatingFilter.php b/plugins/woocommerce/src/Blocks/BlockTypes/CollectionRatingFilter.php index fc79fd7687f..03d99624db0 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/CollectionRatingFilter.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/CollectionRatingFilter.php @@ -222,7 +222,8 @@ final class CollectionRatingFilter extends AbstractBlock { * @return array */ private function get_dropdown_props( $rating_counts, $selected_ratings_query, $show_counts, $select_type ) { - $ratings_array = explode( ',', $selected_ratings_query ); + $ratings_array = explode( ',', $selected_ratings_query ); + $placeholder_text = 'single' === $select_type ? __( 'Select a rating', 'woocommerce' ) : __( 'Select ratings', 'woocommerce' ); $selected_items = array_reduce( $rating_counts, @@ -259,6 +260,7 @@ final class CollectionRatingFilter extends AbstractBlock { 'select_type' => $select_type, 'selected_items' => $selected_items, 'action' => 'woocommerce/collection-rating-filter::actions.onDropdownChange', + 'placeholder' => $placeholder_text, ); } } diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/CollectionStockFilter.php b/plugins/woocommerce/src/Blocks/BlockTypes/CollectionStockFilter.php index f8326c5141e..f5a9471c59f 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/CollectionStockFilter.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/CollectionStockFilter.php @@ -151,6 +151,8 @@ final class CollectionStockFilter extends AbstractBlock { $select_type = $attributes['selectType'] ?? 'single'; $stock_statuses = wc_get_product_stock_status_options(); + $placeholder_text = 'single' === $select_type ? __( 'Select stock status', 'woocommerce' ) : __( 'Select stock statuses', 'woocommerce' ); + // check the url params to select initial item on page load. // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Nonce verification is not required here. $query = isset( $_GET[ self::STOCK_STATUS_QUERY_VAR ] ) ? sanitize_text_field( wp_unslash( $_GET[ self::STOCK_STATUS_QUERY_VAR ] ) ) : ''; @@ -236,6 +238,7 @@ final class CollectionStockFilter extends AbstractBlock { 'action' => 'woocommerce/collection-stock-filter::actions.navigate', 'selected_items' => $selected_items, 'select_type' => $select_type, + 'placeholder' => $placeholder_text, ) ); ?> diff --git a/plugins/woocommerce/src/Blocks/InteractivityComponents/Dropdown.php b/plugins/woocommerce/src/Blocks/InteractivityComponents/Dropdown.php index f07618db265..0d1d51cab2b 100644 --- a/plugins/woocommerce/src/Blocks/InteractivityComponents/Dropdown.php +++ b/plugins/woocommerce/src/Blocks/InteractivityComponents/Dropdown.php @@ -24,15 +24,18 @@ class Dropdown { // Items should be an array of objects with a label and value property. $items = $props['items'] ?? array(); + $default_placeholder = 'single' === $select_type ? __( 'Select an option', 'woocommerce' ) : __( 'Select options', 'woocommerce' ); + $placeholder = $props['placeholder'] ?? $default_placeholder; + $dropdown_context = array( - 'selectedItems' => $selected_items, - 'isOpen' => false, - 'selectType' => $select_type, + 'selectedItems' => $selected_items, + 'isOpen' => false, + 'selectType' => $select_type, + 'defaultPlaceholder' => $placeholder, ); - $action = $props['action'] ?? ''; - $namespace = wp_json_encode( array( 'namespace' => 'woocommerce/interactivity-dropdown' ) ); - $default_placeholder = 'single' === $select_type ? __( 'Select an option', 'woocommerce' ) : __( 'Select options', 'woocommerce' ); + $action = $props['action'] ?? ''; + $namespace = wp_json_encode( array( 'namespace' => 'woocommerce/interactivity-dropdown' ) ); ob_start(); ?> @@ -41,7 +44,7 @@ class Dropdown {
- +
@@ -51,14 +54,15 @@ class Dropdown { >
- @@ -66,27 +70,28 @@ class Dropdown { -
-
- + @@ -98,9 +103,9 @@ class Dropdown { foreach ( $items as $item ) : $context = array( 'item' => $item ); ?> -