Mini cart: allow changing the drawer width (#8930)

* WIP * Add width control to the settings sidebar * Fix linting errors * Remove comments * Inline function * Fix issue with smaller viewports * Remove unnecessary code
woocommerce · Apr 14, 2023 · 3770313 · 3770313
1 parent 2300e1f
commit 3770313
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 74 deletions.
diff --git a/assets/js/base/components/drawer/style.scss b/assets/js/base/components/drawer/style.scss
@@ -1,6 +1,8 @@
+:root {
+	--neg-drawer-width: calc(var(--drawer-width) * -1);
+}
+
 $drawer-animation-duration: 0.3s;
-$drawer-width: 480px;
-$drawer-width-mobile: 100vw;
 
 @keyframes fadein {
 	from {
@@ -18,19 +20,7 @@ $drawer-width-mobile: 100vw;
 	}
 
 	to {
-		transform: translateX(-$drawer-width);
-	}
-}
-
-@media only screen and (max-width: 480px) {
-	@keyframes slidein {
-		from {
-			transform: translateX(0);
-		}
-
-		to {
-			transform: translateX(-$drawer-width-mobile);
-		}
+		transform: translateX(var(--neg-drawer-width));
 	}
 }
 
@@ -72,13 +62,9 @@ $drawer-width-mobile: 100vw;
 	position: fixed;
 	right: 0;
 	top: 0;
-	transform: translateX(-$drawer-width);
-	width: $drawer-width;
-
-	@media only screen and (max-width: 480px) {
-		transform: translateX(-$drawer-width-mobile);
-		width: $drawer-width-mobile;
-	}
+	transform: translateX(max(-100%, var(--neg-drawer-width)));
+	width: var(--drawer-width);
+	max-width: 100%;
 }
 
 .wc-block-components-drawer__screen-overlay--with-slide-out .wc-block-components-drawer {

diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx
@@ -4,7 +4,10 @@
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 import Drawer from '@woocommerce/base-components/drawer';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { translateJQueryEventToNative } from '@woocommerce/base-utils';
+import {
+	getValidBlockAttributes,
+	translateJQueryEventToNative,
+} from '@woocommerce/base-utils';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import {
 	formatPrice,
@@ -34,7 +37,10 @@ import classnames from 'classnames';
 import QuantityBadge from './quantity-badge';
 import { MiniCartContentsBlock } from './mini-cart-contents/block';
 import './style.scss';
-import { blockName } from './mini-cart-contents/attributes';
+import {
+	blockName,
+	attributes as miniCartContentsAttributes,
+} from './mini-cart-contents/attributes';
 
 interface Props {
 	isInitiallyOpen?: boolean;
@@ -105,6 +111,17 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 				renderParentBlock( {
 					Block: MiniCartContentsBlock,
 					blockName,
+					getProps: ( el: Element ) => {
+						return {
+							attributes: getValidBlockAttributes(
+								miniCartContentsAttributes,
+								/* eslint-disable @typescript-eslint/no-explicit-any */
+								( el instanceof HTMLElement
+									? el.dataset
+									: {} ) as any
+							),
+						};
+					},
 					selector: '.wp-block-woocommerce-mini-cart-contents',
 					blockMap: getRegisteredBlockComponents( blockName ),
 				} );

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/attributes.ts b/assets/js/blocks/mini-cart/mini-cart-contents/attributes.ts
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { filledCart, removeCart } from '@woocommerce/icons';
+
+export const blockName = 'woocommerce/mini-cart-contents';
+
+export const attributes = {
+	isPreview: {
+		type: 'boolean',
+		default: false,
+	},
+	lock: {
+		type: 'object',
+		default: {
+			remove: true,
+			move: true,
+		},
+	},
+	currentView: {
+		type: 'string',
+		default: 'woocommerce/filled-mini-cart-contents-block',
+		source: 'readonly', // custom source to prevent saving to post content
+	},
+	editorViews: {
+		type: 'object',
+		default: [
+			{
+				view: 'woocommerce/filled-mini-cart-contents-block',
+				label: __( 'Filled Mini Cart', 'woo-gutenberg-products-block' ),
+				icon: <Icon icon={ filledCart } />,
+			},
+			{
+				view: 'woocommerce/empty-mini-cart-contents-block',
+				label: __( 'Empty Mini Cart', 'woo-gutenberg-products-block' ),
+				icon: <Icon icon={ removeCart } />,
+			},
+		],
+	},
+	width: {
+		type: 'string',
+		default: '480px',
+	},
+};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
@@ -8,11 +8,19 @@
 import './inner-blocks/register-components';
 
 type MiniCartContentsBlockProps = {
+	attributes: Record< string, unknown >;
 	children: JSX.Element | JSX.Element[];
 };
 
-export const MiniCartContentsBlock = ( {
-	children,
-}: MiniCartContentsBlockProps ): JSX.Element => {
+export const MiniCartContentsBlock = (
+	props: MiniCartContentsBlockProps
+): JSX.Element => {
+	const {
+		children,
+		attributes: { width },
+	} = props;
+
+	document.documentElement.style.setProperty( '--drawer-width', width );
+
 	return <>{ children }</>;
 };
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
@@ -2,18 +2,29 @@
 /**
  * External dependencies
  */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	InnerBlocks,
+	InspectorControls,
+} from '@wordpress/block-editor';
 import { EditorProvider } from '@woocommerce/base-context';
 import type { TemplateArray } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
 import type { ReactElement } from 'react';
+import { __ } from '@wordpress/i18n';
+import {
+	PanelBody,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useForcedLayout } from '../../cart-checkout-shared';
 import { MiniCartInnerBlocksStyle } from './inner-blocks-style';
 import './editor.scss';
+import { attributes as defaultAttributes } from './attributes';
 
 // Array of allowed block names.
 const ALLOWED_BLOCKS = [
@@ -23,9 +34,17 @@ const ALLOWED_BLOCKS = [
 
 interface Props {
 	clientId: string;
+	attributes: Record< string, unknown >;
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
 }
 
-const Edit = ( { clientId, attributes }: Props ): ReactElement => {
+const Edit = ( {
+	clientId,
+	attributes,
+	setAttributes,
+}: Props ): ReactElement => {
+	const { currentView, width } = attributes;
+
 	const blockProps = useBlockProps( {
 		/**
 		 * This is a workaround for the Site Editor to calculate the
@@ -35,6 +54,7 @@ const Edit = ( { clientId, attributes }: Props ): ReactElement => {
 		 */
 		style: {
 			minHeight: '100vh',
+			maxWidth: width,
 		},
 	} );
 
@@ -43,8 +63,6 @@ const Edit = ( { clientId, attributes }: Props ): ReactElement => {
 		[ 'woocommerce/empty-mini-cart-contents-block', {}, [] ],
 	] as TemplateArray;
 
-	const { currentView } = attributes;
-
 	useForcedLayout( {
 		clientId,
 		registeredBlocks: ALLOWED_BLOCKS,
@@ -106,6 +124,26 @@ const Edit = ( { clientId, attributes }: Props ): ReactElement => {
 
 	return (
 		<div { ...blockProps }>
+			<InspectorControls key="inspector">
+				<PanelBody
+					title={ __( 'Dimensions', 'woo-gutenberg-products-block' ) }
+					initialOpen
+				>
+					<UnitControl
+						onChange={ ( value ) => {
+							setAttributes( { width: value } );
+						} }
+						value={ width }
+						units={ [
+							{
+								value: 'px',
+								label: 'px',
+								default: defaultAttributes.width.default,
+							},
+						] }
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<EditorProvider currentView={ currentView }>
 				<InnerBlocks
 					allowedBlocks={ ALLOWED_BLOCKS }

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss b/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
@@ -1,5 +1,4 @@
 .editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
-	max-width: 480px;
 	/* We need to override the margin top here to simulate the layout of
 	the mini cart contents on the front end. */
 	margin: 0 auto !important;

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { cart, filledCart, removeCart } from '@woocommerce/icons';
+import { cart } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import { registerBlockType } from '@wordpress/blocks';
 import type { BlockConfiguration } from '@wordpress/blocks';
@@ -12,7 +12,7 @@ import { isFeaturePluginBuild } from '@woocommerce/block-settings';
  * Internal dependencies
  */
 import edit, { Save as save } from './edit';
-import { blockName } from './attributes';
+import { blockName, attributes } from './attributes';
 import './inner-blocks';
 
 const settings: BlockConfiguration = {
@@ -49,45 +49,7 @@ const settings: BlockConfiguration = {
 			},
 		} ),
 	},
-	attributes: {
-		isPreview: {
-			type: 'boolean',
-			default: false,
-		},
-		lock: {
-			type: 'object',
-			default: {
-				remove: true,
-				move: true,
-			},
-		},
-		currentView: {
-			type: 'string',
-			default: 'woocommerce/filled-mini-cart-contents-block',
-			source: 'readonly', // custom source to prevent saving to post content
-		},
-		editorViews: {
-			type: 'object',
-			default: [
-				{
-					view: 'woocommerce/filled-mini-cart-contents-block',
-					label: __(
-						'Filled Mini Cart',
-						'woo-gutenberg-products-block'
-					),
-					icon: <Icon icon={ filledCart } />,
-				},
-				{
-					view: 'woocommerce/empty-mini-cart-contents-block',
-					label: __(
-						'Empty Mini Cart',
-						'woo-gutenberg-products-block'
-					),
-					icon: <Icon icon={ removeCart } />,
-				},
-			],
-		},
-	},
+	attributes,
 	example: {
 		attributes: {
 			isPreview: true,