Mini Cart drawer: print width in PHP (#9329)

* Mini Cart drawer: print width in PHP * Remove unnecessary timeout * Make sure classic themes have a Mini Cart contents width value set up
woocommerce · May 5, 2023 · 58d721f · 58d721f
1 parent f42ff5f
commit 58d721f
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/assets/js/base/components/drawer/style.scss b/assets/js/base/components/drawer/style.scss
@@ -1,4 +1,6 @@
 :root {
+	/* This value might be overridden in PHP based on the attribute set by the user. */
+	--drawer-width: 480px;
 	--neg-drawer-width: calc(var(--drawer-width) * -1);
 }
 

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
@@ -15,12 +15,7 @@ type MiniCartContentsBlockProps = {
 export const MiniCartContentsBlock = (
 	props: MiniCartContentsBlockProps
 ): JSX.Element => {
-	const {
-		children,
-		attributes: { width },
-	} = props;
-
-	document.documentElement.style.setProperty( '--drawer-width', width );
+	const { children } = props;
 
 	return <>{ children }</>;
 };
diff --git a/src/BlockTypes/MiniCartContents.php b/src/BlockTypes/MiniCartContents.php
@@ -111,6 +111,9 @@ protected function enqueue_assets( array $attributes ) {
 		);
 
 		$parsed_style = '';
+		if ( array_key_exists( 'width', $attributes ) ) {
+			$parsed_style .= ':root{--drawer-width: ' . esc_html( $attributes['width'] ) . '}';
+		}
 
 		foreach ( $styles as $style ) {
 			$selector = is_array( $style['selector'] ) ? implode( ',', $style['selector'] ) : $style['selector'];

diff --git a/tests/e2e/specs/shopper/mini-cart.test.js b/tests/e2e/specs/shopper/mini-cart.test.js
@@ -304,8 +304,6 @@ describe( 'Shopper → Mini Cart', () => {
 				'.wc-block-components-quantity-selector__button--plus'
 			);
 
-			await page.waitForTimeout( 500 );
-
 			await page.click(
 				'.wc-block-components-quantity-selector__button--plus'
 			);