Mini Cart drawer: print width in PHP (https://github.com/woocommerce/woocommerce-blocks/pull/9329)

* Mini Cart drawer: print width in PHP

* Remove unnecessary timeout

* Make sure classic themes have a Mini Cart contents width value set up

plugins/woocommerce-blocks/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);
 }
 

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx

@@ -15,12 +15,7 @@ type MiniCartContentsBlockProps = {
 export const MiniCartContentsBlock = (
 	props: MiniCartContentsBlockProps
 ): JSX.Element => {
-	const {
+	const { children } = props;
-		children,
-		attributes: { width },
-	} = props;
-
-	document.documentElement.style.setProperty( '--drawer-width', width );
 
 	return <>{ children }</>;
 };

plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php

@@ -111,6 +111,9 @@ class MiniCartContents extends AbstractBlock {
 		);
 
 		$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'];

plugins/woocommerce-blocks/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'
 			);