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
GitHub
parent
8a0babc660
commit
81ebd85f9e
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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'
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
|
|||
|
|
@ -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 } );
|
||||
|
|
@ -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,
|
||||
} );
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
|
||||
Product Image: migrate to block.json
|
||||
Loading…
Reference in New Issue