Migrate On Sale Badge to `block.json` (#50908)

* Migrate On Sale Badge to block.json

* Add changelog

* Fix types

* Update block references

* Update block references and doc manifest

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.

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

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

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

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

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;

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

@@ -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 = (
-	<Icon icon={ percent } className="wc-block-editor-components-block-icon" />
-);
-export const BLOCK_DESCRIPTION: string = __(
-	'Displays an on-sale badge if the product is on-sale.',
-	'woocommerce'
-);

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

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

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: (
+		<Icon
+			icon={ percent }
+			className="wc-block-editor-components-block-icon"
+		/>
+	),
+	supports,
+	edit,
+	ancestor: [
+		...( sharedConfig.ancestor || [] ),
+		'woocommerce/product-gallery',
+	],
+} );

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

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