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

…frontend (#11614)

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

* Typo

* Use same margin values as block theme stylesheet

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>

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;

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;
+		}
+	}
 }

src/BlockTypes/AddToCartForm.php

@@ -99,7 +99,7 @@ protected function render( $attributes, $content, $block ) {
 		$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 ),