Mini Cart block > Update block registration to rely on a metadata file. (https://github.com/woocommerce/woocommerce-blocks/pull/10168)

* Introduce the block.json file for the mini-cart block.

* Update the index.tsx file to use the new metadata file for registering the mini cart.

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.json

@@ -0,0 +1,70 @@
+{
+	"name": "woocommerce/mini-cart",
+	"version": "1.0.0",
+	"title": "Mini-Cart",
+	"icon": "miniCartAlt",
+	"description": "Display a button for shoppers to quickly view their cart.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"providesContext": {
+		"priceColorValue": "priceColorValue",
+		"iconColorValue": "iconColorValue",
+		"productCountColorValue": "productCountColorValue"
+	},
+	"supports": {
+		"html": false,
+		"multiple": false,
+		"typography": {
+			"fontSize": true
+		}
+	},
+	"example": {
+		"attributes": {
+			"isPreview": true,
+			"className": "wc-block-mini-cart--preview"
+		}
+	},
+	"attributes": {
+		"isPreview": {
+			"type": "boolean",
+			"default": false
+		},
+		"miniCartIcon": {
+			"type": "string",
+			"default": "cart"
+		},
+		"addToCartBehaviour": {
+			"type": "string",
+			"default": "none"
+		},
+		"hasHiddenPrice": {
+			"type": "boolean",
+			"default": false
+		},
+		"cartAndCheckoutRenderStyle": {
+			"type": "string",
+			"default": "hidden"
+		},
+		"priceColor": {
+			"type": "string"
+		},
+		"priceColorValue": {
+			"type": "string"
+		},
+		"iconColor": {
+			"type": "string"
+		},
+		"iconColorValue": {
+			"type": "string"
+		},
+		"productCountColor": {
+			"type": "string"
+		},
+		"productCountColorValue": {
+			"type": "string"
+		}
+	},
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/index.tsx

@@ -1,22 +1,30 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { miniCartAlt } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import { registerBlockType } from '@wordpress/blocks';
-import type { BlockConfiguration } from '@wordpress/blocks';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { addFilter } from '@wordpress/hooks';
-
 /**
  * Internal dependencies
  */
+import metadata from './block.json';
 import edit from './edit';
+import './style.scss';
 
-const settings: BlockConfiguration = {
-	apiVersion: 2,
-	title: __( 'Mini-Cart', 'woo-gutenberg-products-block' ),
+const featurePluginSupport = {
+	...metadata.supports,
+	...( isFeaturePluginBuild() && {
+		typography: {
+			...metadata.supports.typography,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+		},
+	} ),
+};
+
+registerBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
@@ -25,81 +33,23 @@ const settings: BlockConfiguration = {
 			/>
 		),
 	},
-	category: 'woocommerce',
-	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
-	description: __(
-		'Display a button for shoppers to quickly view their cart.',
-		'woo-gutenberg-products-block'
-	),
 	providesContext: {
-		priceColorValue: 'priceColorValue',
-		iconColorValue: 'iconColorValue',
-		productCountColorValue: 'productCountColorValue',
+		...metadata.providesContext,
 	},
 	supports: {
-		html: false,
-		multiple: false,
-		typography: {
-			fontSize: true,
-			...( isFeaturePluginBuild() && {
-				__experimentalFontFamily: true,
-				__experimentalFontWeight: true,
-			} ),
-		},
+		...featurePluginSupport,
 	},
 	example: {
-		attributes: {
-			isPreview: true,
-			className: 'wc-block-mini-cart--preview',
-		},
+		...metadata.example,
 	},
 	attributes: {
-		isPreview: {
-			type: 'boolean',
-			default: false,
-		},
-		miniCartIcon: {
-			type: 'string',
-			default: 'cart',
-		},
-		addToCartBehaviour: {
-			type: 'string',
-			default: 'none',
-		},
-		hasHiddenPrice: {
-			type: 'boolean',
-			default: false,
-		},
-		cartAndCheckoutRenderStyle: {
-			type: 'string',
-			default: 'hidden',
-		},
-		priceColor: {
-			type: 'string',
-		},
-		priceColorValue: {
-			type: 'string',
-		},
-		iconColor: {
-			type: 'string',
-		},
-		iconColorValue: {
-			type: 'string',
-		},
-		productCountColor: {
-			type: 'string',
-		},
-		productCountColorValue: {
-			type: 'string',
-		},
+		...metadata.attributes,
 	},
 	edit,
 	save() {
 		return null;
 	},
-};
-
-registerBlockType( 'woocommerce/mini-cart', settings );
+} );
 
 // Remove the Mini Cart template part from the block inserter.
 addFilter(