Add to Cart Button > Update block registration to rely on metadata and enable usage for the Single Product Block (#9404)

* Adapt the Add to Cart Button block to be registered via block.json

* Remove the legacy supports.ts file

* Ditch all registration methods from the ProductButton class as it is now registered via metadata (a block.json file)

* Update get_block_type_uses_context and register_block_type_assets

Author: nefeline

assets/js/atomic/blocks/product-elements/button/attributes.ts

@@ -0,0 +1,61 @@
+{
+	"name": "woocommerce/product-button",
+	"version": "1.0.0",
+	"title": "Add to Cart Button",
+	"description": "Display a call to action button which either adds the product to the cart, or links to the product page.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "query", "queryId", "postId" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"attributes": {
+		"productId": {
+			"type": "number",
+			"default": 0
+		},
+		"textAlign": {
+			"type": "string",
+			"default": ""
+		},
+		"width": {
+			"type": "number"
+		},
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		},
+		"isDescendentOfQueryLoop": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"color": {
+			"background": false,
+			"link": true
+		},
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
+	},
+	"ancestor": [
+		"woocommerce/all-products",
+		"woocommerce/single-product",
+		"core/post-template"
+	],
+	"styles": [
+		{
+			"name": "fill",
+			"label": "Fill",
+			"isDefault": true
+		},
+		{
+			"name": "outline",
+			"label": "Outline"
+		}
+	],
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/button/block.json

@@ -1,11 +1,19 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
 /**
  * External dependencies
  */
+import { Icon, button } from '@wordpress/icons';
+import { registerBlockType } from '@wordpress/blocks';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
 
-export const supports = {
+const featurePluginSupport = {
+	...metadata.supports,
 	...( isFeaturePluginBuild() && {
 		color: {
 			text: true,
@@ -47,3 +55,22 @@ export const supports = {
 			},
 		} ),
 };
+// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ button }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes: {
+		...metadata.attributes,
+	},
+	supports: {
+		...featurePluginSupport,
+	},
+	edit,
+	save,
+} );

assets/js/atomic/blocks/product-elements/button/constants.tsx

@@ -14,7 +14,10 @@ type Props = {
 };
 
 const Save = ( { attributes }: Props ): JSX.Element | null => {
-	if ( attributes.isDescendentOfQueryLoop ) {
+	if (
+		attributes.isDescendentOfQueryLoop ||
+		attributes.isDescendentOfSingleProductBlock
+	) {
 		return null;
 	}
 

assets/js/atomic/blocks/product-elements/button/index.ts

@@ -10,6 +10,7 @@ export interface BlockAttributes {
 	className?: string | undefined;
 	textAlign?: string | undefined;
 	isDescendentOfQueryLoop?: boolean | undefined;
+	isDescendentOfSingleProductBlock?: boolean | undefined;
 	width?: number | undefined;
 }
 

…ocks/product-elements/button/supports.ts …blocks/product-elements/button/index.tsxassets/js/atomic/blocks/product-elements/button/supports.ts renamed to assets/js/atomic/blocks/product-elements/button/index.tsx assets/js/atomic/blocks/product-elements/button/supports.ts renamed to assets/js/atomic/blocks/product-elements/button/index.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { BLOCK_NAME as PRODUCT_BUTTON_BLOCK_NAME } from '../../atomic/blocks/product-elements/button/constants';
+import addToCartButtonMetadata from '../../atomic/blocks/product-elements/button/block.json';
 import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
 
 /**
@@ -45,7 +45,7 @@ export const getProductLayoutConfig = ( innerBlocks ) => {
 				 * This is needed to support "Width Setting" controls available in
 				 * "woocommerce/product-button" block.
 				 */
-				...( block.name === PRODUCT_BUTTON_BLOCK_NAME && {
+				...( block.name === addToCartButtonMetadata.name && {
 					className: classnames( block.attributes.className, {
 						[ `has-custom-width wp-block-button__width-${ block.attributes?.width }` ]:
 							block.attributes?.width,

assets/js/atomic/blocks/product-elements/button/save.tsx

@@ -15,43 +15,6 @@ class ProductButton extends AbstractBlock {
 	 */
 	protected $block_name = 'product-button';
 
-	/**
-	 * API version name.
-	 *
-	 * @var string
-	 */
-	protected $api_version = '2';
-
-	/**
-	 * Get block supports. Shared with the frontend.
-	 * IMPORTANT: If you change anything here, make sure to update the JS file too.
-	 *
-	 * @return array
-	 */
-	protected function get_block_type_supports() {
-		return array(
-			'color'                  =>
-			array(
-				'background'                      => true,
-				'link'                            => false,
-				'text'                            => true,
-				'__experimentalSkipSerialization' => true,
-			),
-			'__experimentalBorder'   =>
-			array(
-				'radius'                          => true,
-				'__experimentalSkipSerialization' => true,
-			),
-			'typography'             =>
-			array(
-				'fontSize'                        => true,
-				'__experimentalFontWeight'        => true,
-				'__experimentalSkipSerialization' => true,
-			),
-			'__experimentalSelector' => '.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button',
-		);
-	}
-
 	/**
 	 * It is necessary to register and enqueue assets during the render phase because we want to load assets only if the block has the content.
 	 */
@@ -75,12 +38,6 @@ protected function get_block_type_uses_context() {
 	 * @return string Rendered block type output.
 	 */
 	protected function render( $attributes, $content, $block ) {
-		if ( ! empty( $content ) ) {
-			parent::register_block_type_assets();
-			$this->register_chunk_translations( [ $this->block_name ] );
-			return $content;
-		}
-
 		$post_id = $block->context['postId'];
 		$product = wc_get_product( $post_id );
 
@@ -91,7 +48,7 @@ protected function render( $attributes, $content, $block ) {
 			$html_element                  = $is_ajax_button ? 'button' : 'a';
 			$styles_and_classes            = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 			$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
-			$classname                     = isset( $attributes['className'] ) ? $attributes['className'] : '';
+			$classname                     = $attributes['className'] ?? '';
 			$custom_width_classes          = isset( $attributes['width'] ) ? 'has-custom-width wp-block-button__width-' . $attributes['width'] : '';
 			$html_classes                  = implode(
 				' ',