From 52f1fcfdae4408150242cb620ece1ed1ed5056a7 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 14 Dec 2021 20:27:06 +0700 Subject: [PATCH 01/25] initial render inner blocks on the front end --- .../filled-mini-cart-contents-block/edit.tsx | 13 +-- .../frontend.tsx | 87 ++----------------- .../mini-cart-contents/inner-blocks/index.tsx | 1 + .../mini-cart-title-block/block.json | 26 ++++++ .../mini-cart-title-block/block.tsx | 9 ++ .../mini-cart-title-block/edit.tsx | 19 ++++ .../mini-cart-title-block/index.tsx | 23 +++++ .../inner-blocks/register-components.ts | 10 +++ packages/checkout/blocks-registry/types.ts | 2 +- 9 files changed, 99 insertions(+), 91 deletions(-) create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/index.tsx diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx index 97bff6082c8..73872fc9352 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx @@ -1,7 +1,6 @@ /** * 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'; @@ -18,16 +17,7 @@ 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', {} ], ].filter( Boolean ) as unknown ) as TemplateArray; useForcedLayout( { @@ -44,6 +34,7 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { } > diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx index d3783b66d4f..6b01917820c 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx +++ b/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[]; -}; - -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 ); +} ): JSX.Element | null => { + const { cartItems } = useStoreCart(); - if ( cartIsLoading || cartItems.length === 0 ) { + if ( cartItems.length === 0 ) { return null; } - return ( - <> -
- -
-
- -
- - -
- - - -
- - ); + return <>{ children }; }; export default FilledMiniCartContentsBlock; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx index 4314d5361ae..45f500992cc 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx @@ -3,3 +3,4 @@ */ import './empty-mini-cart-contents-block'; import './filled-mini-cart-contents-block'; +import './mini-cart-title-block'; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json new file mode 100644 index 00000000000..3240a3030e8 --- /dev/null +++ b/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 Contents Title", + "description": "Block that display the title of the mini cart content.", + "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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx new file mode 100644 index 00000000000..64845759e3c --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx @@ -0,0 +1,9 @@ +/** + * External dependencies + */ + +const Block = (): JSX.Element => { + return

Mini cart title

; +}; + +export default Block; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx b/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/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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/index.tsx b/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/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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts index d0b5c6a2d82..2b927a15a07 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts @@ -9,6 +9,7 @@ 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 miniCartContentsTitleMetadata from './mini-cart-title-block/block.json'; // Modify webpack publicPath at runtime based on location of WordPress Plugin. // eslint-disable-next-line no-undef,camelcase @@ -31,3 +32,12 @@ registerCheckoutBlock( { ) ), } ); + +registerCheckoutBlock( { + metadata: miniCartContentsTitleMetadata, + component: lazy( () => + import( + /* webpackChunkName: "mini-cart-contents-block/title" */ './mini-cart-title-block/block' + ) + ), +} ); diff --git a/packages/checkout/blocks-registry/types.ts b/packages/checkout/blocks-registry/types.ts index f9705e1177c..b172f032ea4 100644 --- a/packages/checkout/blocks-registry/types.ts +++ b/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 > { From 7237a4854cfff8529b403ceabe7d463d0c2b897e Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 14 Dec 2021 20:40:34 +0700 Subject: [PATCH 02/25] add products table block --- .../filled-mini-cart-contents-block/edit.tsx | 1 + .../mini-cart-contents/inner-blocks/index.tsx | 1 + .../mini-cart-products-table-block/block.json | 26 +++++++++++++++++++ .../mini-cart-products-table-block/block.tsx | 13 ++++++++++ .../mini-cart-products-table-block/edit.tsx | 19 ++++++++++++++ .../mini-cart-products-table-block/index.tsx | 23 ++++++++++++++++ .../mini-cart-title-block/block.json | 2 +- .../inner-blocks/register-components.ts | 14 ++++++++-- 8 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx index 73872fc9352..99d7b743596 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx @@ -18,6 +18,7 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { const defaultTemplate = ( [ [ 'woocommerce/mini-cart-title-block', {} ], + [ 'woocommerce/mini-cart-products-table-block', {} ], ].filter( Boolean ) as unknown ) as TemplateArray; useForcedLayout( { diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx index 45f500992cc..57be88369ae 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx @@ -4,3 +4,4 @@ import './empty-mini-cart-contents-block'; import './filled-mini-cart-contents-block'; import './mini-cart-title-block'; +import './mini-cart-products-table-block'; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json new file mode 100644 index 00000000000..1e9f1956440 --- /dev/null +++ b/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 Contents Title", + "description": "Block that display 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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx new file mode 100644 index 00000000000..18ddea2847a --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx @@ -0,0 +1,13 @@ +/** + * External dependencies + */ + +const Block = (): JSX.Element => { + return ( +

+ Mini cart products table +

+ ); +}; + +export default Block; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx new file mode 100644 index 00000000000..a71c28f651a --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx new file mode 100644 index 00000000000..10c30ecce84 --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json index 3240a3030e8..0edf18be2ad 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json @@ -2,7 +2,7 @@ "name": "woocommerce/mini-cart-title-block", "version": "1.0.0", "title": "Mini Cart Contents Title", - "description": "Block that display the title of the mini cart content.", + "description": "Block that display the title of the Mini Cart block.", "category": "woocommerce", "supports": { "align": false, diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts index 2b927a15a07..16bea0633ea 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts @@ -9,7 +9,8 @@ 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 miniCartContentsTitleMetadata from './mini-cart-title-block/block.json'; +import miniCartTitleMetadata from './mini-cart-title-block/block.json'; +import miniCartProductsTableMetadata from './mini-cart-products-table-block/block.json'; // Modify webpack publicPath at runtime based on location of WordPress Plugin. // eslint-disable-next-line no-undef,camelcase @@ -34,10 +35,19 @@ registerCheckoutBlock( { } ); registerCheckoutBlock( { - metadata: miniCartContentsTitleMetadata, + 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' + ) + ), +} ); From 0c98aed9bb0ecf1e2827be67c57d52a5493efa85 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 14 Dec 2021 20:45:50 +0700 Subject: [PATCH 03/25] add mini cart footer --- .../filled-mini-cart-contents-block/edit.tsx | 1 + .../mini-cart-contents/inner-blocks/index.tsx | 1 + .../mini-cart-footer-block/block.json | 26 +++++++++++++++++++ .../mini-cart-footer-block/block.tsx | 9 +++++++ .../mini-cart-footer-block/edit.tsx | 19 ++++++++++++++ .../mini-cart-footer-block/index.tsx | 23 ++++++++++++++++ .../inner-blocks/register-components.ts | 10 +++++++ 7 files changed, 89 insertions(+) create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx index 99d7b743596..5c88263fd4b 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx @@ -19,6 +19,7 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { const defaultTemplate = ( [ [ 'woocommerce/mini-cart-title-block', {} ], [ 'woocommerce/mini-cart-products-table-block', {} ], + [ 'woocommerce/mini-cart-footer-block', {} ], ].filter( Boolean ) as unknown ) as TemplateArray; useForcedLayout( { diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx index 57be88369ae..4cbeef3685f 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx @@ -5,3 +5,4 @@ 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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json new file mode 100644 index 00000000000..cd5d1f4e8be --- /dev/null +++ b/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 Contents Title", + "description": "Block that display 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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx new file mode 100644 index 00000000000..8c5cbd031ce --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx @@ -0,0 +1,9 @@ +/** + * External dependencies + */ + +const Block = (): JSX.Element => { + return

Mini cart footer

; +}; + +export default Block; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx new file mode 100644 index 00000000000..a71c28f651a --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx new file mode 100644 index 00000000000..10c30ecce84 --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-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/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts index 16bea0633ea..dc263093954 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts @@ -11,6 +11,7 @@ import emptyMiniCartContentsMetadata from './empty-mini-cart-contents-block/bloc 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 @@ -51,3 +52,12 @@ registerCheckoutBlock( { ) ), } ); + +registerCheckoutBlock( { + metadata: miniCartFooterMetadata, + component: lazy( () => + import( + /* webpackChunkName: "mini-cart-contents-block/footer" */ './mini-cart-footer-block/block' + ) + ), +} ); From ec3153d8b5c4ad12208910c60e9d05e60244a9a0 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Tue, 14 Dec 2021 20:58:32 +0700 Subject: [PATCH 04/25] update icons and title --- .../inner-blocks/mini-cart-footer-block/block.json | 2 +- .../inner-blocks/mini-cart-footer-block/index.tsx | 4 ++-- .../inner-blocks/mini-cart-products-table-block/block.json | 2 +- .../inner-blocks/mini-cart-products-table-block/index.tsx | 4 ++-- .../inner-blocks/mini-cart-title-block/block.json | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json index cd5d1f4e8be..b7d1bab77e3 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/mini-cart-footer-block", "version": "1.0.0", - "title": "Mini Cart Contents Title", + "title": "Mini Cart Footer", "description": "Block that display the footer of the Mini Cart block.", "category": "woocommerce", "supports": { diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx index 10c30ecce84..44b3d0cbd9c 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Icon, bookmark } from '@woocommerce/icons'; +import { Icon, card } from '@woocommerce/icons'; import { registerFeaturePluginBlockType } from '@woocommerce/block-settings'; /** @@ -14,7 +14,7 @@ registerFeaturePluginBlockType( metadata, { icon: { src: ( ), diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json index 1e9f1956440..c3dbd34f6bf 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/mini-cart-products-table-block", "version": "1.0.0", - "title": "Mini Cart Contents Title", + "title": "Mini Cart Products Table", "description": "Block that display the products table of the Mini Cart block.", "category": "woocommerce", "supports": { diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx index 10c30ecce84..3647dc5181c 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Icon, bookmark } from '@woocommerce/icons'; +import { Icon, list } from '@woocommerce/icons'; import { registerFeaturePluginBlockType } from '@woocommerce/block-settings'; /** @@ -14,7 +14,7 @@ registerFeaturePluginBlockType( metadata, { icon: { src: ( ), diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json index 0edf18be2ad..9bdec052a45 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/mini-cart-title-block", "version": "1.0.0", - "title": "Mini Cart Contents Title", + "title": "Mini Cart Title", "description": "Block that display the title of the Mini Cart block.", "category": "woocommerce", "supports": { From 67fc9c804d884a29ffb4230743509406508feac3 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 00:20:21 +0700 Subject: [PATCH 05/25] update title block --- .../filled-mini-cart-contents-block/edit.tsx | 18 ++++++++----- .../mini-cart-title-block/block.tsx | 20 +++++++++++++- templates/block-template-parts/mini-cart.html | 26 ++++++++++++------- 3 files changed, 47 insertions(+), 17 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx index 5c88263fd4b..69a1de2f6d0 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx @@ -4,7 +4,8 @@ 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 @@ -35,11 +36,16 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { currentView !== 'woocommerce/filled-mini-cart-contents-block' } > - + + + ); }; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx index 64845759e3c..23337dc1ef0 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx @@ -1,9 +1,27 @@ /** * External dependencies */ +import { sprintf, _n, __ } from '@wordpress/i18n'; +import { useStoreCart } from '@woocommerce/base-context/hooks'; const Block = (): JSX.Element => { - return

Mini cart title

; + 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/templates/block-template-parts/mini-cart.html b/templates/block-template-parts/mini-cart.html index 6cdfb88b539..0581e824b45 100644 --- a/templates/block-template-parts/mini-cart.html +++ b/templates/block-template-parts/mini-cart.html @@ -1,13 +1,19 @@ -
-
-

Filled mini cart content

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

Empty mini cart content

-
-
+ +
+ +

Empty mini cart content

+ +
+ +
From a23f1d637a5150e30e09d9c9fb431a7029a2b3d8 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 00:25:08 +0700 Subject: [PATCH 06/25] update products table block content --- .../mini-cart-products-table-block/block.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx index 18ddea2847a..0e44961a2cc 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx @@ -1,12 +1,22 @@ /** * 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 ( -

- Mini cart products table -

+
+ +
); }; From e2a2d08320ba7912c1913f90e95914038aa4e83d Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 00:32:36 +0700 Subject: [PATCH 07/25] update footer block content --- .../mini-cart-footer-block/block.tsx | 59 ++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx index 8c5cbd031ce..5637b262c01 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx @@ -1,9 +1,66 @@ /** * 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 => { - return

Mini cart footer

; + 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 ( +
+ +
+ + +
+ + + +
+ ); }; export default Block; From eea5b22fbab5675f13bb0253edfcdb1eb7019b8c Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 00:40:16 +0700 Subject: [PATCH 08/25] remove mini cart drawer title --- .../js/blocks/cart-checkout/mini-cart/block.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx index 7c5541b9685..8c19b890da2 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx +++ b/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,20 +183,7 @@ 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 ); From 82c65f046707e0c9f6a4cf789c44f83956762a08 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 10:02:15 +0700 Subject: [PATCH 09/25] use Noninteractive for Mini Cart products table and footer --- .../inner-blocks/mini-cart-footer-block/edit.tsx | 5 ++++- .../inner-blocks/mini-cart-products-table-block/edit.tsx | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx index a71c28f651a..fec6dbc680e 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx @@ -2,6 +2,7 @@ * External dependencies */ import { useBlockProps } from '@wordpress/block-editor'; +import Noninteractive from '@woocommerce/base-components/noninteractive'; /** * Internal dependencies @@ -13,7 +14,9 @@ export const Edit = (): JSX.Element => { return (
- + + +
); }; diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx index a71c28f651a..fec6dbc680e 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/edit.tsx @@ -2,6 +2,7 @@ * External dependencies */ import { useBlockProps } from '@wordpress/block-editor'; +import Noninteractive from '@woocommerce/base-components/noninteractive'; /** * Internal dependencies @@ -13,7 +14,9 @@ export const Edit = (): JSX.Element => { return (
- + + +
); }; From 952f0a8d4157a754cccea2c205c9c8cb57d4781c Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 12:30:20 +0700 Subject: [PATCH 10/25] update the initial markup --- assets/js/blocks/cart-checkout/mini-cart/block.tsx | 6 +++++- src/BlockTypes/MiniCart.php | 4 +--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx index 8c19b890da2..484d17de467 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart/block.tsx @@ -190,7 +190,11 @@ const MiniCartBlock = ( { } } slideIn={ ! skipSlideIn } > -
+
+ { /* @todo The `div` wrapper of RawHTML isn't removed on the front end. */ } { contents }
diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php index 9436c1eb7b8..f0decd8685d 100644 --- a/src/BlockTypes/MiniCart.php +++ b/src/BlockTypes/MiniCart.php @@ -397,9 +397,7 @@ protected function get_markup( $attributes ) {
-
-

' . wp_kses_post( $title ) . '

-
+
' . wp_kses_post( $template_part_contents ) . From 3894b2edad63225dbc15bd5d9ce6f7b762be5979 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 12:57:10 +0700 Subject: [PATCH 11/25] front end style --- .../mini-cart-title-block/block.tsx | 9 ++++++++- .../blocks/cart-checkout/mini-cart/style.scss | 18 +++++++++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx index 23337dc1ef0..3cf1c29ed06 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx @@ -4,10 +4,17 @@ import { sprintf, _n, __ } from '@wordpress/i18n'; import { useStoreCart } from '@woocommerce/base-context/hooks'; +/** + * Internal dependencies + */ + const Block = (): JSX.Element => { const { cartItemsCount, cartIsLoading } = useStoreCart(); + /** + * @todo Allow the user to edit the title of the mini cart. + */ return ( -

+

{ cartIsLoading ? __( 'Your cart', 'woo-gutenberg-products-block' ) : sprintf( diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss index 2b9841666b0..4d26b592886 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/style.scss +++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss @@ -61,7 +61,7 @@ } .components-modal__header { - margin: $gap 0; + margin: $gap 0 0; } .wc-block-mini-cart__items { @@ -76,6 +76,22 @@ } } +.wc-block-mini-cart__template-part { + flex-grow: 1; +} + +// @todo Review the class naming convention for Mini Cart inner blocks. +.wp-block-woocommerce-mini-cart-contents { + display: flex; + flex-direction: column; + height: 100%; +} + +.wc-block-mini-cart__title { + font-size: xx-large; + margin-top: 0; +} + .wc-block-mini-cart__footer { border-top: 1px solid $gray-300; margin-bottom: -$gap-largest; From c80de056910833fd2ddcc8e80f4de893991ba9a5 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 16:23:14 +0700 Subject: [PATCH 12/25] fix front end scrolling issue with many items in cart --- .../blocks/cart-checkout/mini-cart/style.scss | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss index 4d26b592886..253e80724a2 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/style.scss +++ b/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 0; + position: absolute; + top: $gap-largest; + right: $gap; } .wc-block-mini-cart__items { @@ -76,15 +76,14 @@ } } -.wc-block-mini-cart__template-part { - flex-grow: 1; -} - // @todo Review the class naming convention for Mini Cart inner blocks. .wp-block-woocommerce-mini-cart-contents { + box-sizing: border-box; display: flex; flex-direction: column; height: 100%; + height: 100vh; + padding: $gap-largest $gap; } .wc-block-mini-cart__title { From d943b022bf876e088da0dea299e56f483c5c025d Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 16:43:29 +0700 Subject: [PATCH 13/25] editor style --- .../cart-checkout/mini-cart-contents/edit.tsx | 1 + .../mini-cart-contents/editor.scss | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx index 9407ba63e20..e3bd8d729e6 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx +++ b/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/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss new file mode 100644 index 00000000000..badc08eca40 --- /dev/null +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss @@ -0,0 +1,18 @@ +.wp-block-woocommerce-mini-cart-contents { + max-width: 512px; + margin: 0 auto; +} + +.wp-block-woocommerce-filled-mini-cart-contents-block { + .block-editor-block-list__layout { + display: flex; + flex-direction: column; + height: calc(100vh - 2 * $gap-largest); + } +} + +.wp-block-woocommerce-mini-cart-products-table-block { + flex-grow: 1; + flex-shrink: 1; + margin-bottom: auto; +} From c5e7a99fc827600477175f45ac2c10cbb987b7ce Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 16:54:08 +0700 Subject: [PATCH 14/25] add background support --- .../cart-checkout/mini-cart-contents/index.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx index c9af0a233c7..99cbd9b2c79 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx +++ b/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: { @@ -50,6 +53,17 @@ const settings = { move: true, }, }, + backgroundColor: { + type: 'string', + }, + style: { + type: 'object', + default: { + color: { + background: '#ffffff', + }, + }, + }, }, example: { attributes: { From c4eb0deebfb2f44f20d771ff8396e8287d5eda0e Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 16:55:05 +0700 Subject: [PATCH 15/25] update template part file --- templates/block-template-parts/mini-cart.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/block-template-parts/mini-cart.html b/templates/block-template-parts/mini-cart.html index 0581e824b45..cfbe08b426a 100644 --- a/templates/block-template-parts/mini-cart.html +++ b/templates/block-template-parts/mini-cart.html @@ -1,5 +1,5 @@ -
+
From 012c82300670f5bc46dcb7084f0a61a86e8b24f1 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 16:59:50 +0700 Subject: [PATCH 16/25] fix the mini cart contents height in the editor --- assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss index badc08eca40..46073e7bfad 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss @@ -7,7 +7,7 @@ .block-editor-block-list__layout { display: flex; flex-direction: column; - height: calc(100vh - 2 * $gap-largest); + min-height: calc(100vh - 2 * $gap-largest); } } From ce31fb0e1d3d99440fcd61dd118b099f59090d3f Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 17:22:19 +0700 Subject: [PATCH 17/25] fix: block validation --- .../blocks/cart-checkout/mini-cart-contents/index.tsx | 11 ----------- assets/js/blocks/cart-checkout/mini-cart/style.scss | 1 + templates/block-template-parts/mini-cart.html | 2 +- 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx index 99cbd9b2c79..c1d7171645a 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx @@ -53,17 +53,6 @@ const settings = { move: true, }, }, - backgroundColor: { - type: 'string', - }, - style: { - type: 'object', - default: { - color: { - background: '#ffffff', - }, - }, - }, }, example: { attributes: { diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss index 253e80724a2..20a40ced392 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/style.scss +++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss @@ -78,6 +78,7 @@ // @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; diff --git a/templates/block-template-parts/mini-cart.html b/templates/block-template-parts/mini-cart.html index cfbe08b426a..0581e824b45 100644 --- a/templates/block-template-parts/mini-cart.html +++ b/templates/block-template-parts/mini-cart.html @@ -1,5 +1,5 @@ -
+
From cf4504cec5b70591fe7193402280205929ac618b Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 15 Dec 2021 18:45:30 +0700 Subject: [PATCH 18/25] update unit test --- assets/js/blocks/cart-checkout/mini-cart/test/block.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/test/block.js b/assets/js/blocks/cart-checkout/mini-cart/test/block.js index 13356d82d7b..b9e591417db 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/test/block.js +++ b/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 ); } ); From a80e16b949ccf4f02dbd575d137058dfa799ffc0 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 16 Dec 2021 22:27:35 +0700 Subject: [PATCH 19/25] only render cart/checkout button when corresponding pages exist --- .../mini-cart-footer-block/block.tsx | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx index 5637b262c01..7f7d476a184 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx @@ -43,18 +43,25 @@ const Block = (): JSX.Element => { ) } />
- - + { CART_URL && ( + + ) } + { CHECKOUT_URL && ( + + ) }
From c98294580e08a1d0f18580150d7f56e0fb1ea68c Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 16 Dec 2021 22:28:46 +0700 Subject: [PATCH 20/25] remove left over height rule --- assets/js/blocks/cart-checkout/mini-cart/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss index 20a40ced392..22889dea76a 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/style.scss +++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss @@ -82,7 +82,6 @@ box-sizing: border-box; display: flex; flex-direction: column; - height: 100%; height: 100vh; padding: $gap-largest $gap; } From f2b50657a08ec3657435de35743a40a4aee190f9 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 16 Dec 2021 22:37:12 +0700 Subject: [PATCH 21/25] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Albert Juhé Lluveras --- .../inner-blocks/mini-cart-footer-block/block.json | 2 +- .../mini-cart-products-table-block/block.json | 2 +- .../mini-cart-products-table-block/index.tsx | 14 ++++++-------- .../inner-blocks/mini-cart-title-block/block.json | 2 +- 4 files changed, 9 insertions(+), 11 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json index b7d1bab77e3..a5ce251f1fd 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json @@ -2,7 +2,7 @@ "name": "woocommerce/mini-cart-footer-block", "version": "1.0.0", "title": "Mini Cart Footer", - "description": "Block that display the footer of the Mini Cart block.", + "description": "Block that displays the footer of the Mini Cart block.", "category": "woocommerce", "supports": { "align": false, diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json index c3dbd34f6bf..86899a0bd37 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json @@ -2,7 +2,7 @@ "name": "woocommerce/mini-cart-products-table-block", "version": "1.0.0", "title": "Mini Cart Products Table", - "description": "Block that display the products table of the Mini Cart block.", + "description": "Block that displays the products table of the Mini Cart block.", "category": "woocommerce", "supports": { "align": false, diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx index 3647dc5181c..d5002ef3b0d 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx @@ -11,13 +11,11 @@ import { Edit } from './edit'; import metadata from './block.json'; registerFeaturePluginBlockType( metadata, { - icon: { - src: ( - - ), - }, + icon: ( + + ) edit: Edit, } ); diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json index 9bdec052a45..27fcc83b966 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.json @@ -2,7 +2,7 @@ "name": "woocommerce/mini-cart-title-block", "version": "1.0.0", "title": "Mini Cart Title", - "description": "Block that display the title of the Mini Cart block.", + "description": "Block that displays the title of the Mini Cart block.", "category": "woocommerce", "supports": { "align": false, From ed2d86105be76ceced23ef22ea49af0eca31792f Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 16 Dec 2021 22:41:10 +0700 Subject: [PATCH 22/25] ah, comma --- .../inner-blocks/mini-cart-products-table-block/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx index d5002ef3b0d..db819ee6a85 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/index.tsx @@ -16,6 +16,6 @@ registerFeaturePluginBlockType( metadata, { srcElement={ list } className="wc-block-editor-components-block-icon" /> - ) + ), edit: Edit, } ); From 8bbaf3853ab4b4c9522c8bfa10a9cbaf1e3230b6 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 17 Dec 2021 11:38:52 +0700 Subject: [PATCH 23/25] addess style suggestions --- assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss | 4 +--- assets/js/blocks/cart-checkout/mini-cart/style.scss | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss index 46073e7bfad..dd1196aedb0 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss @@ -1,5 +1,5 @@ .wp-block-woocommerce-mini-cart-contents { - max-width: 512px; + max-width: 480px; margin: 0 auto; } @@ -12,7 +12,5 @@ } .wp-block-woocommerce-mini-cart-products-table-block { - flex-grow: 1; - flex-shrink: 1; margin-bottom: auto; } diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss index 22889dea76a..92e4991409a 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/style.scss +++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss @@ -87,7 +87,7 @@ } .wc-block-mini-cart__title { - font-size: xx-large; + @include font-size(large); margin-top: 0; } From 45a6c00f6b411dba729275476c6c13b67eb794ca Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 17 Dec 2021 19:35:12 +0700 Subject: [PATCH 24/25] Update assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Albert Juhé Lluveras --- .../inner-blocks/mini-cart-footer-block/block.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx index 7f7d476a184..14b9e5c49f4 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx @@ -54,7 +54,7 @@ const Block = (): JSX.Element => { { CHECKOUT_URL && (