Add to Cart Form: Fix broken styles for the block when using inside the Single Product Block

assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx

@@ -9,6 +9,8 @@ import { Icon, button } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
+import './style.scss';
+import './editor.scss';
 
 const blockSettings = {
 	edit,

bin/webpack-entries.js

@@ -133,6 +133,8 @@ const entries = {
 			'./assets/js/atomic/blocks/product-elements/product-reviews/index.tsx',
 		'product-details':
 			'./assets/js/atomic/blocks/product-elements/product-details/index.tsx',
+		'add-to-cart-form':
+			'./assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx',
 		...getBlockEntries( '{index,block,frontend}.{t,j}s{,x}' ),
 	},
 	core: {

src/BlockTypes/AddToCartForm.php

@@ -96,11 +96,13 @@ protected function render( $attributes, $content, $block ) {
 
 		$classname          = $attributes['className'] ?? '';
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+		$product_classname = $is_descendent_of_single_product_block ? 'product' : '';
 
 		$form = 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 %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 ),
 			esc_attr( $classes_and_styles['styles'] ),
 			$product
 		);
@@ -182,7 +184,7 @@ protected function get_block_type_script( $key = null ) {
 	 * @return null
 	 */
 	protected function get_block_type_style() {
-		return null;
+		return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] );
 	}
 
 	/**