Add fill and outline styles to the start shopping button

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

@@ -24,6 +24,17 @@
 			}
 		}
 	},
+	"styles": [
+		{
+			"name": "fill",
+			"label": "Fill",
+			"isDefault": true
+		},
+		{
+			"name": "outline",
+			"label": "Outline"
+		}
+	],
 	"parent": [ "woocommerce/empty-mini-cart-contents-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2

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

@@ -23,13 +23,18 @@ const Block = ( {
 		return null;
 	}
 
+	const variant = className.includes( 'is-style-outline' )
+		? 'outlined'
+		: 'contained';
+
 	return (
 		<div className="wp-block-button has-text-align-center">
 			<Button
 				className={ classNames(
 					className,
 					'wc-block-mini-cart__shopping-button'
 				) }
+				variant={ variant }
 				href={ SHOP_URL }
 			>
 				{ startShoppingButtonLabel || defaultStartShoppingButtonLabel }

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

@@ -21,6 +21,10 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	const { startShoppingButtonLabel } = attributes;
 
+	const variant = blockProps.className.includes( 'is-style-outline' )
+		? 'outlined'
+		: 'contained';
+
 	return (
 		<div className="wp-block-button aligncenter">
 			<EditableButton
@@ -33,6 +37,7 @@ export const Edit = ( {
 						startShoppingButtonLabel: content,
 					} );
 				} }
+				variant={ variant }
 			/>
 		</div>
 	);