From 50066455c090c78fa6541560c1411065d67af503 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 20 Dec 2021 14:57:55 +0700 Subject: [PATCH] Fix: Mini Cart block: divide contents into three inner blocks (https://github.com/woocommerce/woocommerce-blocks/pull/5386) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Albert Juhé Lluveras --- .../cart-checkout/mini-cart-contents/edit.tsx | 1 + .../mini-cart-contents/editor.scss | 16 ++++ .../mini-cart-contents/index.tsx | 3 + .../filled-mini-cart-contents-block/edit.tsx | 31 ++++--- .../frontend.tsx | 87 ++----------------- .../mini-cart-contents/inner-blocks/index.tsx | 3 + .../mini-cart-footer-block/block.json | 26 ++++++ .../mini-cart-footer-block/block.tsx | 73 ++++++++++++++++ .../mini-cart-footer-block/edit.tsx | 22 +++++ .../mini-cart-footer-block/index.tsx | 23 +++++ .../mini-cart-products-table-block/block.json | 26 ++++++ .../mini-cart-products-table-block/block.tsx | 23 +++++ .../mini-cart-products-table-block/edit.tsx | 22 +++++ .../mini-cart-products-table-block/index.tsx | 21 +++++ .../mini-cart-title-block/block.json | 26 ++++++ .../mini-cart-title-block/block.tsx | 31 +++++++ .../mini-cart-title-block/edit.tsx | 19 ++++ .../mini-cart-title-block/index.tsx | 23 +++++ .../inner-blocks/register-components.ts | 30 +++++++ .../blocks/cart-checkout/mini-cart/block.tsx | 23 ++--- .../blocks/cart-checkout/mini-cart/style.scss | 25 ++++-- .../cart-checkout/mini-cart/test/block.js | 2 - .../checkout/blocks-registry/types.ts | 2 +- .../src/BlockTypes/MiniCart.php | 4 +- .../block-template-parts/mini-cart.html | 26 +++--- 25 files changed, 456 insertions(+), 132 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/index.tsx diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx index 9407ba63e20..e3bd8d729e6 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx @@ -16,6 +16,7 @@ import type { TemplateArray } from '@wordpress/blocks'; * Internal dependencies */ import { useViewSwitcher, useForcedLayout } from '../shared'; +import './editor.scss'; // Array of allowed block names. const ALLOWED_BLOCKS = [ diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss new file mode 100644 index 00000000000..dd1196aedb0 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss @@ -0,0 +1,16 @@ +.wp-block-woocommerce-mini-cart-contents { + max-width: 480px; + margin: 0 auto; +} + +.wp-block-woocommerce-filled-mini-cart-contents-block { + .block-editor-block-list__layout { + display: flex; + flex-direction: column; + min-height: calc(100vh - 2 * $gap-largest); + } +} + +.wp-block-woocommerce-mini-cart-products-table-block { + margin-bottom: auto; +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx index c9af0a233c7..c1d7171645a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx @@ -36,6 +36,9 @@ const settings = { reusable: false, inserter: false, __experimentalExposeControlsToChildren: true, + color: { + text: false, + }, }, attributes: { isPreview: { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx index 97bff6082c8..69a1de2f6d0 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx @@ -1,11 +1,11 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; import { innerBlockAreas } from '@woocommerce/blocks-checkout'; import type { TemplateArray } from '@wordpress/blocks'; -import { useEditorContext } from '@woocommerce/base-context'; +import { EditorProvider, useEditorContext } from '@woocommerce/base-context'; +import { previewCart } from '@woocommerce/resource-previews'; /** * Internal dependencies @@ -18,16 +18,9 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { const { currentView } = useEditorContext(); const defaultTemplate = ( [ - [ - 'core/heading', - { - content: __( - 'Filled mini cart content', - 'woo-gutenberg-products-block' - ), - level: 2, - }, - ], + [ 'woocommerce/mini-cart-title-block', {} ], + [ 'woocommerce/mini-cart-products-table-block', {} ], + [ 'woocommerce/mini-cart-footer-block', {} ], ].filter( Boolean ) as unknown ) as TemplateArray; useForcedLayout( { @@ -43,10 +36,16 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { currentView !== 'woocommerce/filled-mini-cart-contents-block' } > - + + + ); }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx index d3783b66d4f..6b01917820c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx @@ -1,91 +1,20 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; -import { - usePaymentMethods, - useStoreCart, -} from '@woocommerce/base-context/hooks'; -import { TotalsItem } from '@woocommerce/blocks-checkout'; -import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings'; -import Button from '@woocommerce/base-components/button'; -import { PaymentMethodDataProvider } from '@woocommerce/base-context'; -import { getIconsFromPaymentMethods } from '@woocommerce/base-utils'; -import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons'; -import { getCurrencyFromPriceResponse } from '@woocommerce/price-format'; -import { getSetting } from '@woocommerce/settings'; +import { useStoreCart } from '@woocommerce/base-context/hooks'; -/** - * Internal dependencies - */ -import CartLineItemsTable from '../../../cart/cart-line-items-table'; - -const PaymentMethodIconsElement = (): JSX.Element => { - const { paymentMethods } = usePaymentMethods(); - return ( - - ); -}; - -type FilledMiniCartContentsBlockProps = { +const FilledMiniCartContentsBlock = ( { + children, +}: { children: JSX.Element | JSX.Element[]; -}; +} ): JSX.Element | null => { + const { cartItems } = useStoreCart(); -const FilledMiniCartContentsBlock = ( {}: FilledMiniCartContentsBlockProps ): JSX.Element | null => { - const { cartItems, cartIsLoading, cartTotals } = useStoreCart(); - const subTotal = getSetting( 'displayCartPricesIncludingTax', false ) - ? parseInt( cartTotals.total_items, 10 ) + - parseInt( cartTotals.total_items_tax, 10 ) - : parseInt( cartTotals.total_items, 10 ); - - if ( cartIsLoading || cartItems.length === 0 ) { + if ( cartItems.length === 0 ) { return null; } - return ( - <> -
- -
-
- -
- - -
- - - -
- - ); + return <>{ children }; }; export default FilledMiniCartContentsBlock; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx index 4314d5361ae..4cbeef3685f 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx @@ -3,3 +3,6 @@ */ import './empty-mini-cart-contents-block'; import './filled-mini-cart-contents-block'; +import './mini-cart-title-block'; +import './mini-cart-products-table-block'; +import './mini-cart-footer-block'; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json new file mode 100644 index 00000000000..a5ce251f1fd --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json @@ -0,0 +1,26 @@ +{ + "name": "woocommerce/mini-cart-footer-block", + "version": "1.0.0", + "title": "Mini Cart Footer", + "description": "Block that displays the footer of the Mini Cart block.", + "category": "woocommerce", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false + }, + "attributes": { + "lock": { + "type": "object", + "default": { + "remove": true, + "move": true + } + } + }, + "parent": [ "woocommerce/filled-mini-cart-contents-block" ], + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2 +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx new file mode 100644 index 00000000000..14b9e5c49f4 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx @@ -0,0 +1,73 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { TotalsItem } from '@woocommerce/blocks-checkout'; +import { getCurrencyFromPriceResponse } from '@woocommerce/price-format'; +import { + usePaymentMethods, + useStoreCart, +} from '@woocommerce/base-context/hooks'; +import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons'; +import { getIconsFromPaymentMethods } from '@woocommerce/base-utils'; +import { getSetting } from '@woocommerce/settings'; +import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings'; +import Button from '@woocommerce/base-components/button'; +import { PaymentMethodDataProvider } from '@woocommerce/base-context'; + +const PaymentMethodIconsElement = (): JSX.Element => { + const { paymentMethods } = usePaymentMethods(); + return ( + + ); +}; + +const Block = (): JSX.Element => { + const { cartTotals } = useStoreCart(); + const subTotal = getSetting( 'displayCartPricesIncludingTax', false ) + ? parseInt( cartTotals.total_items, 10 ) + + parseInt( cartTotals.total_items_tax, 10 ) + : parseInt( cartTotals.total_items, 10 ); + return ( +
+ +
+ { CART_URL && ( + + ) } + { CHECKOUT_URL && ( + + ) } +
+ + + +
+ ); +}; + +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx new file mode 100644 index 00000000000..fec6dbc680e --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import Noninteractive from '@woocommerce/base-components/noninteractive'; + +/** + * Internal dependencies + */ +import Block from './block'; + +export const Edit = (): JSX.Element => { + const blockProps = useBlockProps(); + + return ( +
+ + + +
+ ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx new file mode 100644 index 00000000000..44b3d0cbd9c --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { Icon, card } from '@woocommerce/icons'; +import { registerFeaturePluginBlockType } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import { Edit } from './edit'; +import metadata from './block.json'; + +registerFeaturePluginBlockType( metadata, { + icon: { + src: ( + + ), + }, + edit: Edit, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json new file mode 100644 index 00000000000..86899a0bd37 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json @@ -0,0 +1,26 @@ +{ + "name": "woocommerce/mini-cart-products-table-block", + "version": "1.0.0", + "title": "Mini Cart Products Table", + "description": "Block that displays the products table of the Mini Cart block.", + "category": "woocommerce", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false + }, + "attributes": { + "lock": { + "type": "object", + "default": { + "remove": true, + "move": true + } + } + }, + "parent": [ "woocommerce/filled-mini-cart-contents-block" ], + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2 +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx new file mode 100644 index 00000000000..0e44961a2cc --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { useStoreCart } from '@woocommerce/base-context/hooks'; + +/** + * Internal dependencies + */ +import CartLineItemsTable from '../../../cart/cart-line-items-table'; + +const Block = (): JSX.Element => { + const { cartItems, cartIsLoading } = useStoreCart(); + return ( +
+ +
+ ); +}; + +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx new file mode 100644 index 00000000000..fec6dbc680e --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import Noninteractive from '@woocommerce/base-components/noninteractive'; + +/** + * Internal dependencies + */ +import Block from './block'; + +export const Edit = (): JSX.Element => { + const blockProps = useBlockProps(); + + return ( +
+ + + +
+ ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx new file mode 100644 index 00000000000..db819ee6a85 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import { Icon, list } from '@woocommerce/icons'; +import { registerFeaturePluginBlockType } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import { Edit } from './edit'; +import metadata from './block.json'; + +registerFeaturePluginBlockType( metadata, { + icon: ( + + ), + edit: Edit, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json new file mode 100644 index 00000000000..27fcc83b966 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json @@ -0,0 +1,26 @@ +{ + "name": "woocommerce/mini-cart-title-block", + "version": "1.0.0", + "title": "Mini Cart Title", + "description": "Block that displays the title of the Mini Cart block.", + "category": "woocommerce", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false + }, + "attributes": { + "lock": { + "type": "object", + "default": { + "remove": true, + "move": true + } + } + }, + "parent": [ "woocommerce/filled-mini-cart-contents-block" ], + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2 +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx new file mode 100644 index 00000000000..dfd0b8939d1 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import { sprintf, _n, __ } from '@wordpress/i18n'; +import { useStoreCart } from '@woocommerce/base-context/hooks'; + +/** + * Internal dependencies + */ + +const Block = (): JSX.Element => { + const { cartItemsCount, cartIsLoading } = useStoreCart(); + return ( +

+ { cartIsLoading + ? __( 'Your cart', 'woo-gutenberg-products-block' ) + : sprintf( + /* translators: %d is the count of items in the cart. */ + _n( + 'Your cart (%d item)', + 'Your cart (%d items)', + cartItemsCount, + 'woo-gutenberg-products-block' + ), + cartItemsCount + ) } +

+ ); +}; + +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx new file mode 100644 index 00000000000..a71c28f651a --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import Block from './block'; + +export const Edit = (): JSX.Element => { + const blockProps = useBlockProps(); + + return ( +
+ +
+ ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/index.tsx new file mode 100644 index 00000000000..10c30ecce84 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/index.tsx @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { Icon, bookmark } from '@woocommerce/icons'; +import { registerFeaturePluginBlockType } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import { Edit } from './edit'; +import metadata from './block.json'; + +registerFeaturePluginBlockType( metadata, { + icon: { + src: ( + + ), + }, + edit: Edit, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts index d0b5c6a2d82..dc263093954 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts @@ -9,6 +9,9 @@ import { lazy } from '@wordpress/element'; */ import emptyMiniCartContentsMetadata from './empty-mini-cart-contents-block/block.json'; import filledMiniCartMetadata from './filled-mini-cart-contents-block/block.json'; +import miniCartTitleMetadata from './mini-cart-title-block/block.json'; +import miniCartProductsTableMetadata from './mini-cart-products-table-block/block.json'; +import miniCartFooterMetadata from './mini-cart-footer-block/block.json'; // Modify webpack publicPath at runtime based on location of WordPress Plugin. // eslint-disable-next-line no-undef,camelcase @@ -31,3 +34,30 @@ registerCheckoutBlock( { ) ), } ); + +registerCheckoutBlock( { + metadata: miniCartTitleMetadata, + component: lazy( () => + import( + /* webpackChunkName: "mini-cart-contents-block/title" */ './mini-cart-title-block/block' + ) + ), +} ); + +registerCheckoutBlock( { + metadata: miniCartProductsTableMetadata, + component: lazy( () => + import( + /* webpackChunkName: "mini-cart-contents-block/products-table" */ './mini-cart-products-table-block/block' + ) + ), +} ); + +registerCheckoutBlock( { + metadata: miniCartFooterMetadata, + component: lazy( () => + import( + /* webpackChunkName: "mini-cart-contents-block/footer" */ './mini-cart-footer-block/block' + ) + ), +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx index 7c5541b9685..484d17de467 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx @@ -19,7 +19,7 @@ import { useEffect, useState, } from '@wordpress/element'; -import { sprintf, _n, __ } from '@wordpress/i18n'; +import { sprintf, _n } from '@wordpress/i18n'; import classnames from 'classnames'; /** * Internal dependencies @@ -183,27 +183,18 @@ const MiniCartBlock = ( { 'is-loading': cartIsLoading, } ) } - title={ - cartIsLoading - ? __( 'Your cart', 'woo-gutenberg-products-block' ) - : sprintf( - /* translators: %d is the count of items in the cart. */ - _n( - 'Your cart (%d item)', - 'Your cart (%d items)', - cartItemsCount, - 'woo-gutenberg-products-block' - ), - cartItemsCount - ) - } + title="" isOpen={ isOpen } onClose={ () => { setIsOpen( false ); } } slideIn={ ! skipSlideIn } > -
+
+ { /* @todo The `div` wrapper of RawHTML isn't removed on the front end. */ } { contents }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss index 2b9841666b0..92e4991409a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss @@ -54,14 +54,14 @@ font-size: 1rem; .components-modal__content { - box-sizing: border-box; - display: flex; - flex-direction: column; - height: 100%; + padding: 0; + position: relative; } .components-modal__header { - margin: $gap 0; + position: absolute; + top: $gap-largest; + right: $gap; } .wc-block-mini-cart__items { @@ -76,6 +76,21 @@ } } +// @todo Review the class naming convention for Mini Cart inner blocks. +.wp-block-woocommerce-mini-cart-contents { + background: #fff; + box-sizing: border-box; + display: flex; + flex-direction: column; + height: 100vh; + padding: $gap-largest $gap; +} + +.wc-block-mini-cart__title { + @include font-size(large); + margin-top: 0; +} + .wc-block-mini-cart__footer { border-top: 1px solid $gray-300; margin-bottom: -$gap-largest; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/test/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/test/block.js index 13356d82d7b..b9e591417db 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/test/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/test/block.js @@ -71,7 +71,6 @@ describe( 'Testing Mini Cart', () => { fireEvent.click( screen.getByLabelText( /items/i ) ); } ); - expect( screen.getByText( /Your cart/i ) ).toBeInTheDocument(); expect( fetchMock ).toHaveBeenCalledTimes( 1 ); // ["`select` control in `@wordpress/data-controls` is deprecated. Please use built-in `resolveSelect` control in `@wordpress/data` instead."] expect( console ).toHaveWarned(); @@ -86,7 +85,6 @@ describe( 'Testing Mini Cart', () => { fireEvent.click( screen.getByLabelText( /items/i ) ); } ); - expect( screen.getByText( /0 items/i ) ).toBeInTheDocument(); expect( fetchMock ).toHaveBeenCalledTimes( 1 ); } ); diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts index f9705e1177c..b172f032ea4 100644 --- a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts +++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts @@ -20,7 +20,7 @@ export enum innerBlockAreas { CART_TOTALS = 'woocommerce/cart-totals-block', MINI_CART = 'woocommerce/mini-cart-contents', EMPTY_MINI_CART = 'woocommerce/empty-mini-cart-contents-block', - FILLED_MINI_CART = 'woocommerce/filled-mini-cart-content-block', + FILLED_MINI_CART = 'woocommerce/filled-mini-cart-contents-block', } interface CheckoutBlockOptionsMetadata extends Partial< BlockConfiguration > { diff --git a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php index 9436c1eb7b8..f0decd8685d 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php @@ -397,9 +397,7 @@ class MiniCart extends AbstractBlock {
-
-

' . wp_kses_post( $title ) . '

-
+
' . wp_kses_post( $template_part_contents ) . diff --git a/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html b/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html index 6cdfb88b539..0581e824b45 100644 --- a/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html +++ b/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html @@ -1,13 +1,19 @@ -
-
-

Filled mini cart content

-
- +
+ +
+ + + +
+ - -
-

Empty mini cart content

-
-
+ +
+ +

Empty mini cart content

+ +
+ +