From 33bc75801e3ae60b3b7bd0be88df6c3af34aa598 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Mon, 6 Nov 2023 16:30:25 +0100
Subject: [PATCH] Add to Cart with Options block: fix inconsistency between
 editor and frontend
 (https://github.com/woocommerce/woocommerce-blocks/pull/11614)

* Add to Cart with Options block: fix inconsistency between editor and frontend

* Typo

* Use same margin values as block theme stylesheet
---
 .../add-to-cart-form/edit.tsx                 | 31 +++++++++----------
 .../add-to-cart-form/editor.scss              | 28 +----------------
 .../add-to-cart-form/style.scss               | 15 ++++++++-
 .../src/BlockTypes/AddToCartForm.php          |  2 +-
 4 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
index cf0dda1031f..e4ffc5a2a1f 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
@@ -4,7 +4,7 @@
 import { useEffect } from '@wordpress/element';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button, Disabled, Tooltip } from '@wordpress/components';
+import { Disabled, Tooltip } from '@wordpress/components';
 import { Skeleton } from '@woocommerce/base-components/skeleton';
 import { BlockEditProps } from '@wordpress/blocks';
 
@@ -37,31 +37,28 @@ const Edit = ( props: BlockEditProps< Attributes > ) => {
 	return (
 		<div { ...blockProps }>
 			<Tooltip
-				text="Customer will see product add-to-cart options in this space, dependend on the product type. "
+				text="Customer will see product add-to-cart options in this space, dependent on the product type. "
 				position="bottom right"
 			>
-				<div className="wc-block-editor-container">
+				<div className="wc-block-editor-add-to-cart-form-container">
 					<Skeleton numberOfLines={ 3 } />
 					<Disabled>
-						<input
-							type={ 'number' }
-							value={ '1' }
-							className={
-								'wc-block-editor-add-to-cart-form__quantity'
-							}
-							readOnly
-						/>
-						<Button
-							variant={ 'primary' }
-							className={
-								'wc-block-editor-add-to-cart-form__button'
-							}
+						<div className="quantity">
+							<input
+								type={ 'number' }
+								value={ '1' }
+								className={ 'input-text qty text' }
+								readOnly
+							/>
+						</div>
+						<button
+							className={ `single_add_to_cart_button button alt wp-element-button` }
 						>
 							{ __(
 								'Add to cart',
 								'woo-gutenberg-products-block'
 							) }
-						</Button>
+						</button>
 					</Disabled>
 				</div>
 			</Tooltip>
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
index 371171a8eff..230940d5c24 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
@@ -1,30 +1,4 @@
-.wc-block-editor-add-to-cart-form {
-	display: flex;
-	flex-direction: column;
-	row-gap: $default-block-margin;
-}
-
-input.wc-block-editor-add-to-cart-form__quantity[type="number"] {
-	max-width: 50px;
-	min-height: 23px;
-	float: left;
-	padding: 6px 6px 6px 12px;
-	margin-right: 10px;
-	font-size: 13px;
-	height: inherit;
-}
-
-input[type="number"]::-webkit-inner-spin-button {
-	opacity: 1;
-}
-
-button.components-button.wc-block-add-to-cart-form__button {
-	float: left;
-	padding: 20px 30px;
-	border-radius: 0;
-}
-
-.wc-block-editor-container {
+.wc-block-editor-add-to-cart-form-container {
 	cursor: help;
 	gap: 10px;
 	display: flex;
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss
index c5210c233a1..30284751237 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss
@@ -1,4 +1,4 @@
-.wp-block-add-to-cart-form {
+.wc-block-add-to-cart-form {
 	width: unset;
 	/**
 	* This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
@@ -9,4 +9,17 @@
 		font-size: var(--wp--preset--font-size--small);
 		padding: 0.9rem 1.1rem;
 	}
+
+	.quantity {
+		display: inline-block;
+		float: none;
+		margin-right: 4px;
+		vertical-align: middle;
+
+		.qty {
+			margin-right: 0.5rem;
+			width: 3.631em;
+			text-align: center;
+		}
+	}
 }
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php b/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php
index 0d5b0782796..c12e3fbd451 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php
@@ -99,7 +99,7 @@ class AddToCartForm extends AbstractBlock {
 		$product_classname  = $is_descendent_of_single_product_block ? 'product' : '';
 
 		$form = sprintf(
-			'<div class="wp-block-add-to-cart-form %1$s %2$s %3$s" style="%4$s">%5$s</div>',
+			'<div class="wp-block-add-to-cart-form wc-block-add-to-cart-form %1$s %2$s %3$s" style="%4$s">%5$s</div>',
 			esc_attr( $classes_and_styles['classes'] ),
 			esc_attr( $classname ),
 			esc_attr( $product_classname ),