Migrate Product Image to `block.json` (#50903)

* Migrate Product Image to block.json

* Remove unnecessary property

* Add changelog

* Update block references

* Remove duplicated attributes

* Update block references and doc manifest

docs/building-a-woo-store/block-references.md

@@ -42,6 +42,17 @@ Display a call to action button which either adds the product to the cart, or li
 -	**Supports:** align (full, wide), color (link, text, ~~background~~), interactivity, typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, textAlign, width
 
+## Product Image - woocommerce/product-image
+
+Display the main product image.
+
+-	**Name:** woocommerce/product-image
+-	**Category:** woocommerce-product-elements
+-   **Ancestor:** 
+-   **Parent:** 
+-	**Supports:** 
+-	**Attributes:** aspectRatio, height, imageSizing, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, saleBadgeAlign, scale, showProductLink, showSaleBadge, width
+
 ## Product Details - woocommerce/product-details
 
 Display a product's description, attributes, and reviews.

docs/docs-manifest.json

@@ -23,7 +23,7 @@
           "menu_title": "Theming for Woo Blocks",
           "tags": "reference",
           "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/block-theme-development/theming-woo-blocks.md",
-          "hash": "1ce763e8afcc7dfdd8c5eca4da799add21dfac48279c08fc7b614071edb67a7d",
+          "hash": "cec80a34a38b7286be676a35624e2e441f5ccbb1aa318def6afe56a5a2bb6558",
           "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/block-theme-development/theming-woo-blocks.md",
           "id": "90b16f4143d6db728d5ed6dce2ee2c60bdcfdbf6"
         },
@@ -74,7 +74,7 @@
           "post_title": "Blocks reference",
           "menu_title": "Blocks Reference",
           "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/building-a-woo-store/block-references.md",
-          "hash": "5e36472952cdb8639fc4cb63d44a43276d14bb59624ac3dd19d846c5b6358315",
+          "hash": "a33fe5766283aaa70154077692a180319110e133ad430bf8dda3032455bad45c",
           "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/building-a-woo-store/block-references.md",
           "id": "1fbe91d7fa4fafaf35f0297e4cee1e7958756aed"
         },
@@ -1804,5 +1804,5 @@
       "categories": []
     }
   ],
-  "hash": "771d75cfb29dbd077e0af2234e1bbe0e99360ec6974519f02e8c70c656ac1763"
+  "hash": "0b0ae9b9ed454ab234a5f053f6efb37bafb3e90f1c98f6488263c019f552697b"
 }

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/attributes.ts

@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockAttributes } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { ImageSizing } from './types';
-
-export const blockAttributes: BlockAttributes = {
-	showProductLink: {
-		type: 'boolean',
-		default: true,
-	},
-	showSaleBadge: {
-		type: 'boolean',
-		default: true,
-	},
-	saleBadgeAlign: {
-		type: 'string',
-		default: 'right',
-	},
-	imageSizing: {
-		type: 'string',
-		default: ImageSizing.SINGLE,
-	},
-	productId: {
-		type: 'number',
-		default: 0,
-	},
-	isDescendentOfQueryLoop: {
-		type: 'boolean',
-		default: false,
-	},
-	isDescendentOfSingleProductBlock: {
-		type: 'boolean',
-		default: false,
-	},
-	width: {
-		type: 'string',
-	},
-	height: {
-		type: 'string',
-	},
-	scale: {
-		type: 'string',
-		default: 'cover',
-	},
-	aspectRatio: {
-		type: 'string',
-	},
-};
-
-export default blockAttributes;

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.json

@@ -0,0 +1,28 @@
+{
+	"name": "woocommerce/product-image",
+	"version": "1.0.0",
+	"title": "Product Image",
+	"description": "Display the main product image.",
+	"category": "woocommerce-product-elements",
+	"attributes": {
+		"showProductLink": { "type": "boolean", "default": true },
+		"showSaleBadge": { "type": "boolean", "default": true },
+		"saleBadgeAlign": { "type": "string", "default": "right" },
+		"imageSizing": { "type": "string", "default": "single" },
+		"productId": { "type": "number", "default": 0 },
+		"isDescendentOfQueryLoop": { "type": "boolean", "default": false },
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		},
+		"width": { "type": "string" },
+		"height": { "type": "string" },
+		"scale": { "type": "string", "default": "cover" },
+		"aspectRatio": { "type": "string" }
+	},
+	"usesContext": [ "query", "queryId", "postId" ],
+	"keywords": [ "WooCommerce" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 3,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/constants.tsx

@@ -1,14 +1,8 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { image, Icon } from '@wordpress/icons';
 
-export const BLOCK_TITLE: string = __( 'Product Image', 'woocommerce' );
 export const BLOCK_ICON: JSX.Element = (
 	<Icon icon={ image } className="wc-block-editor-components-block-icon" />
 );
-export const BLOCK_DESCRIPTION: string = __(
-	'Display the main product image.',
-	'woocommerce'
-);

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx

@@ -27,11 +27,8 @@ import {
  */
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
-import {
+import { BLOCK_ICON as icon } from './constants';
-	BLOCK_TITLE as label,
+import { title, description } from './block.json';
-	BLOCK_ICON as icon,
-	BLOCK_DESCRIPTION as description,
-} from './constants';
 import { BlockAttributes, ImageSizing } from './types';
 import { ImageSizeSettings } from './image-size-settings';
 
@@ -172,4 +169,4 @@ const Edit = ( {
 	);
 };
 
-export default withProductSelector( { icon, label, description } )( Edit );
+export default withProductSelector( { icon, title, description } )( Edit );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/frontend.ts

@@ -7,6 +7,6 @@ import { withFilteredAttributes } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import Block from './block';
-import attributes from './attributes';
+import { attributes } from './block.json';
 
 export default withFilteredAttributes( attributes )( Block );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.ts

@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { registerBlockType } from '@wordpress/blocks';
-import type { BlockConfiguration } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import edit from './edit';
-
-import { supports } from './supports';
-import attributes from './attributes';
-import sharedConfig from '../shared/config';
-import {
-	BLOCK_TITLE as title,
-	BLOCK_ICON as icon,
-	BLOCK_DESCRIPTION as description,
-} from './constants';
-
-const blockConfig: BlockConfiguration = {
-	...sharedConfig,
-	name: 'woocommerce/product-image',
-	title,
-	icon: { src: icon },
-	keywords: [ 'WooCommerce' ],
-	description,
-	usesContext: [ 'query', 'queryId', 'postId' ],
-	textdomain: 'woocommerce',
-	attributes,
-	supports,
-	edit,
-};
-
-registerBlockType( 'woocommerce/product-image', { ...blockConfig } );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import { BLOCK_ICON as icon } from './constants';
+import { supports } from './supports';
+import sharedConfig from '../shared/config';
+import metadata from './block.json';
+
+registerBlockType( metadata, {
+	...sharedConfig,
+	icon,
+	supports,
+	edit,
+} );

plugins/woocommerce/changelog/dev-46917-migrate-to-block-json-image

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Product Image: migrate to block.json