Commit caee32ce7df for woocommerce
commit caee32ce7dfd7df1656ded2ad4e4180f99fb742e
Author: Luigi Teschio <gigitux@gmail.com>
Date: Wed Sep 16 16:58:34 2026 +0200
Fix Mini Cart drawer styles with a separate contents stylesheet (#68788)
* Fix Mini-Cart drawer styles when the block is hidden
* Add changelog entry for Mini-Cart drawer styles
* Split Mini Cart button and contents styles
diff --git a/plugins/woocommerce/changelog/enqueue-mini-cart-css-with-contents b/plugins/woocommerce/changelog/enqueue-mini-cart-css-with-contents
new file mode 100644
index 00000000000..2cc49728d00
--- /dev/null
+++ b/plugins/woocommerce/changelog/enqueue-mini-cart-css-with-contents
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent unstyled Mini Cart drawer contents from appearing below the footer when the Mini Cart block is hidden.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx
index fcd3fe90ec6..360134daac6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx
@@ -10,6 +10,7 @@ import edit, { Save as save } from './edit';
import { blockName, attributes } from './attributes';
import './inner-blocks';
import { metadata } from './metadata';
+import './style.scss';
registerBlockType( blockName, {
...metadata,
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
new file mode 100644
index 00000000000..c61bf6f51ef
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
@@ -0,0 +1,191 @@
+@import "../../../base/components/button/style";
+@import "../../../base/components/drawer/style";
+@import "../../../base/components/cart-checkout/cart-line-items-table/style";
+@import "../../../base/components/cart-checkout/payment-method-icons/style";
+@import "../../../base/components/cart-checkout/product-badge/style";
+@import "../../../base/components/cart-checkout/product-details/style";
+@import "../../../base/components/cart-checkout/product-metadata/style";
+@import "../../../base/components/quantity-selector/style";
+@import "../../../base/components/product-name/style";
+@import "../../../base/components/product-price/style";
+
+.wc-block-mini-cart__template-part,
+.wp-block-woocommerce-mini-cart-contents {
+ height: 100%;
+}
+
+// Remove the stickiness from the footer when there isn't enough room
+// to display the items.
+@media screen and (max-height: 500px) {
+ .wp-block-woocommerce-mini-cart-contents {
+ height: auto;
+ }
+ .wc-block-mini-cart__drawer {
+ overflow-y: auto;
+ }
+ .wc-block-mini-cart__footer {
+ position: static;
+ }
+}
+
+// Reset font size so it doesn't depend on drawer's ancestors.
+.wc-block-mini-cart__drawer {
+ font-size: 1rem;
+
+ .wp-block-woocommerce-mini-cart-contents {
+ box-sizing: border-box;
+ padding: 0;
+ position: relative;
+ justify-content: center;
+
+ .wc-block-components-notices {
+ margin: #{$gap} #{$gap-largest} -#{$gap} #{$gap};
+ margin-bottom: unset;
+
+ .wc-block-components-notices__notice {
+ margin-bottom: unset;
+ }
+
+ &:empty {
+ display: none;
+ }
+ }
+ }
+}
+:where(.wp-block-woocommerce-mini-cart-contents) {
+ background: #fff;
+}
+
+.wp-block-woocommerce-empty-mini-cart-contents-block,
+.wp-block-woocommerce-filled-mini-cart-contents-block {
+ background: inherit;
+ height: 100%;
+ max-height: -webkit-fill-available;
+ max-height: -moz-available;
+ max-height: fill-available;
+ display: flex;
+ flex-direction: column;
+
+ &[hidden] {
+ display: none;
+ }
+}
+
+.wp-block-woocommerce-empty-mini-cart-contents-block {
+ justify-content: center;
+}
+
+.wp-block-woocommerce-filled-mini-cart-contents-block {
+ justify-content: space-between;
+}
+
+.wp-block-woocommerce-empty-mini-cart-contents-block
+ .wc-block-mini-cart__empty-cart-wrapper {
+ overflow-y: auto;
+ padding: $gap-largest $gap $gap;
+}
+
+h2.wc-block-mini-cart__title {
+ background: inherit;
+ padding-bottom: $gap * 2;
+ mask-image: linear-gradient(#000 calc(100% - #{$gap * 1.5}), transparent);
+ z-index: 1;
+ margin: $gap-smallest * -0.5 $gap $gap * -2;
+ font-size: 1.5rem;
+}
+
+.wc-block-mini-cart__items {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: $gap $gap 0;
+
+ .wc-block-mini-cart__products-table {
+ margin-bottom: auto;
+
+ .wc-block-cart-items__row {
+ padding-top: $gap-smaller;
+ padding-bottom: $gap-smaller;
+
+ &[hidden] {
+ display: none;
+ }
+
+ &:last-child::after {
+ content: none;
+ }
+ }
+ }
+}
+
+.wc-block-mini-cart__footer {
+ border-top: 1px solid $universal-border-light;
+ padding: $gap-large $gap;
+
+ .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
+ font-weight: 600;
+ margin-bottom: $gap;
+
+ .wc-block-components-totals-item__description {
+ @include font-x-small-locked;
+ display: none;
+ font-weight: 400;
+
+ @media only screen and (min-width: 480px) {
+ display: unset;
+ }
+ }
+ }
+
+ // First selector for the frontend, second selector for the editor.
+ .wc-block-mini-cart__footer-actions,
+ .wc-block-mini-cart__footer-actions
+ > .block-editor-inner-blocks
+ > .block-editor-block-list__layout {
+ display: flex;
+ gap: $gap;
+
+ .wc-block-components-button,
+ .wp-block-button,
+ .wp-block-woocommerce-mini-cart-cart-button-block,
+ .wp-block-woocommerce-mini-cart-checkout-button-block {
+ flex-grow: 1;
+ display: inline-flex;
+ }
+
+ .wp-block-woocommerce-mini-cart-cart-button-block {
+ @media only screen and (min-width: 480px) {
+ display: inline-flex;
+ }
+ }
+
+ @media only screen and (max-width: 480px) {
+ flex-direction: column;
+ }
+ }
+
+ .wc-block-components-payment-method-icons {
+ margin-top: $gap;
+ }
+}
+
+.wc-block-mini-cart__shopping-button {
+ display: flex;
+ justify-content: center;
+
+ a {
+ border: 2px solid;
+ color: currentColor;
+ font-weight: 600;
+ padding: $gap-small $gap-large;
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ background-color: $gray-900;
+ border-color: $gray-900;
+ color: $white;
+ }
+ }
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss
index 9b0adca82b9..8131d134628 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss
@@ -1,38 +1,9 @@
-@import "../../base/components/button/style";
-@import "../../base/components/drawer/style";
-@import "../../base/components/cart-checkout/cart-line-items-table/style";
-@import "../../base/components/cart-checkout/payment-method-icons/style";
-@import "../../base/components/cart-checkout/product-badge/style";
-@import "../../base/components/cart-checkout/product-details/style";
-@import "../../base/components/cart-checkout/product-metadata/style";
-@import "../../base/components/quantity-selector/style";
-@import "../../base/components/product-name/style";
-@import "../../base/components/product-price/style";
@import "quantity-badge/style";
.wc-block-mini-cart {
display: inline-block;
}
-.wc-block-mini-cart__template-part,
-.wp-block-woocommerce-mini-cart-contents {
- height: 100%;
-}
-
-// Remove the stickiness from the footer when there isn't enough room
-// to display the items.
-@media screen and (max-height: 500px) {
- .wp-block-woocommerce-mini-cart-contents {
- height: auto;
- }
- .wc-block-mini-cart__drawer {
- overflow-y: auto;
- }
- .wc-block-mini-cart__footer {
- position: static;
- }
-}
-
.wc-block-mini-cart__button {
align-items: center;
background-color: transparent;
@@ -79,165 +50,3 @@
.drawer-open .wc-block-mini-cart__button {
pointer-events: none;
}
-
-// Reset font size so it doesn't depend on drawer's ancestors.
-.wc-block-mini-cart__drawer {
- font-size: 1rem;
-
- .wp-block-woocommerce-mini-cart-contents {
- box-sizing: border-box;
- padding: 0;
- position: relative;
- justify-content: center;
-
- .wc-block-components-notices {
- margin: #{$gap} #{$gap-largest} -#{$gap} #{$gap};
- margin-bottom: unset;
-
- .wc-block-components-notices__notice {
- margin-bottom: unset;
- }
-
- &:empty {
- display: none;
- }
- }
- }
-}
-:where(.wp-block-woocommerce-mini-cart-contents) {
- background: #fff;
-}
-
-.wp-block-woocommerce-empty-mini-cart-contents-block,
-.wp-block-woocommerce-filled-mini-cart-contents-block {
- background: inherit;
- height: 100%;
- max-height: -webkit-fill-available;
- max-height: -moz-available;
- max-height: fill-available;
- display: flex;
- flex-direction: column;
-
- &[hidden] {
- display: none;
- }
-}
-
-.wp-block-woocommerce-empty-mini-cart-contents-block {
- justify-content: center;
-}
-
-.wp-block-woocommerce-filled-mini-cart-contents-block {
- justify-content: space-between;
-}
-
-.wp-block-woocommerce-empty-mini-cart-contents-block
- .wc-block-mini-cart__empty-cart-wrapper {
- overflow-y: auto;
- padding: $gap-largest $gap $gap;
-}
-
-h2.wc-block-mini-cart__title {
- background: inherit;
- padding-bottom: $gap * 2;
- mask-image: linear-gradient(#000 calc(100% - #{$gap * 1.5}), transparent);
- z-index: 1;
- margin: $gap-smallest * -0.5 $gap $gap * -2;
- font-size: 1.5rem;
-}
-
-.wc-block-mini-cart__items {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- overflow-y: auto;
- padding: $gap $gap 0;
-
- .wc-block-mini-cart__products-table {
- margin-bottom: auto;
-
- .wc-block-cart-items__row {
- padding-top: $gap-smaller;
- padding-bottom: $gap-smaller;
-
- &[hidden] {
- display: none;
- }
-
- &:last-child::after {
- content: none;
- }
- }
- }
-}
-
-.wc-block-mini-cart__footer {
- border-top: 1px solid $universal-border-light;
- padding: $gap-large $gap;
-
- .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
- font-weight: 600;
- margin-bottom: $gap;
-
- .wc-block-components-totals-item__description {
- @include font-x-small-locked;
- display: none;
- font-weight: 400;
-
- @media only screen and (min-width: 480px) {
- display: unset;
- }
- }
- }
-
- // First selector for the frontend, second selector for the editor.
- .wc-block-mini-cart__footer-actions,
- .wc-block-mini-cart__footer-actions
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout {
- display: flex;
- gap: $gap;
-
- .wc-block-components-button,
- .wp-block-button,
- .wp-block-woocommerce-mini-cart-cart-button-block,
- .wp-block-woocommerce-mini-cart-checkout-button-block {
- flex-grow: 1;
- display: inline-flex;
- }
-
- .wp-block-woocommerce-mini-cart-cart-button-block {
- @media only screen and (min-width: 480px) {
- display: inline-flex;
- }
- }
-
- @media only screen and (max-width: 480px) {
- flex-direction: column;
- }
- }
-
- .wc-block-components-payment-method-icons {
- margin-top: $gap;
- }
-}
-
-.wc-block-mini-cart__shopping-button {
- display: flex;
- justify-content: center;
-
- a {
- border: 2px solid;
- color: currentColor;
- font-weight: 600;
- padding: $gap-small $gap-large;
- text-decoration: none;
-
- &:hover,
- &:focus {
- background-color: $gray-900;
- border-color: $gray-900;
- color: $white;
- }
- }
-}
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php
index 18d7d9a5c97..7d6e941492d 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php
@@ -35,7 +35,7 @@ class MiniCartContents extends AbstractBlock {
* @return string[]
*/
protected function get_block_type_style() {
- return [ 'wc-blocks-style', 'wc-blocks-packages-style' ];
+ return array_merge( parent::get_block_type_style() ?? [], [ 'wc-blocks-packages-style' ] );
}
/**