diff --git a/docs/building-a-woo-store/block-references.md b/docs/building-a-woo-store/block-references.md index 833682a27ab..0cf96318ebc 100644 --- a/docs/building-a-woo-store/block-references.md +++ b/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. diff --git a/docs/docs-manifest.json b/docs/docs-manifest.json index e898c1e9ea2..6e8e25bf2e6 100644 --- a/docs/docs-manifest.json +++ b/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" } \ No newline at end of file diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/attributes.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/attributes.ts deleted file mode 100644 index 2405642245e..00000000000 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/attributes.ts +++ /dev/null @@ -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; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.json b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.json new file mode 100644 index 00000000000..a73063ebab1 --- /dev/null +++ b/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" +} diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/constants.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/constants.tsx index 3a4cf2388c5..441b95f2e6b 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/constants.tsx +++ b/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 = ( ); -export const BLOCK_DESCRIPTION: string = __( - 'Display the main product image.', - 'woocommerce' -); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx index 9eaf63bc4d7..8ed366bf609 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx +++ b/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 { - BLOCK_TITLE as label, - BLOCK_ICON as icon, - BLOCK_DESCRIPTION as description, -} from './constants'; +import { BLOCK_ICON as icon } from './constants'; +import { title, description } from './block.json'; 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 ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/frontend.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/frontend.ts index b6c773996b2..b0ad02b5ec8 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/frontend.ts +++ b/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 ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.ts deleted file mode 100644 index 7ae60f870f7..00000000000 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.ts +++ /dev/null @@ -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 } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.tsx new file mode 100644 index 00000000000..79a486a706e --- /dev/null +++ b/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, +} ); diff --git a/plugins/woocommerce/changelog/dev-46917-migrate-to-block-json-image b/plugins/woocommerce/changelog/dev-46917-migrate-to-block-json-image new file mode 100644 index 00000000000..0afb024afd3 --- /dev/null +++ b/plugins/woocommerce/changelog/dev-46917-migrate-to-block-json-image @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Product Image: migrate to block.json