Commit 6be3e19519e for woocommerce
commit 6be3e19519e872e5cc5ef183daef62624e7e7ec1
Author: Luigi Teschio <gigitux@gmail.com>
Date: Wed Sep 23 09:11:59 2026 +0200
Use class directives for the Mini Cart overlay (#68973)
* Use class directives for Mini Cart overlay
* Add changelog entries for Mini Cart class directives
* Let the Mini Cart hidden class come from its directive
diff --git a/plugins/woocommerce/changelog/58519-mini-cart-class-directives b/plugins/woocommerce/changelog/58519-mini-cart-class-directives
new file mode 100644
index 00000000000..9241138504d
--- /dev/null
+++ b/plugins/woocommerce/changelog/58519-mini-cart-class-directives
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Use class directives for the Mini Cart overlay without changing its merchant-facing behavior.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/frontend.ts
index 0bcfa150bca..23b66ec1453 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/frontend.ts
@@ -106,7 +106,6 @@ type MiniCart = {
isOpen: boolean;
totalItemsInCart: number;
formattedSubtotal: string;
- drawerOverlayClass: string;
badgeIsVisible: boolean;
cartIsEmpty: boolean;
drawerRole: string | null;
@@ -232,14 +231,6 @@ store< MiniCart >(
return state.isOpen ? '-1' : null;
},
- get drawerOverlayClass() {
- const baseClasses =
- 'wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--with-slide-out';
- return state.isOpen
- ? `${ baseClasses } wc-block-components-drawer__screen-overlay--with-slide-in`
- : `${ baseClasses } wc-block-components-drawer__screen-overlay--is-hidden`;
- },
-
get badgeIsVisible(): boolean {
const cartHasItems = miniCartState.totalItemsInCart > 0;
const { productCountVisibility } =
diff --git a/plugins/woocommerce/client/blocks/changelog/58519-mini-cart-class-directives b/plugins/woocommerce/client/blocks/changelog/58519-mini-cart-class-directives
new file mode 100644
index 00000000000..5097b7c4d10
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/changelog/58519-mini-cart-class-directives
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Remove the Mini Cart overlay class string getter after switching to class directives.
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php
index ddecff17987..2f980028ab0 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php
@@ -338,7 +338,6 @@ class MiniCart extends AbstractBlock {
'shouldShowTaxLabel' => $cart->get_cart_contents_tax() > 0,
'badgeIsVisible' => $badge_is_visible,
'formattedSubtotal' => $formatted_subtotal,
- 'drawerOverlayClass' => 'wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--with-slide-out wc-block-components-drawer__screen-overlay--is-hidden',
'buttonAriaLabel' => function () use ( $button_aria_label_template ) {
$state = wp_interactivity_state();
return isset( $attributes['hasHiddenPrice'] ) && false !== $attributes['hasHiddenPrice']
@@ -455,7 +454,9 @@ class MiniCart extends AbstractBlock {
data-wp-on--click="actions.overlayCloseDrawer"
data-wp-on--keydown="actions.handleOverlayKeydown"
data-wp-watch="callbacks.focusFirstElement"
- data-wp-bind--class="state.drawerOverlayClass"
+ data-wp-class--wc-block-components-drawer__screen-overlay--with-slide-in="state.isOpen"
+ data-wp-class--wc-block-components-drawer__screen-overlay--is-hidden="!state.isOpen"
+ class="wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--with-slide-out"
>
<div
data-wp-bind--role="state.drawerRole"