diff --git a/docs/building-a-woo-store/block-references.md b/docs/building-a-woo-store/block-references.md index 7790efb5eb7..833682a27ab 100644 --- a/docs/building-a-woo-store/block-references.md +++ b/docs/building-a-woo-store/block-references.md @@ -51,7 +51,7 @@ Display a product's description, attributes, and reviews. - **Ancestor:** - **Parent:** - **Supports:** align, spacing (margin) -- **Attributes:** +- **Attributes:** hideTabTitle ## Product Image Gallery - woocommerce/product-image-gallery @@ -130,6 +130,17 @@ Display related products. - **Supports:** align, ~~reusable~~ - **Attributes:** +## On-Sale Badge - woocommerce/product-sale-badge + +Displays an on-sale badge if the product is on-sale. + +- **Name:** woocommerce/product-sale-badge +- **Category:** woocommerce-product-elements +- **Ancestor:** +- **Parent:** +- **Supports:** +- **Attributes:** isDescendentOfQueryLoop, isDescendentOfSingleProductTemplate, productId + ## Active Filters Controls - woocommerce/active-filters Display the currently active filters. diff --git a/docs/docs-manifest.json b/docs/docs-manifest.json index f3417a740c4..e898c1e9ea2 100644 --- a/docs/docs-manifest.json +++ b/docs/docs-manifest.json @@ -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": "b6cd78cba78be8846621f27b9d4a408c713e1915bdbb7fc27b6247b3ff8610f1", + "hash": "5e36472952cdb8639fc4cb63d44a43276d14bb59624ac3dd19d846c5b6358315", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/building-a-woo-store/block-references.md", "id": "1fbe91d7fa4fafaf35f0297e4cee1e7958756aed" }, @@ -1804,5 +1804,5 @@ "categories": [] } ], - "hash": "df3de404fdaf0f5edbc84ef82a7e492c5bf95c862aecadf9643229b7d10cc2eb" + "hash": "771d75cfb29dbd077e0af2234e1bbe0e99360ec6974519f02e8c70c656ac1763" } \ No newline at end of file diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/attributes.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/attributes.ts deleted file mode 100644 index 46b5750999a..00000000000 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/attributes.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * External dependencies - */ -import type { BlockAttributes } from '@wordpress/blocks'; - -export const blockAttributes: BlockAttributes = { - productId: { - type: 'number', - default: 0, - }, - isDescendentOfQueryLoop: { - type: 'boolean', - default: false, - }, - isDescendentOfSingleProductTemplate: { - type: 'boolean', - default: false, - }, -}; - -export default blockAttributes; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.json b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.json new file mode 100644 index 00000000000..391abb53d39 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.json @@ -0,0 +1,20 @@ +{ + "name": "woocommerce/product-sale-badge", + "version": "1.0.0", + "title": "On-Sale Badge", + "description": "Displays an on-sale badge if the product is on-sale.", + "category": "woocommerce-product-elements", + "attributes": { + "productId": { "type": "number", "default": 0 }, + "isDescendentOfQueryLoop": { "type": "boolean", "default": false }, + "isDescendentOfSingleProductTemplate": { + "type": "boolean", + "default": false + } + }, + "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/sale-badge/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx index 1ed112ffc9e..8486402e3cf 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx @@ -18,7 +18,8 @@ import type { HTMLAttributes } from 'react'; import './style.scss'; import type { BlockAttributes } from './types'; -type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >; +type Props = BlockAttributes & + HTMLAttributes< HTMLDivElement > & { align: boolean }; export const Block = ( props: Props ): JSX.Element | null => { const { className, align } = props; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/constants.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/constants.tsx deleted file mode 100644 index d81fb73e894..00000000000 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/constants.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { percent, Icon } from '@wordpress/icons'; - -export const BLOCK_TITLE: string = __( 'On-Sale Badge', 'woocommerce' ); -export const BLOCK_ICON: JSX.Element = ( - -); -export const BLOCK_DESCRIPTION: string = __( - 'Displays an on-sale badge if the product is on-sale.', - 'woocommerce' -); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.ts deleted file mode 100644 index 3f195dea9bd..00000000000 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * External dependencies - */ -import { registerBlockType } from '@wordpress/blocks'; -import type { BlockConfiguration } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import sharedConfig from '../shared/config'; -import attributes from './attributes'; -import edit from './edit'; -import { - BLOCK_TITLE as title, - BLOCK_ICON as icon, - BLOCK_DESCRIPTION as description, -} from './constants'; -import { supports } from './support'; - -const blockConfig: BlockConfiguration = { - ...sharedConfig, - title, - description, - icon: { src: icon }, - supports, - attributes, - edit, - usesContext: [ 'query', 'queryId', 'postId' ], - ancestor: [ - ...( sharedConfig.ancestor || [] ), - 'woocommerce/product-gallery', - ], -}; - -registerBlockType( 'woocommerce/product-sale-badge', { ...blockConfig } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.tsx new file mode 100644 index 00000000000..81a2e7d4cd0 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.tsx @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { percent, Icon } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import sharedConfig from '../shared/config'; +import edit from './edit'; +import { supports } from './support'; +import metadata from './block.json'; + +registerBlockType( metadata, { + ...sharedConfig, + icon: ( + + ), + supports, + edit, + ancestor: [ + ...( sharedConfig.ancestor || [] ), + 'woocommerce/product-gallery', + ], +} ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/types.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/types.ts index 3395dfacbfa..4b23eb63506 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/types.ts +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/types.ts @@ -1,6 +1,5 @@ export interface BlockAttributes { productId: number; - align: 'left' | 'center' | 'right'; isDescendentOfQueryLoop?: boolean | undefined; isDescendentOfSingleProductTemplate?: boolean; } diff --git a/plugins/woocommerce/changelog/dev-46917-migrate-to-block-json-sale b/plugins/woocommerce/changelog/dev-46917-migrate-to-block-json-sale new file mode 100644 index 00000000000..1f578b35e80 --- /dev/null +++ b/plugins/woocommerce/changelog/dev-46917-migrate-to-block-json-sale @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +On Sale Badge: Migrate to block.json