Fix JS error visible in the editor caused by Mini Cart Contents butto…

…ns (#9039)
woocommerce · Apr 14, 2023 · 28534b7 · 28534b7
1 parent 8238585
commit 28534b7
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 36 deletions.
diff --git a/.../js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx b/.../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/...blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx b/...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
@@ -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/...ts/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss b/...ts/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/...blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx b/...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
@@ -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) {