From 28534b7c463b796f5f2a22562b87a5c2b562c6ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 14 Apr 2023 16:53:39 +0200
Subject: [PATCH] Fix JS error visible in the editor caused by Mini Cart
 Contents buttons (#9039)

---
 .../mini-cart-cart-button-block/edit.tsx      | 28 +++++++++--------
 .../mini-cart-checkout-button-block/edit.tsx  | 31 +++++++++----------
 .../mini-cart-footer-block/edit.tsx           |  9 +++++-
 .../mini-cart-footer-block/editor.scss        |  3 ++
 .../mini-cart-shopping-button-block/edit.tsx  |  7 +++--
 assets/js/blocks/mini-cart/style.scss         |  9 ++++--
 6 files changed, 51 insertions(+), 36 deletions(-)
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss

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 e85e93a2bf3..6652ce25c2c 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
@@ -19,22 +19,24 @@ export const Edit = ( {
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: 'wc-block-mini-cart__footer-cart',
+	} );
 	const { cartButtonLabel } = attributes;
 
 	return (
-		<EditableButton
-			{ ...blockProps }
-			className="wc-block-mini-cart__footer-cart"
-			variant={ getVariant( blockProps.className, 'outlined' ) }
-			value={ cartButtonLabel }
-			placeholder={ defaultCartButtonLabel }
-			onChange={ ( content ) => {
-				setAttributes( {
-					cartButtonLabel: content,
-				} );
-			} }
-		/>
+		<div { ...blockProps }>
+			<EditableButton
+				variant={ getVariant( blockProps.className, 'outlined' ) }
+				value={ cartButtonLabel }
+				placeholder={ defaultCartButtonLabel }
+				onChange={ ( content ) => {
+					setAttributes( {
+						cartButtonLabel: content,
+					} );
+				} }
+			/>
+		</div>
 	);
 };
 
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 c6a6e96eba4..eb37710998b 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
@@ -20,25 +20,24 @@ export const Edit = ( {
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: classNames( 'wc-block-mini-cart__footer-checkout' ),
+	} );
 	const { checkoutButtonLabel } = attributes;
 
 	return (
-		<EditableButton
-			{ ...blockProps }
-			className={ classNames(
-				'wc-block-mini-cart__footer-checkout',
-				blockProps.className
-			) }
-			variant={ getVariant( blockProps.className, 'contained' ) }
-			value={ checkoutButtonLabel }
-			placeholder={ defaultCheckoutButtonLabel }
-			onChange={ ( content ) => {
-				setAttributes( {
-					checkoutButtonLabel: content,
-				} );
-			} }
-		/>
+		<div { ...blockProps }>
+			<EditableButton
+				variant={ getVariant( blockProps.className, 'contained' ) }
+				value={ checkoutButtonLabel }
+				placeholder={ defaultCheckoutButtonLabel }
+				onChange={ ( content ) => {
+					setAttributes( {
+						checkoutButtonLabel: content,
+					} );
+				} }
+			/>
+		</div>
 	);
 };
 
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 cbf7f341413..e3b9d7372bd 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
@@ -14,6 +14,11 @@ import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 import { getSetting } from '@woocommerce/settings';
 import { PaymentEventsProvider } from '@woocommerce/base-context';
 
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
 const PaymentMethodIconsElement = (): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
 	return (
@@ -49,7 +54,9 @@ export const Edit = (): JSX.Element => {
 						'woo-gutenberg-products-block'
 					) }
 				/>
-				<InnerBlocks template={ TEMPLATE } />
+				<div className="wc-block-mini-cart__footer-actions">
+					<InnerBlocks template={ TEMPLATE } />
+				</div>
 				<PaymentEventsProvider>
 					<PaymentMethodIconsElement />
 				</PaymentEventsProvider>
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss
new file mode 100644
index 00000000000..e0cb654c66e
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss
@@ -0,0 +1,3 @@
+.editor-styles-wrapper .wc-block-mini-cart__footer .block-editor-inner-blocks {
+	width: 100%;
+}
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
index f8af7f0d6fb..43241354951 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
@@ -19,13 +19,14 @@ export const Edit = ( {
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: 'wp-block-button aligncenter',
+	} );
 	const { startShoppingButtonLabel } = attributes;
 
 	return (
-		<div className="wp-block-button aligncenter">
+		<div { ...blockProps }>
 			<EditableButton
-				{ ...blockProps }
 				className="wc-block-mini-cart__shopping-button"
 				value={ startShoppingButtonLabel }
 				placeholder={ defaultStartShoppingButtonLabel }
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index 22dea6da84a..89aea514497 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -177,18 +177,21 @@ h2.wc-block-mini-cart__title {
 		}
 	}
 
+	// First selector for the frontend, second selector for the editor.
 	.wc-block-mini-cart__footer-actions,
-	.block-editor-block-list__layout {
+	.wc-block-mini-cart__footer-actions > .block-editor-inner-blocks > .block-editor-block-list__layout {
 		display: flex;
 		gap: $gap;
 
 		.wc-block-components-button,
-		.wp-block-button {
+		.wp-block-button,
+		.wp-block-woocommerce-mini-cart-cart-button-block,
+		.wp-block-woocommerce-mini-cart-checkout-button-block {
 			flex-grow: 1;
 			display: inline-flex;
 		}
 
-		.wc-block-components-button.outlined {
+		.wp-block-woocommerce-mini-cart-cart-button-block {
 			display: none;
 
 			@media only screen and (min-width: 480px) {