diff --git a/assets/js/base/components/drawer/style.scss b/assets/js/base/components/drawer/style.scss index a3b5cd275a3..25812f579f0 100644 --- 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 index 3deb69ae2ff..bdef74e85d8 100644 --- 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 index d80e25db484..8560c2413c0 100644 --- 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 index a8e63429bec..548e46c11d9 100644 --- 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' );