Mini Cart drawer: print width in PHP

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);
 }
 

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 }</>;
 };

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'];

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'
 			);