From 709a7a9add00a159d6b0022e21c70b4d7438f6a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Fri, 14 Apr 2023 09:21:21 +0200 Subject: [PATCH] [Mini cart] Make the title customizable (https://github.com/woocommerce/woocommerce-blocks/pull/8905) * Create the counter block and the header pattern * Change the pattern to an inner block * Allow customizing item counter block * Rename block * Allow removing the items counter block * Add padding controls * Preload new blocks * Add title block back from the inserter * Move h2 tag to the parent title * Align items at the bottom * Unify styles * Add title class in the editor * Prevent removing title blocks * Disallow unlocking and inserter * Disallowing moving blocks --- .../mini-cart/mini-cart-contents/editor.scss | 6 ++- .../mini-cart-contents/inner-blocks/index.tsx | 2 + .../mini-cart-footer-block/block.tsx | 14 +----- .../mini-cart-title-block/block.tsx | 41 +++++++++------ .../mini-cart-title-block/edit.tsx | 35 +++++++++---- .../block.json | 29 +++++++++++ .../block.tsx | 50 +++++++++++++++++++ .../edit.tsx | 30 +++++++++++ .../index.tsx | 26 ++++++++++ .../attributes.tsx | 11 ++++ .../mini-cart-title-label-block/block.json | 34 +++++++++++++ .../mini-cart-title-label-block/block.tsx | 44 ++++++++++++++++ .../mini-cart-title-label-block/constants.ts | 9 ++++ .../mini-cart-title-label-block/edit.tsx | 34 +++++++++++++ .../mini-cart-title-label-block/index.tsx | 28 +++++++++++ .../inner-blocks/register-components.ts | 24 +++++++++ .../mini-cart-contents/inner-blocks/utils.ts | 17 +++++++ .../assets/js/blocks/mini-cart/style.scss | 10 +++- .../checkout/blocks-registry/types.ts | 1 + .../src/BlockTypes/MiniCart.php | 2 + .../src/BlockTypes/MiniCartContents.php | 2 + .../MiniCartTitleItemsCounterBlock.php | 14 ++++++ .../BlockTypes/MiniCartTitleLabelBlock.php | 14 ++++++ .../templates/parts/mini-cart.html | 9 ++++ 24 files changed, 444 insertions(+), 42 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/edit.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/index.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/attributes.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/constants.ts create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/edit.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/index.tsx create mode 100644 plugins/woocommerce-blocks/src/BlockTypes/MiniCartTitleItemsCounterBlock.php create mode 100644 plugins/woocommerce-blocks/src/BlockTypes/MiniCartTitleLabelBlock.php diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss index 4a4812348cc..59eaba4140c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss @@ -42,7 +42,11 @@ h2.wc-block-mini-cart__title { @include font-size(larger); - margin: $gap-largest $gap 0; + + .block-editor-block-list__layout { + display: flex; + align-items: baseline; + } } table.wc-block-cart-items { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx index bea902f0c8e..9338c46796b 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx @@ -4,6 +4,8 @@ import './empty-mini-cart-contents-block'; import './filled-mini-cart-contents-block'; import './mini-cart-title-block'; +import './mini-cart-title-items-counter-block'; +import './mini-cart-title-label-block'; import './mini-cart-items-block'; import './mini-cart-products-table-block'; import './mini-cart-footer-block'; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx index 5c1d8c36d3c..49e1564e20e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx @@ -13,13 +13,13 @@ import { getIconsFromPaymentMethods } from '@woocommerce/base-utils'; import { getSetting } from '@woocommerce/settings'; import { PaymentEventsProvider } from '@woocommerce/base-context'; import classNames from 'classnames'; -import { isObject } from '@woocommerce/types'; /** * Internal dependencies */ import CartButton from '../mini-cart-cart-button-block/block'; import CheckoutButton from '../mini-cart-checkout-button-block/block'; +import { hasChildren } from '../utils'; const PaymentMethodIconsElement = (): JSX.Element => { const { paymentMethods } = usePaymentMethods(); @@ -37,18 +37,6 @@ interface Props { checkoutButtonLabel: string; } -/** - * Checks if there are any children that are blocks. - */ -const hasChildren = ( children ): boolean => { - return children.some( ( child ) => { - if ( Array.isArray( child ) ) { - return hasChildren( child ); - } - return isObject( child ) && child.key !== null; - } ); -}; - const Block = ( { children, className, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx index 9c337e29b57..5e689f8b782 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx @@ -1,34 +1,45 @@ /** * External dependencies */ -import { sprintf, _n, __ } from '@wordpress/i18n'; import { useStoreCart } from '@woocommerce/base-context/hooks'; import classNames from 'classnames'; /** * Internal dependencies */ +import TitleItemsCounter from '../mini-cart-title-items-counter-block/block'; +import TitleYourCart from '../mini-cart-title-label-block/block'; +import { hasChildren } from '../utils'; type MiniCartTitleBlockProps = { className: string; + children: JSX.Element; }; -const Block = ( { className }: MiniCartTitleBlockProps ): JSX.Element => { - const { cartItemsCount, cartIsLoading } = useStoreCart(); +const Block = ( { + children, + className, +}: MiniCartTitleBlockProps ): JSX.Element | null => { + const { cartIsLoading } = useStoreCart(); + if ( cartIsLoading ) { + return null; + } + + // The `Mini Cart Title` was converted to two inner blocks, but we still need to render the old title for + // themes that have the old `mini-cart.html` template. So we check if there are any inner blocks and if + // not, render the title blocks. + const hasTitleInnerBlocks = hasChildren( children ); + 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 - ) } + { hasTitleInnerBlocks ? ( + children + ) : ( + <> + + + + ) }

); }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx index c3aae20279e..231dd9d8806 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/edit.tsx @@ -1,23 +1,36 @@ /** * External dependencies */ -import { useBlockProps } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import Block from './block'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export const Edit = (): JSX.Element => { - const blockProps = useBlockProps(); + const blockProps = useBlockProps( { + className: 'wc-block-mini-cart__title', + } ); + + const TEMPLATE = [ + [ 'woocommerce/mini-cart-title-label-block', {} ], + [ 'woocommerce/mini-cart-title-items-counter-block', {} ], + ]; return ( -
- -
+

+ +

); }; export const Save = (): JSX.Element => { - return
; + return ( +
+ +
+ ); }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.json new file mode 100644 index 00000000000..c02545e027f --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.json @@ -0,0 +1,29 @@ +{ + "name": "woocommerce/mini-cart-title-items-counter-block", + "version": "1.0.0", + "title": "Mini Cart Title Items Counter", + "description": "Block that displays the items counter part of the Mini Cart Title block.", + "category": "woocommerce", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false, + "lock": false, + "color": { + "text": true, + "background": true + }, + "typography": { + "fontSize": true + }, + "spacing": { + "padding": true + } + }, + "parent": [ "woocommerce/mini-cart-title-block" ], + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx new file mode 100644 index 00000000000..e526f96336c --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx @@ -0,0 +1,50 @@ +/** + * External dependencies + */ +import { useStoreCart } from '@woocommerce/base-context'; +import classNames from 'classnames'; +import { _n, sprintf } from '@wordpress/i18n'; +import { + useColorProps, + useSpacingProps, + useTypographyProps, +} from '@woocommerce/base-hooks'; + +type Props = { + className?: string; +}; + +const Block = ( props: Props ): JSX.Element => { + const { cartItemsCount } = useStoreCart(); + const colorProps = useColorProps( props ); + const typographyProps = useTypographyProps( props ); + const spacingProps = useSpacingProps( props ); + + return ( + + { sprintf( + /* translators: %d is the count of items in the cart. */ + _n( + '(%d item)', + '(%d items)', + cartItemsCount, + 'woo-gutenberg-products-block' + ), + cartItemsCount + ) } + + ); +}; + +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/edit.tsx new file mode 100644 index 00000000000..5761421b7b9 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/edit.tsx @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import { _n, sprintf } from '@wordpress/i18n'; +import { useStoreCart } from '@woocommerce/base-context'; + +export const Edit = (): JSX.Element => { + const blockProps = useBlockProps(); + const { cartItemsCount } = useStoreCart(); + + return ( + + { sprintf( + /* translators: %d is the count of items in the cart. */ + _n( + '(%d item)', + '(%d items)', + cartItemsCount, + 'woo-gutenberg-products-block' + ), + cartItemsCount + ) } + + ); +}; + +export const Save = (): JSX.Element => { + return
; +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/index.tsx new file mode 100644 index 00000000000..a3bca1363c7 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/index.tsx @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { Icon, heading } from '@wordpress/icons'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { Edit, Save } from './edit'; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore -- TypeScript expects some required properties which we already +// registered in PHP. +registerBlockType( 'woocommerce/mini-cart-title-items-counter-block', { + icon: { + src: ( + + ), + }, + edit: Edit, + save: Save, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/attributes.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/attributes.tsx new file mode 100644 index 00000000000..d788be8b5eb --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/attributes.tsx @@ -0,0 +1,11 @@ +/** + * Internal dependencies + */ +import { defaultYourCartLabel } from './constants'; + +export default { + label: { + type: 'string', + default: defaultYourCartLabel, + }, +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.json new file mode 100644 index 00000000000..77a2cb3570e --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.json @@ -0,0 +1,34 @@ +{ + "name": "woocommerce/mini-cart-title-label-block", + "version": "1.0.0", + "title": "Mini Cart Title Label", + "description": "Block that displays the 'Your cart' part of the Mini Cart Title block.", + "category": "woocommerce", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false, + "lock": false, + "color": { + "text": true, + "background": true + }, + "typography": { + "fontSize": true + }, + "spacing": { + "padding": true + } + }, + "attributes": { + "label": { + "type": "string" + } + }, + "parent": [ "woocommerce/mini-cart-title-block" ], + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx new file mode 100644 index 00000000000..f9179c6ac64 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx @@ -0,0 +1,44 @@ +/** + * External dependencies + */ +import { + useColorProps, + useSpacingProps, + useTypographyProps, +} from '@woocommerce/base-hooks'; +import classNames from 'classnames'; + +/** + * Internal dependencies + */ +import { defaultYourCartLabel } from './constants'; + +type Props = { + label?: string; + className?: string; +}; + +const Block = ( props: Props ): JSX.Element => { + const colorProps = useColorProps( props ); + const typographyProps = useTypographyProps( props ); + const spacingProps = useSpacingProps( props ); + + return ( + + { props.label || defaultYourCartLabel } + + ); +}; + +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/constants.ts b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/constants.ts new file mode 100644 index 00000000000..8965aef0c2d --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/constants.ts @@ -0,0 +1,9 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +export const defaultYourCartLabel = __( + 'Your cart', + 'woo-gutenberg-products-block' +); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/edit.tsx new file mode 100644 index 00000000000..d64db64b878 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/edit.tsx @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { RichText, useBlockProps } from '@wordpress/block-editor'; + +interface Attributes { + attributes: { + label: string; + }; + setAttributes: ( attributes: Record< string, unknown > ) => void; +} + +export const Edit = ( { + attributes: { label }, + setAttributes, +}: Attributes ): JSX.Element => { + const blockProps = useBlockProps(); + + return ( + + + setAttributes( { label: newLabel } ) + } + /> + + ); +}; + +export const Save = (): JSX.Element => { + return
; +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/index.tsx new file mode 100644 index 00000000000..ea5f0187487 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/index.tsx @@ -0,0 +1,28 @@ +/** + * External dependencies + */ +import { Icon, heading } from '@wordpress/icons'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { Edit, Save } from './edit'; +import attributes from './attributes'; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore -- TypeScript expects some required properties which we already +// registered in PHP. +registerBlockType( 'woocommerce/mini-cart-title-label-block', { + icon: { + src: ( + + ), + }, + attributes, + edit: Edit, + save: Save, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts index 9137a65174f..99aae07f44d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts @@ -10,6 +10,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 miniCartTitleMetadata from './mini-cart-title-block/block.json'; +import miniCartTitleItemsCounterMetadata from './mini-cart-title-items-counter-block/block.json'; +import miniCartTitleLabelBlockMetadata from './mini-cart-title-label-block/block.json'; import miniCartProductsTableMetadata from './mini-cart-products-table-block/block.json'; import miniCartFooterMetadata from './mini-cart-footer-block/block.json'; import miniCartItemsMetadata from './mini-cart-items-block/block.json'; @@ -52,6 +54,28 @@ registerCheckoutBlock( { ), } ); +registerCheckoutBlock( { + metadata: miniCartTitleItemsCounterMetadata, + force: false, + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/title-items-counter" */ './mini-cart-title-items-counter-block/block' + ) + ), +} ); + +registerCheckoutBlock( { + metadata: miniCartTitleLabelBlockMetadata, + force: false, + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/title-label" */ './mini-cart-title-label-block/block' + ) + ), +} ); + registerCheckoutBlock( { metadata: miniCartItemsMetadata, component: lazy( diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts index 12c49c23c61..1a17a2b1be2 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { isObject } from 'lodash'; + type Variant = 'text' | 'contained' | 'outlined'; export const getVariant = ( @@ -14,3 +19,15 @@ export const getVariant = ( return defaultVariant; }; + +/** + * Checks if there are any children that are blocks. + */ +export const hasChildren = ( children ): boolean => { + return children.some( ( child ) => { + if ( Array.isArray( child ) ) { + return hasChildren( child ); + } + return isObject( child ) && child.key !== null; + } ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss index 072172d9cc0..22dea6da84a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss @@ -121,12 +121,18 @@ } h2.wc-block-mini-cart__title { - @include font-size(larger); + display: flex; + align-items: baseline; background: inherit; - margin: $gap $gap $gap * -2; padding-bottom: $gap * 2; mask-image: linear-gradient(#000 calc(100% - #{$gap * 1.5}), transparent); z-index: 1; + margin: $gap $gap $gap * -2; + @include font-size(larger); + + span:first-child { + margin-right: $gap-smaller; + } } .wc-block-mini-cart__items { diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts index bb347c08382..1a4ec9d1bac 100644 --- a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts +++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts @@ -25,6 +25,7 @@ export enum innerBlockAreas { MINI_CART = 'woocommerce/mini-cart-contents', EMPTY_MINI_CART = 'woocommerce/empty-mini-cart-contents-block', FILLED_MINI_CART = 'woocommerce/filled-mini-cart-contents-block', + MINI_CART_TITLE = 'woocommerce/mini-cart-title-block', MINI_CART_ITEMS = 'woocommerce/mini-cart-items-block', MINI_CART_FOOTER = 'woocommerce/mini-cart-footer-block', CART_ORDER_SUMMARY = 'woocommerce/cart-order-summary-block', diff --git a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php index 56ac7201d1c..52b10037977 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php @@ -282,6 +282,8 @@ class MiniCart extends AbstractBlock { 'products-table-frontend', 'cart-button-frontend', 'checkout-button-frontend', + 'title-label-frontend', + 'title-items-counter-frontend', ); } foreach ( $inner_blocks_frontend_scripts as $inner_block_frontend_script ) { diff --git a/plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php b/plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php index cdd02cdb656..d80e25db484 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php @@ -155,6 +155,8 @@ class MiniCartContents extends AbstractBlock { $block_types[] = 'MiniCartCartButtonBlock'; $block_types[] = 'MiniCartCheckoutButtonBlock'; $block_types[] = 'MiniCartTitleBlock'; + $block_types[] = 'MiniCartTitleItemsCounterBlock'; + $block_types[] = 'MiniCartTitleLabelBlock'; return $block_types; } diff --git a/plugins/woocommerce-blocks/src/BlockTypes/MiniCartTitleItemsCounterBlock.php b/plugins/woocommerce-blocks/src/BlockTypes/MiniCartTitleItemsCounterBlock.php new file mode 100644 index 00000000000..e470e610556 --- /dev/null +++ b/plugins/woocommerce-blocks/src/BlockTypes/MiniCartTitleItemsCounterBlock.php @@ -0,0 +1,14 @@ +
+ +
+
+ + + +
+
+