From d5717496b43e811cf6b9337f339ef1bdf153137d Mon Sep 17 00:00:00 2001
From: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Date: Wed, 1 Mar 2023 10:39:54 +0100
Subject: [PATCH] Add to Cart Form Block > Ensure the editor preview is
 properly displayed with the Gutenberg plugin disabled (#8582)

* Update the editor styles for the add to cart form button so it is properly displayed with the Gutenberg plugin disabled.

* update for the input height.

* update the min-height
---
 .../product-elements/add-to-cart-form/edit.tsx    |  2 +-
 .../product-elements/add-to-cart-form/editor.scss | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx b/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
index 8dd20a4c1b1..e8c5c92f8b0 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
@@ -14,7 +14,7 @@ export interface Attributes {
 
 const Edit = () => {
 	const blockProps = useBlockProps( {
-		className: 'woocommerce wc-block-add-to-cart-form',
+		className: 'wc-block-add-to-cart-form',
 	} );
 
 	return (
diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
index a69535e2eb7..c45cef71e54 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
@@ -3,24 +3,27 @@
 	flex-direction: row;
 }
 
-.wc-block-add-to-cart-form__notice {
+.wc-block-add-to-cart-form__notice.components-notice {
 	margin: 10px 0;
 	color: $black;
 	max-width: 60%;
 }
-input.wc-block-add-to-cart-form__quantity {
-	width: 35px;
+
+input.wc-block-add-to-cart-form__quantity[type="number"] {
+	max-width: 50px;
+	min-height: 23px;
 	float: left;
-	padding: 10px 6px 10px 12px;
+	padding: 6px 6px 6px 12px;
 	margin-right: 10px;
-	height: 15px;
+	font-size: 13px;
+	height: inherit;
 }
 
 input[type="number"]::-webkit-inner-spin-button {
 	opacity: 1;
 }
 
-.wc-block-add-to-cart-form__button {
+button.components-button.wc-block-add-to-cart-form__button {
 	float: left;
 	padding: 20px 30px;
 	border-radius: 0;