Add to Cart with Options: Fix styles that are not being applied corre…

…ctly (#9472)

* Add missing WooCommerce styles to Add to Cart with Options block

* Fix input style for Add to Cart with Options block

* Add comment about the input-text css class that was added to the Add To Cart Form

assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss

@@ -4,4 +4,14 @@
 		font-size: var(--wp--preset--font-size--large);
 	}
 	width: unset;
+
+	/**
+	* This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
+	*
+	* @link https://github.com/woocommerce/woocommerce/blob/95ca53675f2817753d484583c96ca9ab9f725172/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss#L203-L206
+	*/
+	.input-text {
+		font-size: var(--wp--preset--font-size--small);
+		padding: 0.9rem 1.1rem;
+	}
 }

src/BlockTypes/AddToCartForm.php

@@ -54,7 +54,7 @@ protected function render( $attributes, $content, $block ) {
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 
 		return sprintf(
-			'<div class="wp-block-add-to-cart-form %1$s %2$s" style="%3$s">%4$s</div>',
+			'<div class="wp-block-add-to-cart-form product %1$s %2$s" style="%3$s">%4$s</div>',
 			esc_attr( $classes_and_styles['classes'] ),
 			esc_attr( $classname ),
 			esc_attr( $classes_and_styles['styles'] ),

src/BlockTypes/SingleProduct.php

@@ -51,7 +51,7 @@ protected function initialize() {
 	 */
 	protected function render( $attributes, $content, $block ) {
 		$classname          = $attributes['className'] ?? '';
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classname ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( sprintf( 'woocommerce %1$s', $classname ) ) ) );
 
 		$html = sprintf(
 			'<div %1$s>