Add style to the Mini Cart buttons

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

@@ -8,3 +8,5 @@ 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';
+import './mini-cart-checkout-button-block';

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,
+	},
+};

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/mini-cart-footer-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

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

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { CART_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import classNames from 'classnames';
+import { useColorProps } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCartButtonLabel } from './constants';
+
+type MiniCartCartButtonBlockProps = {
+	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">
+			{ 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>
+			) }
+		</div>
+	);
+};
+
+export default Block;

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'
+);

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import EditableButton from '@woocommerce/editor-components/editable-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 (
+		<EditableButton
+			{ ...blockProps }
+			className="wc-block-mini-cart__footer-cart"
+			variant="outlined"
+			value={ cartButtonLabel }
+			placeholder={ defaultCartButtonLabel }
+			onChange={ ( content ) => {
+				setAttributes( {
+					cartButtonLabel: content,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() }></div>;
+};

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,
+} );

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,
+	},
+};

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/mini-cart-footer-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { CHECKOUT_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import classNames from 'classnames';
+import { useColorProps } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCheckoutButtonLabel } from './constants';
+
+type MiniCartCheckoutButtonBlockProps = {
+	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">
+			{ CHECKOUT_URL && (
+				<Button
+					className={ classNames(
+						className,
+						colorProps.className,
+						'wc-block-mini-cart__footer-checkout'
+					) }
+					style={ { ...colorProps.style } }
+					href={ CHECKOUT_URL }
+				>
+					{ checkoutButtonLabel || defaultCheckoutButtonLabel }
+				</Button>
+			) }
+		</div>
+	);
+};
+
+export default Block;

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.tsx → assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx

@@ -3,11 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 
-export const defaultCartButtonLabel = __(
-	'View my cart',
-	'woo-gutenberg-products-block'
-);
-
 export const defaultCheckoutButtonLabel = __(
 	'Go to checkout',
 	'woo-gutenberg-products-block'

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

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import EditableButton from '@woocommerce/editor-components/editable-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 (
+		<EditableButton
+			{ ...blockProps }
+			className="wc-block-mini-cart__footer-checkout"
+			value={ checkoutButtonLabel }
+			placeholder={ defaultCheckoutButtonLabel }
+			onChange={ ( content ) => {
+				setAttributes( {
+					checkoutButtonLabel: content,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() }></div>;
+};

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,
+} );