Add styles to the `Start shopping` button (https://github.com/woocommerce/woocommerce-blocks/pull/8766)

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

@@ -9,7 +9,11 @@
 		"html": false,
 		"multiple": false,
 		"reusable": false,
-		"inserter": true
+		"inserter": true,
+		"color": {
+			"text": true,
+			"background": true
+		}
 	},
 	"attributes": {
 		"lock": {

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

@@ -22,22 +22,23 @@ export const Edit = ( {
 	const { startShoppingButtonLabel } = attributes;
 
 	return (
-		<div { ...blockProps }>
+		<div className="wp-block-button aligncenter">
-			<div className="wp-block-button aligncenter">
+			<Button
-				<Button className="wc-block-mini-cart__shopping-button">
+				{ ...blockProps }
-					<RichText
+				className="wc-block-mini-cart__shopping-button"
-						multiline={ false }
+			>
-						allowedFormats={ [] }
+				<RichText
-						value={ startShoppingButtonLabel }
+					multiline={ false }
-						placeholder={ defaultStartShoppingButtonLabel }
+					allowedFormats={ [] }
-						onChange={ ( content ) => {
+					value={ startShoppingButtonLabel }
-							setAttributes( {
+					placeholder={ defaultStartShoppingButtonLabel }
-								startShoppingButtonLabel: content,
+					onChange={ ( content ) => {
-							} );
+						setAttributes( {
-						} }
+							startShoppingButtonLabel: content,
-					/>
+						} );
-				</Button>
+					} }
-			</div>
+				/>
+			</Button>
 		</div>
 	);
 };