Commit 56b35701a5 for woocommerce
commit 56b35701a5ac94def2efb1fb319c5c60072896d9
Author: Tung Du <dinhtungdu@gmail.com>
Date: Fri Apr 25 11:13:47 2025 +0700
Product Filters Checkbox List: review the usage of `:where` usage (#57497)
Using :where selector for form element make the checkbox list style
easier to break. We reduced it to only custom class for generic elements
like div and span to strike a balance, keeping our style consistence and
still allowing easy overriding.
diff --git a/plugins/woocommerce/changelog/wooplug-4051-product-filters-review-the-usage-of-where-selector b/plugins/woocommerce/changelog/wooplug-4051-product-filters-review-the-usage-of-where-selector
new file mode 100644
index 0000000000..392191f75f
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooplug-4051-product-filters-review-the-usage-of-where-selector
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Filters: review usage of :where selector, remove them for form elements of checkbox list.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/checkbox-list/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/checkbox-list/style.scss
index 8f96964757..d2a8a77f52 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/checkbox-list/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/checkbox-list/style.scss
@@ -1,10 +1,10 @@
-:where(.wc-block-product-filter-checkbox-list__list) {
+.wc-block-product-filter-checkbox-list__list {
list-style: none outside;
margin: 0;
padding: 0;
}
-:where(.wc-block-product-filter-checkbox-list__label) {
+.wc-block-product-filter-checkbox-list__label {
align-items: center;
display: inline-flex;
gap: 0.625em;
@@ -36,7 +36,7 @@
}
}
-input.wc-block-product-filter-checkbox-list__input {
+input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
appearance: none;
border-radius: 2px;
border: 1px solid var(--wc-product-filter-checkbox-list-option-element-border, transparent);
@@ -50,17 +50,12 @@ input.wc-block-product-filter-checkbox-list__input {
cursor: pointer;
}
-.wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark {
- display: block;
- pointer-events: none;
-}
-
-.wc-block-product-filter-checkbox-list__input:focus {
+input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus {
outline-width: 1px;
outline-color: var(--wc-product-filter-checkbox-list-option-element-border, currentColor);
}
-:where(.wc-block-product-filter-checkbox-list__mark) {
+svg.wc-block-product-filter-checkbox-list__mark {
box-sizing: border-box;
display: none;
height: 1em;
@@ -72,6 +67,18 @@ input.wc-block-product-filter-checkbox-list__input {
color: var(--wc-product-filter-checkbox-list-option-element-selected, currentColor);
}
+input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
+ &::before,
+ &::after {
+ content: none;
+ }
+
+ + .wc-block-product-filter-checkbox-list__mark {
+ display: block;
+ pointer-events: none;
+ }
+}
+
:where(.wc-block-product-filter-checkbox-list__text-wrapper) {
font-size: 0.875em;
display: inline-flex;
@@ -79,11 +86,10 @@ input.wc-block-product-filter-checkbox-list__input {
gap: $gap-smallest;
}
-:where(.wc-block-product-filter-checkbox-list__show-more) {
+.wc-block-product-filter-checkbox-list__show-more {
text-decoration: underline;
appearance: none;
background: transparent;
border: none;
padding: 0;
}
-
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
index db049ca629..4fb045a41a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
@@ -4,7 +4,7 @@
gap: $gap-smallest;
}
-:where(.wc-block-product-filter-chips__item) {
+.wc-block-product-filter-chips__item {
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
padding: $gap-smallest $gap-smaller;
appearance: none;
@@ -25,7 +25,7 @@
}
}
-:where(.wc-block-product-filter-chips__item[aria-checked="true"]) {
+.wc-block-product-filter-chips__item[aria-checked="true"] {
background: currentColor;
.has-selected-chip-text-color & {
@@ -45,15 +45,11 @@
gap: $gap-smallest;
}
-:where(
-.wc-block-product-filter-chips:not(.has-selected-chip-text-color)
-.wc-block-product-filter-chips__item[aria-checked="true"]
-> .wc-block-product-filter-chips__label
-) {
+.wc-block-product-filter-chips:not(.has-selected-chip-text-color) .wc-block-product-filter-chips__item[aria-checked="true"] > .wc-block-product-filter-chips__label {
filter: invert(100%);
}
-:where(.wc-block-product-filter-chips__show-more) {
+.wc-block-product-filter-chips__show-more {
text-decoration: underline;
appearance: none;
background: transparent;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/removable-chips/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/removable-chips/style.scss
index bc8d013bcb..5b33d1de78 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/removable-chips/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/removable-chips/style.scss
@@ -47,11 +47,12 @@
border-radius: 2px;
font-size: 0.875em;
display: flex;
+ gap: $gap-smaller;
align-items: center;
justify-content: space-between;
.wc-block-product-filter-removable-chips__remove {
- background: none;
+ background-color: transparent;
border: none;
cursor: pointer;
padding: 0;