Merge branch 'trunk' into fix/alignment-coupon

assets/js/blocks/mini-cart/edit.tsx

@@ -21,6 +21,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import QuantityBadge from './quantity-badge';
+import './editor.scss';
 
 interface Attributes {
 	addToCartBehaviour: string;
@@ -54,47 +55,18 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 		<div { ...blockProps }>
 			<InspectorControls>
 				<PanelBody
-					title={ __(
-						'Mini Cart Settings',
-						'woo-gutenberg-products-block'
-					) }
+					title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
 				>
-					<BaseControl
-						id="wc-block-mini-cart__add-to-cart-behaviour-toggle"
-						label={ __(
-							'Add-to-Cart behaviour',
-							'woo-gutenberg-products-block'
-						) }
-					>
-						<ToggleControl
-							label={ __(
-								'Open cart in a drawer',
-								'woo-gutenberg-products-block'
-							) }
-							onChange={ ( value ) => {
-								setAttributes( {
-									addToCartBehaviour: value
-										? 'open_drawer'
-										: 'none',
-								} );
-							} }
-							help={ __(
-								'Select what happens when a customer adds a product to the cart.',
-								'woo-gutenberg-products-block'
-							) }
-							checked={ addToCartBehaviour === 'open_drawer' }
-						/>
-					</BaseControl>
 					<ToggleControl
 						label={ __(
-							'Hide Cart Price',
+							'Display total price',
 							'woo-gutenberg-products-block'
 						) }
 						help={ __(
-							'Toggles the visibility of the Mini Cart price.',
+							'Toggle to display the total price of products in the shopping cart. If no products have been added, the price will not display.',
 							'woo-gutenberg-products-block'
 						) }
-						checked={ hasHiddenPrice }
+						checked={ ! hasHiddenPrice }
 						onChange={ () =>
 							setAttributes( {
 								hasHiddenPrice: ! hasHiddenPrice,
@@ -103,9 +75,9 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 					/>
 					{ isSiteEditor && (
 						<ToggleGroupControl
-							className="wc-block-mini-cart__render-in-cart-and-checkout-toggle"
+							className="wc-block-editor-mini-cart__render-in-cart-and-checkout-toggle"
 							label={ __(
-								'Mini Cart in cart and checkout pages',
+								'Mini-Cart in cart and checkout pages',
 								'woo-gutenberg-products-block'
 							) }
 							value={ cartAndCheckoutRenderStyle }
@@ -115,7 +87,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 								} );
 							} }
 							help={ __(
-								'Select how the Mini Cart behaves in the Cart and Checkout pages. This might affect the header layout.',
+								'Select how the Mini-Cart behaves in the Cart and Checkout pages. This might affect the header layout.',
 								'woo-gutenberg-products-block'
 							) }
 						>
@@ -136,27 +108,62 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 						</ToggleGroupControl>
 					) }
 				</PanelBody>
-				{ templatePartEditUri && (
-					<PanelBody
-						title={ __(
-							'Template settings',
+				<PanelBody
+					title={ __(
+						'Cart Drawer',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					{ templatePartEditUri && (
+						<>
+							<img
+								className="wc-block-editor-mini-cart__drawer-image"
+								src="/wp-content/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer.svg"
+								alt=""
+							/>
+							<p>
+								{ __(
+									'When opened, the Mini-Cart drawer gives shoppers quick access to view their selected products and checkout.',
+									'woo-gutenberg-products-block'
+								) }
+							</p>
+							<p className="wc-block-editor-mini-cart__drawer-link">
+								<ExternalLink href={ templatePartEditUri }>
+									{ __(
+										'Edit Mini-Cart Drawer template',
+										'woo-gutenberg-products-block'
+									) }
+								</ExternalLink>
+							</p>
+						</>
+					) }
+					<BaseControl
+						id="wc-block-mini-cart__add-to-cart-behaviour-toggle"
+						label={ __(
+							'Behavior',
 							'woo-gutenberg-products-block'
 						) }
 					>
-						<p>
-							{ __(
-								'Edit the appearance of the Mini Cart.',
+						<ToggleControl
+							label={ __(
+								'Open drawer when adding',
 								'woo-gutenberg-products-block'
 							) }
-						</p>
-						<ExternalLink href={ templatePartEditUri }>
-							{ __(
-								'Edit Mini Cart template part',
+							onChange={ ( value ) => {
+								setAttributes( {
+									addToCartBehaviour: value
+										? 'open_drawer'
+										: 'none',
+								} );
+							} }
+							help={ __(
+								'Toggle to open the Mini-Cart drawer when a shopper adds a product to their cart.',
 								'woo-gutenberg-products-block'
 							) }
-						</ExternalLink>
-					</PanelBody>
-				) }
+							checked={ addToCartBehaviour === 'open_drawer' }
+						/>
+					</BaseControl>
+				</PanelBody>
 			</InspectorControls>
 			<Noninteractive>
 				<button className="wc-block-mini-cart__button">

assets/js/blocks/mini-cart/editor.scss

@@ -0,0 +1,11 @@
+.wc-block-editor-mini-cart__render-in-cart-and-checkout-toggle {
+	width: 100%;
+}
+
+.wc-block-editor-mini-cart__drawer-image {
+	margin-bottom: 6px;
+}
+
+.wc-block-editor-mini-cart__drawer-link {
+	margin-bottom: 24px;
+}

assets/js/blocks/mini-cart/frontend.ts

@@ -14,6 +14,20 @@ interface dependencyData {
 	translations?: string;
 }
 
+function getClosestColor(
+	element: Element | null,
+	colorType: 'color' | 'backgroundColor'
+): string | null {
+	if ( ! element ) {
+		return null;
+	}
+	const color = window.getComputedStyle( element )[ colorType ];
+	if ( color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent' ) {
+		return color;
+	}
+	return getClosestColor( element.parentElement, colorType );
+}
+
 window.addEventListener( 'load', () => {
 	const miniCartBlocks = document.querySelectorAll( '.wc-block-mini-cart' );
 	let wasLoadScriptsCalled = false;
@@ -155,7 +169,7 @@ window.addEventListener( 'load', () => {
 				? openDrawerWithRefresh
 				: loadContentsWithRefresh;
 
-		// There might be more than one Mini Cart block in the page. Make sure
+		// There might be more than one Mini-Cart block in the page. Make sure
 		// only one opens when adding a product to the cart.
 		if ( i === 0 ) {
 			document.body.addEventListener(
@@ -171,19 +185,34 @@ window.addEventListener( 'load', () => {
 
 	/**
 	 * Get the background color of the body then set it as the background color
-	 * of the Mini Cart Contents block. We use :where here to make customized
-	 * background color alway have higher priority.
+	 * of the Mini-Cart Contents block.
 	 *
 	 * We only set the background color, instead of the whole background. As
 	 * we only provide the option to customize the background color.
 	 */
 	const style = document.createElement( 'style' );
 	const backgroundColor = getComputedStyle( document.body ).backgroundColor;
-
+	// For simplicity, we only consider the background color of the first Mini-Cart button.
+	const firstMiniCartButton = document.querySelector(
+		'.wc-block-mini-cart__button'
+	);
+	const badgeTextColor = firstMiniCartButton
+		? getClosestColor( firstMiniCartButton, 'backgroundColor' )
+		: 'inherit';
+	const badgeBackgroundColor = firstMiniCartButton
+		? getClosestColor( firstMiniCartButton, 'color' )
+		: 'inherit';
+
+	// We use :where here to reduce specificity so customized colors and theme
+	// CSS take priority.
 	style.appendChild(
 		document.createTextNode(
 			`:where(.wp-block-woocommerce-mini-cart-contents) {
 				background-color: ${ backgroundColor };
+			}
+			:where(.wc-block-mini-cart__badge) {
+				background-color: ${ badgeBackgroundColor };
+				color: ${ badgeTextColor };
 			}`
 		)
 	);

assets/js/blocks/mini-cart/index.tsx

@@ -15,7 +15,7 @@ import edit from './edit';
 
 const settings: BlockConfiguration = {
 	apiVersion: 2,
-	title: __( 'Mini Cart', 'woo-gutenberg-products-block' ),
+	title: __( 'Mini-Cart', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
 			<Icon
@@ -27,7 +27,7 @@ const settings: BlockConfiguration = {
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	description: __(
-		'Display a mini cart widget.',
+		'Display a button for shoppers to quickly view their cart.',
 		'woo-gutenberg-products-block'
 	),
 	supports: {

assets/js/blocks/mini-cart/mini-cart-contents/attributes.tsx

@@ -29,12 +29,12 @@ export const attributes = {
 		default: [
 			{
 				view: 'woocommerce/filled-mini-cart-contents-block',
-				label: __( 'Filled Mini Cart', 'woo-gutenberg-products-block' ),
+				label: __( 'Filled Mini-Cart', 'woo-gutenberg-products-block' ),
 				icon: <Icon icon={ filledCart } />,
 			},
 			{
 				view: 'woocommerce/empty-mini-cart-contents-block',
-				label: __( 'Empty Mini Cart', 'woo-gutenberg-products-block' ),
+				label: __( 'Empty Mini-Cart', 'woo-gutenberg-products-block' ),
 				icon: <Icon icon={ removeCart } />,
 			},
 		],

assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

@@ -50,7 +50,7 @@ const Edit = ( {
 	const blockProps = useBlockProps( {
 		/**
 		 * This is a workaround for the Site Editor to calculate the
-		 * correct height of the Mini Cart template part on the first load.
+		 * correct height of the Mini-Cart template part on the first load.
 		 *
 		 * @see https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5825
 		 */
@@ -73,7 +73,7 @@ const Edit = ( {
 
 	/**
 	 * This is a workaround for the Site Editor to set the correct
-	 * background color of the Mini Cart Contents block base on
+	 * background color of the Mini-Cart Contents block base on
 	 * the main background color set by the theme.
 	 */
 	useEffect( () => {

assets/js/blocks/mini-cart/mini-cart-contents/index.tsx

@@ -17,7 +17,7 @@ import './inner-blocks';
 
 const settings: BlockConfiguration = {
 	apiVersion: 2,
-	title: __( 'Mini Cart Contents', 'woo-gutenberg-products-block' ),
+	title: __( 'Mini-Cart Contents', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
 			<Icon
@@ -29,7 +29,7 @@ const settings: BlockConfiguration = {
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	description: __(
-		'Display a mini cart widget.',
+		'Display a Mini-Cart widget.',
 		'woo-gutenberg-products-block'
 	),
 	supports: {

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks-style.tsx

@@ -1,9 +1,9 @@
 /**
  * This is a workaround to style inner blocks using the color
- * settings of the Mini Cart Contents block. It's possible to get
- * the Mini Cart Contents block's attributes inside the inner blocks
+ * settings of the Mini-Cart Contents block. It's possible to get
+ * the Mini-Cart Contents block's attributes inside the inner blocks
  * components, but we have 4 out of 7 inner blocks that inherit
- * style from the Mini Cart Contents block, so we need to apply the
+ * style from the Mini-Cart Contents block, so we need to apply the
  * styles here to avoid duplication.
  *
  * We only use this hack for the Site Editor. On the frontend, we

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/block.json

@@ -1,8 +1,8 @@
 {
 	"name": "woocommerce/empty-mini-cart-contents-block",
 	"version": "1.0.0",
-	"title": "Empty Mini Cart view",
-	"description": "Blocks that are displayed when the Mini Cart is empty.",
+	"title": "Empty Mini-Cart view",
+	"description": "Blocks that are displayed when the Mini-Cart is empty.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/block.json

@@ -1,8 +1,8 @@
 {
 	"name": "woocommerce/filled-mini-cart-contents-block",
 	"version": "1.0.0",
-	"title": "Filled Mini Cart view",
-	"description": "Contains blocks that display the content of the Mini Cart.",
+	"title": "Filled Mini-Cart view",
+	"description": "Contains blocks that display the content of the Mini-Cart.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json

@@ -1,8 +1,8 @@
 {
 	"name": "woocommerce/mini-cart-cart-button-block",
 	"version": "1.0.0",
-	"title": "Mini Cart View Cart Button",
-	"description": "Block that displays the cart button when the Mini Cart has products.",
+	"title": "Mini-Cart View Cart Button",
+	"description": "Block that displays the cart button when the Mini-Cart has products.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json

@@ -1,8 +1,8 @@
 {
 	"name": "woocommerce/mini-cart-checkout-button-block",
 	"version": "1.0.0",
-	"title": "Mini Cart Proceed to Checkout Button",
-	"description": "Block that displays the checkout button when the Mini Cart has products.",
+	"title": "Mini-Cart Proceed to Checkout Button",
+	"description": "Block that displays the checkout button when the Mini-Cart has products.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json

@@ -1,8 +1,8 @@
 {
 	"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.",
+	"title": "Mini-Cart Footer",
+	"description": "Block that displays the footer of the Mini-Cart block.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/block.json

@@ -1,8 +1,8 @@
 {
 	"name": "woocommerce/mini-cart-items-block",
 	"version": "1.0.0",
-	"title": "Mini Cart Items",
-	"description": "Contains the products table and other custom blocks of filled mini cart.",
+	"title": "Mini-Cart Items",
+	"description": "Contains the products table and other custom blocks of filled mini-cart.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json

@@ -1,8 +1,8 @@
 {
 	"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.",
+	"title": "Mini-Cart Products Table",
+	"description": "Block that displays the products table of the Mini-Cart block.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,