diff --git a/assets/js/base/components/drawer/style.scss b/assets/js/base/components/drawer/style.scss index aba6e3449a0..9c18fede70e 100644 --- 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 index f007347fcfd..a3fa2cee748 100644 --- 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 deleted file mode 100644 index c599b827f36..00000000000 --- a/assets/js/blocks/mini-cart/mini-cart-contents/attributes.ts +++ /dev/null @@ -1 +0,0 @@ -export const blockName = 'woocommerce/mini-cart-contents'; diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx new file mode 100644 index 00000000000..81b0400e2ef --- /dev/null +++ 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: , + }, + { + view: 'woocommerce/empty-mini-cart-contents-block', + label: __( 'Empty Mini Cart', 'woo-gutenberg-products-block' ), + icon: , + }, + ], + }, + 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 index 658c98c8968..3deb69ae2ff 100644 --- 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 index 8de609bb70d..3f9fbdd3f3d 100644 --- a/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx +++ b/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx @@ -2,11 +2,21 @@ /** * 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 @@ -14,6 +24,7 @@ import type { ReactElement } from 'react'; 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 (
+ + + { + setAttributes( { width: value } ); + } } + value={ width } + units={ [ + { + value: 'px', + label: 'px', + default: defaultAttributes.width.default, + }, + ] } + /> + + , - }, - { - view: 'woocommerce/empty-mini-cart-contents-block', - label: __( - 'Empty Mini Cart', - 'woo-gutenberg-products-block' - ), - icon: , - }, - ], - }, - }, + attributes, example: { attributes: { isPreview: true,