diff --git a/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss
index a3b5cd275a3..25812f579f0 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss
+++ b/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);
 }
 
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
index 3deb69ae2ff..bdef74e85d8 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
+++ b/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 {
-		children,
-		attributes: { width },
-	} = props;
-
-	document.documentElement.style.setProperty( '--drawer-width', width );
+	const { children } = props;
 
 	return <>{ children }</>;
 };
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php b/plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php
index d80e25db484..8560c2413c0 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php
+++ b/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'];
diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js
index a8e63429bec..548e46c11d9 100644
--- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js
+++ b/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'
 			);