From 4d6817fba167a608b94aa4c6badce17bb8678bbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 16 Mar 2023 15:35:10 +0100
Subject: [PATCH 01/24] Create new car button inner block

---
 .../mini-cart-contents/inner-blocks/index.tsx |  1 +
 .../attributes.tsx                            | 11 +++++
 .../mini-cart-cart-button-block/block.json    | 30 ++++++++++++
 .../mini-cart-cart-button-block/block.tsx     | 37 ++++++++++++++
 .../mini-cart-cart-button-block/constants.tsx |  9 ++++
 .../mini-cart-cart-button-block/edit.tsx      | 49 +++++++++++++++++++
 .../mini-cart-cart-button-block/index.tsx     | 28 +++++++++++
 .../mini-cart-footer-block/edit.tsx           | 23 ++-------
 .../inner-blocks/register-components.ts       | 11 +++++
 src/BlockTypes/MiniCartCartButtonBlock.php    | 14 ++++++
 src/BlockTypes/MiniCartContents.php           |  1 +
 11 files changed, 196 insertions(+), 18 deletions(-)
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/attributes.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/index.tsx
 create mode 100644 src/BlockTypes/MiniCartCartButtonBlock.php

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx
index 4f7505b873e..41e9c103924 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx
@@ -8,3 +8,4 @@ import './mini-cart-items-block';
 import './mini-cart-products-table-block';
 import './mini-cart-footer-block';
 import './mini-cart-shopping-button-block';
+import './mini-cart-cart-button-block';
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/attributes.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/attributes.tsx
new file mode 100644
index 00000000000..0e2e88c3f1d
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/attributes.tsx
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import { defaultCartButtonLabel } from './constants';
+
+export default {
+	cartButtonLabel: {
+		type: 'string',
+		default: defaultCartButtonLabel,
+	},
+};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
new file mode 100644
index 00000000000..945166fa1b2
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
@@ -0,0 +1,30 @@
+{
+	"name": "woocommerce/mini-cart-cart-button-block",
+	"version": "1.0.0",
+	"title": "Mini Cart Cart Button",
+	"description": "Block that displays the cart button when the Mini Cart has products.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": true,
+		"color": {
+			"text": true,
+			"background": true
+		}
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": false,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/empty-mini-cart-contents-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
new file mode 100644
index 00000000000..874bb940321
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { SHOP_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCartButtonLabel } from './constants';
+
+type MiniCartCartButtonBlockProps = {
+	className: string;
+	cartButtonLabel: string;
+};
+
+const Block = ( {
+	className,
+	cartButtonLabel,
+}: MiniCartCartButtonBlockProps ): JSX.Element | null => {
+	return (
+		<div className="wp-block-button has-text-align-center">
+			<Button
+				className={ classNames(
+					className,
+					'wc-block-mini-cart__cart-button'
+				) }
+				href={ SHOP_URL }
+			>
+				{ cartButtonLabel || defaultCartButtonLabel }
+			</Button>
+		</div>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx
new file mode 100644
index 00000000000..073499a8d4c
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx
@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const defaultCartButtonLabel = __(
+	'View my cart',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
new file mode 100644
index 00000000000..0087eb3693d
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+import Button from '@woocommerce/base-components/button';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCartButtonLabel } from './constants';
+
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		cartButtonLabel: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { cartButtonLabel } = attributes;
+
+	return (
+		<div className="wp-block-button aligncenter">
+			<Button
+				{ ...blockProps }
+				className="wc-block-mini-cart__shopping-button"
+				variant="outlined"
+			>
+				<RichText
+					multiline={ false }
+					allowedFormats={ [] }
+					value={ cartButtonLabel }
+					placeholder={ defaultCartButtonLabel }
+					onChange={ ( content ) => {
+						setAttributes( {
+							cartButtonLabel: content,
+						} );
+					} }
+				/>
+			</Button>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() }></div>;
+};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/index.tsx
new file mode 100644
index 00000000000..37b561d13f9
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/index.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { Icon, button } 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-cart-button-block', {
+	icon: {
+		src: (
+			<Icon
+				icon={ button }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
index 2f914800272..953ef1a1591 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { TotalsItem } from '@woocommerce/blocks-checkout';
 import EditableButton from '@woocommerce/editor-components/editable-button';
-import { useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	usePaymentMethods,
@@ -18,10 +18,7 @@ import { PaymentEventsProvider } from '@woocommerce/base-context';
 /**
  * Internal dependencies
  */
-import {
-	defaultCartButtonLabel,
-	defaultCheckoutButtonLabel,
-} from './constants';
+import { defaultCheckoutButtonLabel } from './constants';
 
 const PaymentMethodIconsElement = (): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
@@ -43,13 +40,13 @@ export const Edit = ( {
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const blockProps = useBlockProps();
-	const { cartButtonLabel, checkoutButtonLabel } = attributes;
+	const { checkoutButtonLabel } = attributes;
 	const { cartTotals } = useStoreCart();
 	const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
 		? parseInt( cartTotals.total_items, 10 ) +
 		  parseInt( cartTotals.total_items_tax, 10 )
 		: parseInt( cartTotals.total_items, 10 );
-
+	const TEMPLATE = [ [ 'woocommerce/mini-cart-cart-button-block', {} ] ];
 	return (
 		<div { ...blockProps }>
 			<div className="wc-block-mini-cart__footer">
@@ -64,17 +61,7 @@ export const Edit = ( {
 					) }
 				/>
 				<div className="wc-block-mini-cart__footer-actions">
-					<EditableButton
-						className="wc-block-mini-cart__footer-cart"
-						variant="outlined"
-						value={ cartButtonLabel }
-						placeholder={ defaultCartButtonLabel }
-						onChange={ ( content ) => {
-							setAttributes( {
-								cartButtonLabel: content,
-							} );
-						} }
-					/>
+					<InnerBlocks template={ TEMPLATE } />
 					<EditableButton
 						className="wc-block-mini-cart__footer-checkout"
 						value={ checkoutButtonLabel }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
index 79aa25254e3..33a51f6e14c 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
@@ -14,6 +14,7 @@ import miniCartProductsTableMetadata from './mini-cart-products-table-block/bloc
 import miniCartFooterMetadata from './mini-cart-footer-block/block.json';
 import miniCartItemsMetadata from './mini-cart-items-block/block.json';
 import miniCartShoppingButtonMetadata from './mini-cart-shopping-button-block/block.json';
+import miniCartCartButtonMetadata from './mini-cart-cart-button-block/block.json';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
@@ -88,3 +89,13 @@ registerCheckoutBlock( {
 			)
 	),
 } );
+
+registerCheckoutBlock( {
+	metadata: miniCartCartButtonMetadata,
+	component: lazy(
+		() =>
+			import(
+				/* webpackChunkName: "mini-cart-contents-block/cart-button" */ './mini-cart-cart-button-block/block'
+			)
+	),
+} );
diff --git a/src/BlockTypes/MiniCartCartButtonBlock.php b/src/BlockTypes/MiniCartCartButtonBlock.php
new file mode 100644
index 00000000000..2982e138005
--- /dev/null
+++ b/src/BlockTypes/MiniCartCartButtonBlock.php
@@ -0,0 +1,14 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+/**
+ * MiniCartCartButtonBlock class.
+ */
+class MiniCartCartButtonBlock extends AbstractInnerBlock {
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'mini-cart-cart-button-block';
+}
diff --git a/src/BlockTypes/MiniCartContents.php b/src/BlockTypes/MiniCartContents.php
index 9c9d2c0ff3a..55986407e7d 100644
--- a/src/BlockTypes/MiniCartContents.php
+++ b/src/BlockTypes/MiniCartContents.php
@@ -152,6 +152,7 @@ public static function get_mini_cart_block_types() {
 		$block_types[] = 'MiniCartItemsBlock';
 		$block_types[] = 'MiniCartProductsTableBlock';
 		$block_types[] = 'MiniCartShoppingButtonBlock';
+		$block_types[] = 'MiniCartCartButtonBlock';
 		$block_types[] = 'MiniCartTitleBlock';
 
 		return $block_types;

From 69f11f90d421334abac05e7009add97e68f82841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 16 Mar 2023 16:01:09 +0100
Subject: [PATCH 02/24] Create new checkout button inner block

---
 .../mini-cart-contents/inner-blocks/index.tsx |  1 +
 .../mini-cart-cart-button-block/edit.tsx      | 36 +++++++--------
 .../attributes.tsx                            | 11 +++++
 .../block.json                                | 30 +++++++++++++
 .../mini-cart-checkout-button-block/block.tsx | 37 +++++++++++++++
 .../constants.tsx                             |  9 ++++
 .../mini-cart-checkout-button-block/edit.tsx  | 43 ++++++++++++++++++
 .../mini-cart-checkout-button-block/index.tsx | 28 ++++++++++++
 .../mini-cart-footer-block/edit.tsx           | 45 ++++++-------------
 .../inner-blocks/register-components.ts       | 11 +++++
 assets/js/blocks/mini-cart/style.scss         |  6 ++-
 .../MiniCartCheckoutButtonBlock.php           | 14 ++++++
 src/BlockTypes/MiniCartContents.php           |  1 +
 13 files changed, 219 insertions(+), 53 deletions(-)
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/attributes.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/index.tsx
 create mode 100644 src/BlockTypes/MiniCartCheckoutButtonBlock.php

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx
index 41e9c103924..bea902f0c8e 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/index.tsx
@@ -9,3 +9,4 @@ import './mini-cart-products-table-block';
 import './mini-cart-footer-block';
 import './mini-cart-shopping-button-block';
 import './mini-cart-cart-button-block';
+import './mini-cart-checkout-button-block';
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
index 0087eb3693d..4a440f75f3f 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
@@ -22,25 +22,23 @@ export const Edit = ( {
 	const { cartButtonLabel } = attributes;
 
 	return (
-		<div className="wp-block-button aligncenter">
-			<Button
-				{ ...blockProps }
-				className="wc-block-mini-cart__shopping-button"
-				variant="outlined"
-			>
-				<RichText
-					multiline={ false }
-					allowedFormats={ [] }
-					value={ cartButtonLabel }
-					placeholder={ defaultCartButtonLabel }
-					onChange={ ( content ) => {
-						setAttributes( {
-							cartButtonLabel: content,
-						} );
-					} }
-				/>
-			</Button>
-		</div>
+		<Button
+			{ ...blockProps }
+			className="wc-block-mini-cart__cart-button"
+			variant="outlined"
+		>
+			<RichText
+				multiline={ false }
+				allowedFormats={ [] }
+				value={ cartButtonLabel }
+				placeholder={ defaultCartButtonLabel }
+				onChange={ ( content ) => {
+					setAttributes( {
+						cartButtonLabel: content,
+					} );
+				} }
+			/>
+		</Button>
 	);
 };
 
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/attributes.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/attributes.tsx
new file mode 100644
index 00000000000..bc16a01bf9b
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/attributes.tsx
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import { defaultCheckoutButtonLabel } from './constants';
+
+export default {
+	checkoutButtonLabel: {
+		type: 'string',
+		default: defaultCheckoutButtonLabel,
+	},
+};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
new file mode 100644
index 00000000000..d27e725cea5
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
@@ -0,0 +1,30 @@
+{
+	"name": "woocommerce/mini-cart-checkout-button-block",
+	"version": "1.0.0",
+	"title": "Mini Cart Checkout Button",
+	"description": "Block that displays the checkout button when the Mini Cart has products.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": true,
+		"color": {
+			"text": true,
+			"background": true
+		}
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": false,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/empty-mini-cart-contents-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
new file mode 100644
index 00000000000..60d4f81eea3
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { SHOP_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCheckoutButtonLabel } from './constants';
+
+type MiniCartCheckoutButtonBlockProps = {
+	className: string;
+	checkoutButtonLabel: string;
+};
+
+const Block = ( {
+	className,
+	checkoutButtonLabel,
+}: MiniCartCheckoutButtonBlockProps ): JSX.Element | null => {
+	return (
+		<div className="wp-block-button has-text-align-center">
+			<Button
+				className={ classNames(
+					className,
+					'wc-block-mini-cart__checkout-button'
+				) }
+				href={ SHOP_URL }
+			>
+				{ checkoutButtonLabel || defaultCheckoutButtonLabel }
+			</Button>
+		</div>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx
new file mode 100644
index 00000000000..65253b4d373
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx
@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const defaultCheckoutButtonLabel = __(
+	'Go to checkout',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
new file mode 100644
index 00000000000..839e0a34b4d
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+import Button from '@woocommerce/base-components/button';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCheckoutButtonLabel } from './constants';
+
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		checkoutButtonLabel: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { checkoutButtonLabel } = attributes;
+
+	return (
+		<Button { ...blockProps } className="checkout">
+			<RichText
+				multiline={ false }
+				allowedFormats={ [] }
+				value={ checkoutButtonLabel }
+				placeholder={ defaultCheckoutButtonLabel }
+				onChange={ ( content ) => {
+					setAttributes( {
+						checkoutButtonLabel: content,
+					} );
+				} }
+			/>
+		</Button>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() }></div>;
+};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/index.tsx
new file mode 100644
index 00000000000..54ba642f28c
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/index.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { Icon, button } 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-checkout-button-block', {
+	icon: {
+		src: (
+			<Icon
+				icon={ button }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
index 953ef1a1591..cbf7f341413 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { TotalsItem } from '@woocommerce/blocks-checkout';
-import EditableButton from '@woocommerce/editor-components/editable-button';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
@@ -15,11 +14,6 @@ import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 import { getSetting } from '@woocommerce/settings';
 import { PaymentEventsProvider } from '@woocommerce/base-context';
 
-/**
- * Internal dependencies
- */
-import { defaultCheckoutButtonLabel } from './constants';
-
 const PaymentMethodIconsElement = (): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
 	return (
@@ -29,24 +23,19 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 	);
 };
 
-export const Edit = ( {
-	attributes,
-	setAttributes,
-}: {
-	attributes: {
-		cartButtonLabel: string;
-		checkoutButtonLabel: string;
-	};
-	setAttributes: ( attributes: Record< string, unknown > ) => void;
-} ): JSX.Element => {
+export const Edit = (): JSX.Element => {
 	const blockProps = useBlockProps();
-	const { checkoutButtonLabel } = attributes;
 	const { cartTotals } = useStoreCart();
 	const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
 		? parseInt( cartTotals.total_items, 10 ) +
 		  parseInt( cartTotals.total_items_tax, 10 )
 		: parseInt( cartTotals.total_items, 10 );
-	const TEMPLATE = [ [ 'woocommerce/mini-cart-cart-button-block', {} ] ];
+
+	const TEMPLATE = [
+		[ 'woocommerce/mini-cart-cart-button-block', {} ],
+		[ 'woocommerce/mini-cart-checkout-button-block', {} ],
+	];
+
 	return (
 		<div { ...blockProps }>
 			<div className="wc-block-mini-cart__footer">
@@ -60,19 +49,7 @@ export const Edit = ( {
 						'woo-gutenberg-products-block'
 					) }
 				/>
-				<div className="wc-block-mini-cart__footer-actions">
-					<InnerBlocks template={ TEMPLATE } />
-					<EditableButton
-						className="wc-block-mini-cart__footer-checkout"
-						value={ checkoutButtonLabel }
-						placeholder={ defaultCheckoutButtonLabel }
-						onChange={ ( content ) => {
-							setAttributes( {
-								checkoutButtonLabel: content,
-							} );
-						} }
-					/>
-				</div>
+				<InnerBlocks template={ TEMPLATE } />
 				<PaymentEventsProvider>
 					<PaymentMethodIconsElement />
 				</PaymentEventsProvider>
@@ -82,5 +59,9 @@ export const Edit = ( {
 };
 
 export const Save = (): JSX.Element => {
-	return <div { ...useBlockProps.save() }></div>;
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
 };
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
index 33a51f6e14c..5547bba5352 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
@@ -15,6 +15,7 @@ import miniCartFooterMetadata from './mini-cart-footer-block/block.json';
 import miniCartItemsMetadata from './mini-cart-items-block/block.json';
 import miniCartShoppingButtonMetadata from './mini-cart-shopping-button-block/block.json';
 import miniCartCartButtonMetadata from './mini-cart-cart-button-block/block.json';
+import miniCartCheckoutButtonMetadata from './mini-cart-checkout-button-block/block.json';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
@@ -99,3 +100,13 @@ registerCheckoutBlock( {
 			)
 	),
 } );
+
+registerCheckoutBlock( {
+	metadata: miniCartCheckoutButtonMetadata,
+	component: lazy(
+		() =>
+			import(
+				/* webpackChunkName: "mini-cart-contents-block/checkout-button" */ './mini-cart-checkout-button-block/block'
+			)
+	),
+} );
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index ffa6a26c9f0..59bf5baa9dc 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -171,11 +171,13 @@ h2.wc-block-mini-cart__title {
 		}
 	}
 
-	.wc-block-mini-cart__footer-actions {
+	.wc-block-mini-cart__footer-actions,
+	.block-editor-block-list__layout {
 		display: flex;
 		gap: $gap;
 
-		.wc-block-components-button {
+		.wc-block-components-button,
+		.wp-block-button {
 			flex-grow: 1;
 		}
 
diff --git a/src/BlockTypes/MiniCartCheckoutButtonBlock.php b/src/BlockTypes/MiniCartCheckoutButtonBlock.php
new file mode 100644
index 00000000000..d6a1710ff1d
--- /dev/null
+++ b/src/BlockTypes/MiniCartCheckoutButtonBlock.php
@@ -0,0 +1,14 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+/**
+ * MiniCartCheckoutButtonBlock class.
+ */
+class MiniCartCheckoutButtonBlock extends AbstractInnerBlock {
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'mini-cart-checkout-button-block';
+}
diff --git a/src/BlockTypes/MiniCartContents.php b/src/BlockTypes/MiniCartContents.php
index 55986407e7d..cdd02cdb656 100644
--- a/src/BlockTypes/MiniCartContents.php
+++ b/src/BlockTypes/MiniCartContents.php
@@ -153,6 +153,7 @@ public static function get_mini_cart_block_types() {
 		$block_types[] = 'MiniCartProductsTableBlock';
 		$block_types[] = 'MiniCartShoppingButtonBlock';
 		$block_types[] = 'MiniCartCartButtonBlock';
+		$block_types[] = 'MiniCartCheckoutButtonBlock';
 		$block_types[] = 'MiniCartTitleBlock';
 
 		return $block_types;

From 10c4147fac79323b78a86a5f63157c734b624a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 16 Mar 2023 16:26:06 +0100
Subject: [PATCH 03/24] Render inner buttons on the frontend

---
 .../mini-cart-cart-button-block/block.json    |  2 +-
 .../block.json                                |  2 +-
 .../mini-cart-footer-block/attributes.tsx     | 18 ---------
 .../mini-cart-footer-block/block.tsx          | 37 ++-----------------
 .../mini-cart-footer-block/constants.tsx      | 14 -------
 .../mini-cart-footer-block/index.tsx          |  2 -
 packages/checkout/blocks-registry/types.ts    |  1 +
 7 files changed, 6 insertions(+), 70 deletions(-)
 delete mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx
 delete mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.tsx

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
index 945166fa1b2..0d6814ee2d4 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
@@ -24,7 +24,7 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/empty-mini-cart-contents-block" ],
+	"parent": [ "woocommerce/mini-cart-footer-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
index d27e725cea5..e6e4424a974 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
@@ -24,7 +24,7 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/empty-mini-cart-contents-block" ],
+	"parent": [ "woocommerce/mini-cart-footer-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx
deleted file mode 100644
index 020b7acc03c..00000000000
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	defaultCartButtonLabel,
-	defaultCheckoutButtonLabel,
-} from './constants';
-
-export default {
-	cartButtonLabel: {
-		type: 'string',
-		default: defaultCartButtonLabel,
-	},
-	checkoutButtonLabel: {
-		type: 'string',
-		default: defaultCheckoutButtonLabel,
-	},
-};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 5d4ddff405e..b66b9c55e53 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -11,19 +11,9 @@ import {
 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 { PaymentEventsProvider } from '@woocommerce/base-context';
 import classNames from 'classnames';
 
-/**
- * Internal dependencies
- */
-import {
-	defaultCartButtonLabel,
-	defaultCheckoutButtonLabel,
-} from './constants';
-
 const PaymentMethodIconsElement = (): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
 	return (
@@ -34,16 +24,11 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 };
 
 interface Props {
+	children: JSX.Element | JSX.Element[];
 	className?: string;
-	cartButtonLabel: string;
-	checkoutButtonLabel: string;
 }
 
-const Block = ( {
-	className,
-	cartButtonLabel,
-	checkoutButtonLabel,
-}: Props ): JSX.Element => {
+const Block = ( { children, className }: Props ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
 	const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
 		? parseInt( cartTotals.total_items, 10 ) +
@@ -65,23 +50,7 @@ const Block = ( {
 				) }
 			/>
 			<div className="wc-block-mini-cart__footer-actions">
-				{ CART_URL && (
-					<Button
-						className="wc-block-mini-cart__footer-cart"
-						href={ CART_URL }
-						variant="outlined"
-					>
-						{ cartButtonLabel || defaultCartButtonLabel }
-					</Button>
-				) }
-				{ CHECKOUT_URL && (
-					<Button
-						className="wc-block-mini-cart__footer-checkout"
-						href={ CHECKOUT_URL }
-					>
-						{ checkoutButtonLabel || defaultCheckoutButtonLabel }
-					</Button>
-				) }
+				{ children }
 			</div>
 			<PaymentEventsProvider>
 				<PaymentMethodIconsElement />
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.tsx
deleted file mode 100644
index fdd6ab9216c..00000000000
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const defaultCartButtonLabel = __(
-	'View my cart',
-	'woo-gutenberg-products-block'
-);
-
-export const defaultCheckoutButtonLabel = __(
-	'Go to checkout',
-	'woo-gutenberg-products-block'
-);
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
index 81f6901cbbf..d3cb9bf40a5 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
@@ -8,7 +8,6 @@ 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
@@ -22,7 +21,6 @@ registerBlockType( 'woocommerce/mini-cart-footer-block', {
 			/>
 		),
 	},
-	attributes,
 	edit: Edit,
 	save: Save,
 } );
diff --git a/packages/checkout/blocks-registry/types.ts b/packages/checkout/blocks-registry/types.ts
index 6516621092e..3d0ab6f710a 100644
--- a/packages/checkout/blocks-registry/types.ts
+++ b/packages/checkout/blocks-registry/types.ts
@@ -26,6 +26,7 @@ export enum innerBlockAreas {
 	EMPTY_MINI_CART = 'woocommerce/empty-mini-cart-contents-block',
 	FILLED_MINI_CART = 'woocommerce/filled-mini-cart-contents-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',
 	CHECKOUT_ORDER_SUMMARY = 'woocommerce/checkout-order-summary-block',
 }

From 6b07b45c9effb74e1f71f00efda692350640f275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Fri, 17 Mar 2023 09:47:48 +0100
Subject: [PATCH 04/24] Fix buttons size

---
 assets/js/blocks/mini-cart/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index 59bf5baa9dc..072172d9cc0 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -179,6 +179,7 @@ h2.wc-block-mini-cart__title {
 		.wc-block-components-button,
 		.wp-block-button {
 			flex-grow: 1;
+			display: inline-flex;
 		}
 
 		.wc-block-components-button.outlined {

From a6f1a325cd9d7ccefd5593e9510eeefed9107420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Fri, 17 Mar 2023 09:51:35 +0100
Subject: [PATCH 05/24] Add outline to the cart button

---
 .../inner-blocks/mini-cart-cart-button-block/block.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index 874bb940321..eb93147c4b9 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -27,6 +27,7 @@ const Block = ( {
 					'wc-block-mini-cart__cart-button'
 				) }
 				href={ SHOP_URL }
+				variant="outlined"
 			>
 				{ cartButtonLabel || defaultCartButtonLabel }
 			</Button>

From e8728abb22fe57cb705fa6f14c06a3743d99fa0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Fri, 17 Mar 2023 10:26:00 +0100
Subject: [PATCH 06/24] Add color props

---
 .../inner-blocks/mini-cart-cart-button-block/block.tsx   | 9 ++++++++-
 .../mini-cart-checkout-button-block/block.tsx            | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index eb93147c4b9..8e61d6be416 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -4,6 +4,7 @@
 import { SHOP_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import classNames from 'classnames';
+import { useColorProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -11,21 +12,27 @@ import classNames from 'classnames';
 import { defaultCartButtonLabel } from './constants';
 
 type MiniCartCartButtonBlockProps = {
-	className: string;
 	cartButtonLabel: string;
+	className: string;
+	style: string;
 };
 
 const Block = ( {
 	className,
 	cartButtonLabel,
+	style,
 }: MiniCartCartButtonBlockProps ): JSX.Element | null => {
+	const colorProps = useColorProps( { style } );
+
 	return (
 		<div className="wp-block-button has-text-align-center">
 			<Button
 				className={ classNames(
 					className,
+					colorProps.className,
 					'wc-block-mini-cart__cart-button'
 				) }
+				style={ { ...colorProps.style } }
 				href={ SHOP_URL }
 				variant="outlined"
 			>
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index 60d4f81eea3..a3308e62f04 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -4,6 +4,7 @@
 import { SHOP_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import classNames from 'classnames';
+import { useColorProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -11,21 +12,27 @@ import classNames from 'classnames';
 import { defaultCheckoutButtonLabel } from './constants';
 
 type MiniCartCheckoutButtonBlockProps = {
-	className: string;
 	checkoutButtonLabel: string;
+	className: string;
+	style: string;
 };
 
 const Block = ( {
 	className,
 	checkoutButtonLabel,
+	style,
 }: MiniCartCheckoutButtonBlockProps ): JSX.Element | null => {
+	const colorProps = useColorProps( { style } );
+
 	return (
 		<div className="wp-block-button has-text-align-center">
 			<Button
 				className={ classNames(
 					className,
+					colorProps.className,
 					'wc-block-mini-cart__checkout-button'
 				) }
+				style={ { ...colorProps.style } }
 				href={ SHOP_URL }
 			>
 				{ checkoutButtonLabel || defaultCheckoutButtonLabel }

From b490b850565e81477dc0eb1b2566850cd3caceda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Fri, 17 Mar 2023 11:21:00 +0100
Subject: [PATCH 07/24] Add urls

---
 .../mini-cart-cart-button-block/block.tsx     | 28 ++++++++++---------
 .../mini-cart-checkout-button-block/block.tsx | 26 +++++++++--------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index 8e61d6be416..f18905e65ce 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SHOP_URL } from '@woocommerce/block-settings';
+import { CART_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import classNames from 'classnames';
 import { useColorProps } from '@woocommerce/base-hooks';
@@ -26,18 +26,20 @@ const Block = ( {
 
 	return (
 		<div className="wp-block-button has-text-align-center">
-			<Button
-				className={ classNames(
-					className,
-					colorProps.className,
-					'wc-block-mini-cart__cart-button'
-				) }
-				style={ { ...colorProps.style } }
-				href={ SHOP_URL }
-				variant="outlined"
-			>
-				{ cartButtonLabel || defaultCartButtonLabel }
-			</Button>
+			{ CART_URL && (
+				<Button
+					className={ classNames(
+						className,
+						colorProps.className,
+						'wc-block-mini-cart__cart-button'
+					) }
+					style={ { ...colorProps.style } }
+					href={ CART_URL }
+					variant="outlined"
+				>
+					{ cartButtonLabel || defaultCartButtonLabel }
+				</Button>
+			) }
 		</div>
 	);
 };
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index a3308e62f04..40f5ff4fd09 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SHOP_URL } from '@woocommerce/block-settings';
+import { CHECKOUT_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import classNames from 'classnames';
 import { useColorProps } from '@woocommerce/base-hooks';
@@ -26,17 +26,19 @@ const Block = ( {
 
 	return (
 		<div className="wp-block-button has-text-align-center">
-			<Button
-				className={ classNames(
-					className,
-					colorProps.className,
-					'wc-block-mini-cart__checkout-button'
-				) }
-				style={ { ...colorProps.style } }
-				href={ SHOP_URL }
-			>
-				{ checkoutButtonLabel || defaultCheckoutButtonLabel }
-			</Button>
+			{ CHECKOUT_URL && (
+				<Button
+					className={ classNames(
+						className,
+						colorProps.className,
+						'wc-block-mini-cart__checkout-button'
+					) }
+					style={ { ...colorProps.style } }
+					href={ CHECKOUT_URL }
+				>
+					{ checkoutButtonLabel || defaultCheckoutButtonLabel }
+				</Button>
+			) }
 		</div>
 	);
 };

From affe76f3d463b504e4b1415c6f921544fe8fd10a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Fri, 17 Mar 2023 11:54:37 +0100
Subject: [PATCH 08/24] Fix button classes

---
 .../inner-blocks/mini-cart-cart-button-block/block.tsx          | 2 +-
 .../inner-blocks/mini-cart-checkout-button-block/block.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index f18905e65ce..2e0d814d19c 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -31,7 +31,7 @@ const Block = ( {
 					className={ classNames(
 						className,
 						colorProps.className,
-						'wc-block-mini-cart__cart-button'
+						'wc-block-mini-cart__footer-cart'
 					) }
 					style={ { ...colorProps.style } }
 					href={ CART_URL }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index 40f5ff4fd09..708a6ce03d2 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -31,7 +31,7 @@ const Block = ( {
 					className={ classNames(
 						className,
 						colorProps.className,
-						'wc-block-mini-cart__checkout-button'
+						'wc-block-mini-cart__footer-checkout'
 					) }
 					style={ { ...colorProps.style } }
 					href={ CHECKOUT_URL }

From 676a76b45dc587ab4ba30eb6aa8c993833e83a4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Fri, 17 Mar 2023 12:47:06 +0100
Subject: [PATCH 09/24] Add classes to edit

---
 .../inner-blocks/mini-cart-cart-button-block/edit.tsx        | 2 +-
 .../inner-blocks/mini-cart-checkout-button-block/edit.tsx    | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
index 4a440f75f3f..5c081d184a6 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
@@ -24,7 +24,7 @@ export const Edit = ( {
 	return (
 		<Button
 			{ ...blockProps }
-			className="wc-block-mini-cart__cart-button"
+			className="wc-block-mini-cart__footer-cart"
 			variant="outlined"
 		>
 			<RichText
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
index 839e0a34b4d..9c36535c65a 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
@@ -22,7 +22,10 @@ export const Edit = ( {
 	const { checkoutButtonLabel } = attributes;
 
 	return (
-		<Button { ...blockProps } className="checkout">
+		<Button
+			{ ...blockProps }
+			className="wc-block-mini-cart__footer-checkout"
+		>
 			<RichText
 				multiline={ false }
 				allowedFormats={ [] }

From 3256614f9ae4af1f5ab6d4eb922ec866c02b6204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Fri, 17 Mar 2023 13:44:25 +0100
Subject: [PATCH 10/24] Start using editable button

---
 .../mini-cart-cart-button-block/edit.tsx      | 27 ++++++++-----------
 .../mini-cart-checkout-button-block/edit.tsx  | 27 ++++++++-----------
 2 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
index 5c081d184a6..271badd7df2 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { useBlockProps, RichText } from '@wordpress/block-editor';
-import Button from '@woocommerce/base-components/button';
+import { useBlockProps } from '@wordpress/block-editor';
+import EditableButton from '@woocommerce/editor-components/editable-button';
 
 /**
  * Internal dependencies
@@ -22,23 +22,18 @@ export const Edit = ( {
 	const { cartButtonLabel } = attributes;
 
 	return (
-		<Button
+		<EditableButton
 			{ ...blockProps }
 			className="wc-block-mini-cart__footer-cart"
 			variant="outlined"
-		>
-			<RichText
-				multiline={ false }
-				allowedFormats={ [] }
-				value={ cartButtonLabel }
-				placeholder={ defaultCartButtonLabel }
-				onChange={ ( content ) => {
-					setAttributes( {
-						cartButtonLabel: content,
-					} );
-				} }
-			/>
-		</Button>
+			value={ cartButtonLabel }
+			placeholder={ defaultCartButtonLabel }
+			onChange={ ( content ) => {
+				setAttributes( {
+					cartButtonLabel: content,
+				} );
+			} }
+		/>
 	);
 };
 
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
index 9c36535c65a..dff86ba1e4c 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { useBlockProps, RichText } from '@wordpress/block-editor';
-import Button from '@woocommerce/base-components/button';
+import { useBlockProps } from '@wordpress/block-editor';
+import EditableButton from '@woocommerce/editor-components/editable-button';
 
 /**
  * Internal dependencies
@@ -22,22 +22,17 @@ export const Edit = ( {
 	const { checkoutButtonLabel } = attributes;
 
 	return (
-		<Button
+		<EditableButton
 			{ ...blockProps }
 			className="wc-block-mini-cart__footer-checkout"
-		>
-			<RichText
-				multiline={ false }
-				allowedFormats={ [] }
-				value={ checkoutButtonLabel }
-				placeholder={ defaultCheckoutButtonLabel }
-				onChange={ ( content ) => {
-					setAttributes( {
-						checkoutButtonLabel: content,
-					} );
-				} }
-			/>
-		</Button>
+			value={ checkoutButtonLabel }
+			placeholder={ defaultCheckoutButtonLabel }
+			onChange={ ( content ) => {
+				setAttributes( {
+					checkoutButtonLabel: content,
+				} );
+			} }
+		/>
 	);
 };
 

From 6ecc8bd2a31f8dae1b211b0c98d8d2c4ca5e7539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 20 Mar 2023 09:13:47 +0100
Subject: [PATCH 11/24] Add buttons to mini cart tempalte

---
 templates/parts/mini-cart.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/templates/parts/mini-cart.html b/templates/parts/mini-cart.html
index ce618459183..4d3e6a91f23 100644
--- a/templates/parts/mini-cart.html
+++ b/templates/parts/mini-cart.html
@@ -16,6 +16,12 @@
 		<!-- /wp:woocommerce/mini-cart-items-block -->
 		<!-- wp:woocommerce/mini-cart-footer-block -->
 		<div class="wp-block-woocommerce-mini-cart-footer-block">
+			<!-- wp:woocommerce/mini-cart-checkout-button-block -->
+			<div class="wp-block-woocommerce-mini-cart-checkout-button-block"></div>
+			<!-- /wp:woocommerce/mini-cart-checkout-button-block -->
+			<!-- wp:woocommerce/mini-cart-cart-button-block -->
+			<div class="wp-block-woocommerce-mini-cart-cart-button-block"></div>
+			<!-- /wp:woocommerce/mini-cart-cart-button-block -->
 		</div>
 		<!-- /wp:woocommerce/mini-cart-footer-block -->
 	</div>

From 141a007081510bf53803a2c3e9315aad99919ed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 20 Mar 2023 09:23:22 +0100
Subject: [PATCH 12/24] Reorder buttons in template

---
 templates/parts/mini-cart.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/parts/mini-cart.html b/templates/parts/mini-cart.html
index 4d3e6a91f23..5b25a38acaa 100644
--- a/templates/parts/mini-cart.html
+++ b/templates/parts/mini-cart.html
@@ -16,12 +16,12 @@
 		<!-- /wp:woocommerce/mini-cart-items-block -->
 		<!-- wp:woocommerce/mini-cart-footer-block -->
 		<div class="wp-block-woocommerce-mini-cart-footer-block">
-			<!-- wp:woocommerce/mini-cart-checkout-button-block -->
-			<div class="wp-block-woocommerce-mini-cart-checkout-button-block"></div>
-			<!-- /wp:woocommerce/mini-cart-checkout-button-block -->
 			<!-- wp:woocommerce/mini-cart-cart-button-block -->
 			<div class="wp-block-woocommerce-mini-cart-cart-button-block"></div>
 			<!-- /wp:woocommerce/mini-cart-cart-button-block -->
+			<!-- wp:woocommerce/mini-cart-checkout-button-block -->
+			<div class="wp-block-woocommerce-mini-cart-checkout-button-block"></div>
+			<!-- /wp:woocommerce/mini-cart-checkout-button-block -->
 		</div>
 		<!-- /wp:woocommerce/mini-cart-footer-block -->
 	</div>

From e6a3bfc80b4f3a86556bec14d8349ba0828567e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 20 Mar 2023 15:35:32 +0100
Subject: [PATCH 13/24] Add cart & checkout buttons scripts

---
 src/BlockTypes/MiniCart.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index 3b2bd18b38f..56ac7201d1c 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -280,6 +280,8 @@ public function print_lazy_load_scripts() {
 				'items-frontend',
 				'footer-frontend',
 				'products-table-frontend',
+				'cart-button-frontend',
+				'checkout-button-frontend',
 			);
 		}
 		foreach ( $inner_blocks_frontend_scripts as $inner_block_frontend_script ) {

From c2447c3df981eb4ab00101b25f94542b954b1639 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 20 Mar 2023 15:46:11 +0100
Subject: [PATCH 14/24] Remove unnecessary divs

---
 .../mini-cart-cart-button-block/block.tsx     | 30 +++++++++----------
 .../mini-cart-checkout-button-block/block.tsx | 28 ++++++++---------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index 2e0d814d19c..cf383cff1d8 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -24,23 +24,23 @@ const Block = ( {
 }: MiniCartCartButtonBlockProps ): JSX.Element | null => {
 	const colorProps = useColorProps( { style } );
 
+	if ( ! CART_URL ) {
+		return null;
+	}
+
 	return (
-		<div className="wp-block-button has-text-align-center">
-			{ CART_URL && (
-				<Button
-					className={ classNames(
-						className,
-						colorProps.className,
-						'wc-block-mini-cart__footer-cart'
-					) }
-					style={ { ...colorProps.style } }
-					href={ CART_URL }
-					variant="outlined"
-				>
-					{ cartButtonLabel || defaultCartButtonLabel }
-				</Button>
+		<Button
+			className={ classNames(
+				className,
+				colorProps.className,
+				'wc-block-mini-cart__footer-cart'
 			) }
-		</div>
+			style={ { ...colorProps.style } }
+			href={ CART_URL }
+			variant="outlined"
+		>
+			{ cartButtonLabel || defaultCartButtonLabel }
+		</Button>
 	);
 };
 
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index 708a6ce03d2..521cb198bf0 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -24,22 +24,22 @@ const Block = ( {
 }: MiniCartCheckoutButtonBlockProps ): JSX.Element | null => {
 	const colorProps = useColorProps( { style } );
 
+	if ( ! CHECKOUT_URL ) {
+		return null;
+	}
+
 	return (
-		<div className="wp-block-button has-text-align-center">
-			{ CHECKOUT_URL && (
-				<Button
-					className={ classNames(
-						className,
-						colorProps.className,
-						'wc-block-mini-cart__footer-checkout'
-					) }
-					style={ { ...colorProps.style } }
-					href={ CHECKOUT_URL }
-				>
-					{ checkoutButtonLabel || defaultCheckoutButtonLabel }
-				</Button>
+		<Button
+			className={ classNames(
+				className,
+				colorProps.className,
+				'wc-block-mini-cart__footer-checkout'
 			) }
-		</div>
+			style={ { ...colorProps.style } }
+			href={ CHECKOUT_URL }
+		>
+			{ checkoutButtonLabel || defaultCheckoutButtonLabel }
+		</Button>
 	);
 };
 

From 799b59680385a3c6c910245735557e10c065ff3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 20 Mar 2023 15:47:22 +0100
Subject: [PATCH 15/24] Change checkout button block name

---
 .../inner-blocks/mini-cart-checkout-button-block/block.json     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
index e6e4424a974..e630a23bd23 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
@@ -1,7 +1,7 @@
 {
 	"name": "woocommerce/mini-cart-checkout-button-block",
 	"version": "1.0.0",
-	"title": "Mini Cart Checkout Button",
+	"title": "Mini Cart Proceed to Checkout Button",
 	"description": "Block that displays the checkout button when the Mini Cart has products.",
 	"category": "woocommerce",
 	"supports": {

From ec00c8bb2740ad86802c5152e3973e0f20b762a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 20 Mar 2023 15:48:29 +0100
Subject: [PATCH 16/24] Change cart button block name

---
 .../inner-blocks/mini-cart-cart-button-block/block.json         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
index 0d6814ee2d4..ad20847e016 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
@@ -1,7 +1,7 @@
 {
 	"name": "woocommerce/mini-cart-cart-button-block",
 	"version": "1.0.0",
-	"title": "Mini Cart Cart Button",
+	"title": "Mini Cart View Cart Button",
 	"description": "Block that displays the cart button when the Mini Cart has products.",
 	"category": "woocommerce",
 	"supports": {

From ed78b997a6a64e6571fb38b6ebfe7433e7746750 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 21 Mar 2023 12:23:27 +0100
Subject: [PATCH 17/24] Add deprecation to the buttons

---
 .../mini-cart-footer-block/attributes.tsx     | 18 ++++++
 .../mini-cart-footer-block/block.tsx          | 63 ++++++++++++++++++-
 .../mini-cart-footer-block/constants.ts       | 14 +++++
 .../mini-cart-footer-block/index.tsx          | 50 ++++++++++++++-
 4 files changed, 142 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.ts

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx
new file mode 100644
index 00000000000..020b7acc03c
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import {
+	defaultCartButtonLabel,
+	defaultCheckoutButtonLabel,
+} from './constants';
+
+export default {
+	cartButtonLabel: {
+		type: 'string',
+		default: defaultCartButtonLabel,
+	},
+	checkoutButtonLabel: {
+		type: 'string',
+		default: defaultCheckoutButtonLabel,
+	},
+};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index b66b9c55e53..e1db721307a 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -14,6 +14,12 @@ import { getSetting } from '@woocommerce/settings';
 import { PaymentEventsProvider } from '@woocommerce/base-context';
 import classNames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import CartButton from '../mini-cart-cart-button-block/block';
+import CheckoutButton from '../mini-cart-checkout-button-block/block';
+
 const PaymentMethodIconsElement = (): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
 	return (
@@ -26,15 +32,60 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 interface Props {
 	children: JSX.Element | JSX.Element[];
 	className?: string;
+	cartButtonLabel: string;
+	checkoutButtonLabel: string;
 }
+//
+// const CartButton = ( {
+// 	url,
+// 	label,
+// }: {
+// 	url: string;
+// 	label: string;
+// } ): JSX.Element | null => {
+// 	if ( ! url ) {
+// 		return null;
+// 	}
+//
+// 	return (
+// 		<Button
+// 			className="wc-block-mini-cart__footer-cart"
+// 			href={ url }
+// 			variant="outlined"
+// 		>
+// 			{ label }
+// 		</Button>
+// 	);
+// };
+// const CheckoutButton = ( {
+// 	url,
+// 	label,
+// }: {
+// 	url: string;
+// 	label: string;
+// } ): JSX.Element | null => {
+// 	if ( ! url ) {
+// 		return null;
+// 	}
+// 	return (
+// 		<Button className="wc-block-mini-cart__footer-checkout" href={ url }>
+// 			{ label }
+// 		</Button>
+// 	);
+// };
 
-const Block = ( { children, className }: Props ): JSX.Element => {
+const Block = ( {
+	children,
+	className,
+	cartButtonLabel,
+	checkoutButtonLabel,
+}: Props ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
 	const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
 		? parseInt( cartTotals.total_items, 10 ) +
 		  parseInt( cartTotals.total_items_tax, 10 )
 		: parseInt( cartTotals.total_items, 10 );
-
+	console.log( { children }, cartButtonLabel, checkoutButtonLabel );
 	return (
 		<div
 			className={ classNames( className, 'wc-block-mini-cart__footer' ) }
@@ -51,6 +102,14 @@ const Block = ( { children, className }: Props ): JSX.Element => {
 			/>
 			<div className="wc-block-mini-cart__footer-actions">
 				{ children }
+				{ cartButtonLabel && (
+					<CartButton cartButtonLabel={ cartButtonLabel } />
+				) }
+				{ checkoutButtonLabel && (
+					<CheckoutButton
+						checkoutButtonLabel={ checkoutButtonLabel }
+					/>
+				) }
 			</div>
 			<PaymentEventsProvider>
 				<PaymentMethodIconsElement />
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.ts b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.ts
new file mode 100644
index 00000000000..fdd6ab9216c
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.ts
@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const defaultCartButtonLabel = __(
+	'View my cart',
+	'woo-gutenberg-products-block'
+);
+
+export const defaultCheckoutButtonLabel = __(
+	'Go to checkout',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
index d3cb9bf40a5..c51cfb5646e 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
@@ -2,12 +2,20 @@
  * External dependencies
  */
 import { Icon, payment } from '@wordpress/icons';
-import { registerBlockType } from '@wordpress/blocks';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
+import deprecatedAttributes from './attributes';
+import { objectHasProp } from '@woocommerce/types';
+
+const deprecatedSave = (): JSX.Element => {
+	console.log( 'deprecatedSave' );
+	return <div { ...useBlockProps.save() }></div>;
+};
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore -- TypeScript expects some required properties which we already
@@ -21,6 +29,46 @@ registerBlockType( 'woocommerce/mini-cart-footer-block', {
 			/>
 		),
 	},
+	deprecated: [
+		{
+			attributes: deprecatedAttributes,
+
+			migrate( attributes, innerBlocks ) {
+				console.log( 'migrate' );
+				const {
+					cartButtonLabel,
+					checkoutButtonLabel,
+					...restAttributes
+				} = attributes;
+
+				return [
+					restAttributes,
+					[
+						createBlock(
+							'woocommerce/mini-cart-cart-button-block',
+							{
+								cartButtonLabel,
+							}
+						),
+						createBlock(
+							'woocommerce/mini-cart-checkout-button-block',
+							{
+								checkoutButtonLabel,
+							}
+						),
+						...innerBlocks,
+					],
+				];
+			},
+			isEligible: ( attributes ) => {
+				return (
+					objectHasProp( attributes, 'cartButtonLabel' ) &&
+					objectHasProp( attributes, 'checkoutButtonLabel' )
+				);
+			},
+			save: deprecatedSave,
+		},
+	],
 	edit: Edit,
 	save: Save,
 } );

From 81adee806c7aaa01b040e3be1befce784b977ba0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 21 Mar 2023 13:53:59 +0100
Subject: [PATCH 18/24] Fix lint and inline save

---
 .../inner-blocks/mini-cart-footer-block/block.tsx    |  2 +-
 .../inner-blocks/mini-cart-footer-block/index.tsx    | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index e1db721307a..51498882ba0 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -85,7 +85,7 @@ const Block = ( {
 		? parseInt( cartTotals.total_items, 10 ) +
 		  parseInt( cartTotals.total_items_tax, 10 )
 		: parseInt( cartTotals.total_items, 10 );
-	console.log( { children }, cartButtonLabel, checkoutButtonLabel );
+
 	return (
 		<div
 			className={ classNames( className, 'wc-block-mini-cart__footer' ) }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
index c51cfb5646e..670300a06ed 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
@@ -4,18 +4,13 @@
 import { Icon, payment } from '@wordpress/icons';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
+import { objectHasProp } from '@woocommerce/types';
 
 /**
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
 import deprecatedAttributes from './attributes';
-import { objectHasProp } from '@woocommerce/types';
-
-const deprecatedSave = (): JSX.Element => {
-	console.log( 'deprecatedSave' );
-	return <div { ...useBlockProps.save() }></div>;
-};
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore -- TypeScript expects some required properties which we already
@@ -34,7 +29,6 @@ registerBlockType( 'woocommerce/mini-cart-footer-block', {
 			attributes: deprecatedAttributes,
 
 			migrate( attributes, innerBlocks ) {
-				console.log( 'migrate' );
 				const {
 					cartButtonLabel,
 					checkoutButtonLabel,
@@ -66,7 +60,9 @@ registerBlockType( 'woocommerce/mini-cart-footer-block', {
 					objectHasProp( attributes, 'checkoutButtonLabel' )
 				);
 			},
-			save: deprecatedSave,
+			save: (): JSX.Element => {
+				return <div { ...useBlockProps.save() }></div>;
+			},
 		},
 	],
 	edit: Edit,

From 212268440d02f2c16088a10dcf9c729e6ca5c090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Wed, 22 Mar 2023 10:45:52 +0100
Subject: [PATCH 19/24] Remove commented out code and fix condition

---
 .../mini-cart-footer-block/block.tsx          | 38 -------------------
 .../mini-cart-footer-block/index.tsx          |  2 +-
 2 files changed, 1 insertion(+), 39 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 51498882ba0..7b615c65342 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -35,44 +35,6 @@ interface Props {
 	cartButtonLabel: string;
 	checkoutButtonLabel: string;
 }
-//
-// const CartButton = ( {
-// 	url,
-// 	label,
-// }: {
-// 	url: string;
-// 	label: string;
-// } ): JSX.Element | null => {
-// 	if ( ! url ) {
-// 		return null;
-// 	}
-//
-// 	return (
-// 		<Button
-// 			className="wc-block-mini-cart__footer-cart"
-// 			href={ url }
-// 			variant="outlined"
-// 		>
-// 			{ label }
-// 		</Button>
-// 	);
-// };
-// const CheckoutButton = ( {
-// 	url,
-// 	label,
-// }: {
-// 	url: string;
-// 	label: string;
-// } ): JSX.Element | null => {
-// 	if ( ! url ) {
-// 		return null;
-// 	}
-// 	return (
-// 		<Button className="wc-block-mini-cart__footer-checkout" href={ url }>
-// 			{ label }
-// 		</Button>
-// 	);
-// };
 
 const Block = ( {
 	children,
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
index 670300a06ed..0b64e9906c2 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
@@ -56,7 +56,7 @@ registerBlockType( 'woocommerce/mini-cart-footer-block', {
 			},
 			isEligible: ( attributes ) => {
 				return (
-					objectHasProp( attributes, 'cartButtonLabel' ) &&
+					objectHasProp( attributes, 'cartButtonLabel' ) ||
 					objectHasProp( attributes, 'checkoutButtonLabel' )
 				);
 			},

From e154c17159ef585e8ae4aada8ac664126751eae4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Wed, 22 Mar 2023 14:50:02 +0100
Subject: [PATCH 20/24] Render buttons if no children

---
 .../mini-cart-footer-block/block.tsx          | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 7b615c65342..417d3c03487 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -13,6 +13,7 @@ import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 import { getSetting } from '@woocommerce/settings';
 import { PaymentEventsProvider } from '@woocommerce/base-context';
 import classNames from 'classnames';
+import { isString } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -36,6 +37,15 @@ interface Props {
 	checkoutButtonLabel: string;
 }
 
+const hasChildrenButton = ( children ): boolean => {
+	return children.some( ( child ) => {
+		if ( Array.isArray( child ) ) {
+			return hasChildrenButton( child );
+		}
+		return child !== null && ! isString( child ) && child.key !== null;
+	} );
+};
+
 const Block = ( {
 	children,
 	className,
@@ -48,6 +58,8 @@ const Block = ( {
 		  parseInt( cartTotals.total_items_tax, 10 )
 		: parseInt( cartTotals.total_items, 10 );
 
+	const hasButtons = hasChildrenButton( children );
+
 	return (
 		<div
 			className={ classNames( className, 'wc-block-mini-cart__footer' ) }
@@ -63,14 +75,15 @@ const Block = ( {
 				) }
 			/>
 			<div className="wc-block-mini-cart__footer-actions">
-				{ children }
-				{ cartButtonLabel && (
-					<CartButton cartButtonLabel={ cartButtonLabel } />
-				) }
-				{ checkoutButtonLabel && (
-					<CheckoutButton
-						checkoutButtonLabel={ checkoutButtonLabel }
-					/>
+				{ hasButtons ? (
+					children
+				) : (
+					<>
+						<CartButton cartButtonLabel={ cartButtonLabel } />
+						<CheckoutButton
+							checkoutButtonLabel={ checkoutButtonLabel }
+						/>
+					</>
 				) }
 			</div>
 			<PaymentEventsProvider>

From 5fba109813c0c614f4d4d6b19f77cc59a09ec6df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Wed, 22 Mar 2023 15:03:30 +0100
Subject: [PATCH 21/24] Change migrate condition

---
 .../inner-blocks/mini-cart-footer-block/block.tsx         | 6 +++---
 .../inner-blocks/mini-cart-footer-block/index.tsx         | 8 ++------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 417d3c03487..8519649556c 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -37,10 +37,10 @@ interface Props {
 	checkoutButtonLabel: string;
 }
 
-const hasChildrenButton = ( children ): boolean => {
+const hasChildren = ( children ): boolean => {
 	return children.some( ( child ) => {
 		if ( Array.isArray( child ) ) {
-			return hasChildrenButton( child );
+			return hasChildren( child );
 		}
 		return child !== null && ! isString( child ) && child.key !== null;
 	} );
@@ -58,7 +58,7 @@ const Block = ( {
 		  parseInt( cartTotals.total_items_tax, 10 )
 		: parseInt( cartTotals.total_items, 10 );
 
-	const hasButtons = hasChildrenButton( children );
+	const hasButtons = hasChildren( children );
 
 	return (
 		<div
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
index 0b64e9906c2..3fd3816264a 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
@@ -4,7 +4,6 @@
 import { Icon, payment } from '@wordpress/icons';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
-import { objectHasProp } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -54,11 +53,8 @@ registerBlockType( 'woocommerce/mini-cart-footer-block', {
 					],
 				];
 			},
-			isEligible: ( attributes ) => {
-				return (
-					objectHasProp( attributes, 'cartButtonLabel' ) ||
-					objectHasProp( attributes, 'checkoutButtonLabel' )
-				);
+			isEligible: ( attributes, innerBlocks ) => {
+				return ! innerBlocks.length;
 			},
 			save: (): JSX.Element => {
 				return <div { ...useBlockProps.save() }></div>;

From 47ffd3baf19953d692aff2ea0fe130398bb77ecf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <albarin@users.noreply.github.com>
Date: Thu, 23 Mar 2023 16:36:10 +0100
Subject: [PATCH 22/24] Simplify condition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
---
 .../inner-blocks/mini-cart-footer-block/block.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 8519649556c..8f9c232775d 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -42,7 +42,7 @@ const hasChildren = ( children ): boolean => {
 		if ( Array.isArray( child ) ) {
 			return hasChildren( child );
 		}
-		return child !== null && ! isString( child ) && child.key !== null;
+		return isObject( child ) && child.key !== null;
 	} );
 };
 

From 1f3cb7f6a7ed6238cccc150798d937ed8c1c2f0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 23 Mar 2023 16:38:16 +0100
Subject: [PATCH 23/24] Make props optional

---
 .../inner-blocks/mini-cart-cart-button-block/block.tsx      | 6 +++---
 .../inner-blocks/mini-cart-checkout-button-block/block.tsx  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index cf383cff1d8..56ed78ce4a7 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -12,9 +12,9 @@ import { useColorProps } from '@woocommerce/base-hooks';
 import { defaultCartButtonLabel } from './constants';
 
 type MiniCartCartButtonBlockProps = {
-	cartButtonLabel: string;
-	className: string;
-	style: string;
+	cartButtonLabel?: string;
+	className?: string;
+	style?: string;
 };
 
 const Block = ( {
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index 521cb198bf0..35e05a6284c 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -12,9 +12,9 @@ import { useColorProps } from '@woocommerce/base-hooks';
 import { defaultCheckoutButtonLabel } from './constants';
 
 type MiniCartCheckoutButtonBlockProps = {
-	checkoutButtonLabel: string;
-	className: string;
-	style: string;
+	checkoutButtonLabel?: string;
+	className?: string;
+	style?: string;
 };
 
 const Block = ( {

From 7e2e03d77bf717e9646c568844b1258905bb887d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 23 Mar 2023 16:40:18 +0100
Subject: [PATCH 24/24] Add missing import

---
 .../inner-blocks/mini-cart-footer-block/block.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 8f9c232775d..1ce199d41a3 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -13,7 +13,7 @@ import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 import { getSetting } from '@woocommerce/settings';
 import { PaymentEventsProvider } from '@woocommerce/base-context';
 import classNames from 'classnames';
-import { isString } from '@woocommerce/types';
+import { isObject } from '@woocommerce/types';
 
 /**
  * Internal dependencies