Fine-tune the Add to cart form block (#8482)

* Restrict usage to the single product template.

* Update class prefix from wc to wp

* Move the add-to-cart-form block to atomic blocks so it is aligned with the updated structure adopted for single product related blocks.

* Address CR

* ditch woocommerce class.

* remove attributes key

* Add new styles to account for the removal of the .summary and .entry-summary selectors

* Narrow down the styles to the add-to-cart-form class.

assets/js/atomic/blocks/index.js

@@ -13,6 +13,7 @@ import './product-elements/category-list';
 import './product-elements/tag-list';
 import './product-elements/stock-indicator';
 import './product-elements/add-to-cart';
+import './product-elements/add-to-cart-form';
 import './product-elements/product-image-gallery';
 import './product-elements/product-details';
 import './product-elements/related-products';

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { Icon, button } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+registerBlockSingleProductTemplate( {
+	registerBlockFn: () => {
+		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
+		registerBlockType( metadata, {
+			icon: {
+				src: (
+					<Icon
+						icon={ button }
+						className="wc-block-editor-components-block-icon"
+					/>
+				),
+			},
+			edit,
+			save() {
+				return null;
+			},
+		} );
+	},
+	unregisterBlockFn: () => {
+		unregisterBlockType( metadata.name );
+	},
+	blockName: metadata.name,
+} );

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

@@ -0,0 +1,6 @@
+.wp-block-add-to-cart-form {
+	.woocommerce-Price-amount.amount,
+	.woocommerce-grouped-product-list-item__price del {
+		font-size: var(--wp--preset--font-size--large);
+	}
+}

src/BlockTypes/AddToCartForm.php

@@ -48,7 +48,7 @@ protected function render( $attributes, $content, $block ) {
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 
 		return sprintf(
-			'<div class="woocommerce wc-block-add-to-cart-form %1$s %2$s" style="%3$s"><div class="product type-product"><div class="summary entry-summary">%4$s</div></div></div>',
+			'<div class="wp-block-add-to-cart-form %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'] ),
@@ -64,4 +64,11 @@ protected function render( $attributes, $content, $block ) {
 	protected function get_block_type_script( $key = null ) {
 		return null;
 	}
+
+	/**
+	 * It isn't necessary register block assets because it is a server side block.
+	 */
+	protected function register_block_type_assets() {
+		return null;
+	}
 }