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
This commit is contained in:
Karol Manijak 2024-08-28 19:56:27 +02:00 committed by GitHub
parent 8a0babc660
commit 81ebd85f9e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 70 additions and 106 deletions

View File

@ -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.

View File

@ -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"
}

View File

@ -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;

View File

@ -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"
}

View File

@ -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'
);

View File

@ -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 );

View File

@ -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 );

View File

@ -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 } );

View File

@ -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,
} );

View File

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