Refactor Product Categories block to use block.json (#6875)

I refactor block to use block.json schema. The block schema
internally extends the main block.json schema and it fixes an issue
that occurs on WPCOM.

Author: wojtekn

assets/js/blocks/product-categories/block.json

@@ -0,0 +1,41 @@
+{
+  "name": "woocommerce/product-categories",
+  "title": "Product Categories List",
+  "category": "woocommerce",
+  "description": "Show all product categories as a list or dropdown.",
+  "keywords": [ "WooCommerce" ],
+  "attributes": {
+    "align": {
+      "type": "string"
+    },
+    "hasCount": {
+      "type": "boolean",
+      "default": true
+    },
+    "hasImage": {
+      "type": "boolean",
+      "default": false
+    },
+    "hasEmpty": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDropdown": {
+      "type": "boolean",
+      "default": false
+    },
+    "isHierarchical": {
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "example": {
+    "attributes": {
+      "hasCount": true,
+      "hasImage": false
+    }
+  },
+  "textdomain": "woo-gutenberg-products-block",
+  "apiVersion": 2,
+  "$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/product-categories/edit.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import './editor.scss';
+
+export const Edit = ( props: unknown ): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Block { ...props } />
+		</div>
+	);
+};

…ts/js/blocks/product-categories/index.js …s/js/blocks/product-categories/index.tsxassets/js/blocks/product-categories/index.js renamed to assets/js/blocks/product-categories/index.tsx assets/js/blocks/product-categories/index.js renamed to assets/js/blocks/product-categories/index.tsx

@@ -1,21 +1,19 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { Icon, listView } from '@wordpress/icons';
-
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
 /**
  * Internal dependencies
  */
 import './editor.scss';
+import metadata from './block.json';
 import './style.scss';
-import Block from './block.js';
+import { Edit } from './edit';
 
-registerBlockType( 'woocommerce/product-categories', {
-	apiVersion: 2,
-	title: __( 'Product Categories List', 'woo-gutenberg-products-block' ),
+registerBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
@@ -24,12 +22,6 @@ registerBlockType( 'woocommerce/product-categories', {
 			/>
 		),
 	},
-	category: 'woocommerce',
-	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
-	description: __(
-		'Show all product categories as a list or dropdown.',
-		'woo-gutenberg-products-block'
-	),
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,
@@ -44,60 +36,6 @@ registerBlockType( 'woocommerce/product-categories', {
 			},
 		} ),
 	},
-	example: {
-		attributes: {
-			hasCount: true,
-			hasImage: false,
-		},
-	},
-	attributes: {
-		/**
-		 * Alignment of the block.
-		 */
-		align: {
-			type: 'string',
-		},
-
-		/**
-		 * Whether to show the product count in each category.
-		 */
-		hasCount: {
-			type: 'boolean',
-			default: true,
-		},
-
-		/**
-		 * Whether to show the category image in each category.
-		 */
-		hasImage: {
-			type: 'boolean',
-			default: false,
-		},
-
-		/**
-		 * Whether to show empty categories in the list.
-		 */
-		hasEmpty: {
-			type: 'boolean',
-			default: false,
-		},
-
-		/**
-		 * Whether to display product categories as a dropdown (true) or list (false).
-		 */
-		isDropdown: {
-			type: 'boolean',
-			default: false,
-		},
-
-		/**
-		 * Whether the product categories should display with hierarchy.
-		 */
-		isHierarchical: {
-			type: 'boolean',
-			default: true,
-		},
-	},
 
 	transforms: {
 		from: [
@@ -197,14 +135,7 @@ registerBlockType( 'woocommerce/product-categories', {
 		},
 	],
 
-	/**
-	 * Renders and manages the block.
-	 *
-	 * @param {Object} props Props to pass to block.
-	 */
-	edit( props ) {
-		return <Block { ...props } />;
-	},
+	edit: Edit,
 
 	/**
 	 * Save nothing; rendered by server.