Remove propTypes definitions from Newest Products block

assets/js/blocks/README.md

@@ -17,8 +17,8 @@ The scss files are split so that things in `style` are added to the editor _and_
 
 A simple edit function can live in `index.js`, but most blocks are a little more complicated, so the edit function instead returns a Block component, which lives in `block.js`. By using a component, we can use React lifecycle methods to fetch data or save state.
 
-The [Newest Products block](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/5c9d587fcc0b9e652813a42b66eafa5520c7ac88/assets/js/blocks/product-new/block.js) is a good example to read over, this is a simple block that fetches the products and renders them using the ProductPreview component.
+The [Newest Products block](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/5c9d587fcc0b9e652813a42b66eafa5520c7ac88/assets/js/blocks/product-new/block.tsx) is a good example to read over, this is a simple block that fetches the products and renders them using the ProductPreview component.
 
-We include settings in the sidebar, called the Inspector in gutenberg. [See an example of this.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/5c9d587fcc0b9e652813a42b66eafa5520c7ac88/assets/js/blocks/product-new/block.js#L71)
+We include settings in the sidebar, called the Inspector in gutenberg. [See an example of this.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/5c9d587fcc0b9e652813a42b66eafa5520c7ac88/assets/js/blocks/product-new/block.tsx#L71)
 
 Other blocks have the concept of an "edit state", like when you need to pick a product in the Featured Product block, or [pick a category in the Products by Category block.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/5c9d587fcc0b9e652813a42b66eafa5520c7ac88/assets/js/blocks/product-category/block.js#L140)

assets/js/blocks/product-new/block.json

@@ -0,0 +1,92 @@
+{
+	"name": "woocommerce/product-new",
+	"title": "Newest Products",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce", "woo-gutenberg-products-block" ],
+	"description": "Display a grid of your newest products.",
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false
+	},
+	"attributes": {
+		"columns": {
+			"type": "number",
+			"default": 3
+		},
+		"rows": {
+			"type": "number",
+			"default": 3
+		},
+		"alignButtons": {
+			"type": "boolean",
+			"default": false
+		},
+		"contentVisibility": {
+			"type": "object",
+			"default": {
+				"image": true,
+				"title": true,
+				"price": true,
+				"rating": true,
+				"button": true
+			},
+			"properties": {
+				"image": {
+					"type": "boolean",
+					"default": true
+				},
+				"title": {
+					"type": "boolean",
+					"default": true
+				},
+				"price": {
+					"type": "boolean",
+					"default": true
+				},
+				"rating": {
+					"type": "boolean",
+					"default": true
+				},
+				"button": {
+					"type": "boolean",
+					"default": true
+				}
+			}
+		},
+		"categories": {
+			"type": "array",
+			"default": []
+		},
+		"catOperator": {
+			"type": "string",
+			"default": "any"
+		},
+		"isPreview": {
+			"type": "boolean",
+			"default": false
+		},
+		"stockStatus": {
+			"type": "array"
+		},
+		"editMode": {
+			"type": "boolean",
+			"default": true
+		},
+		"orderby": {
+			"type": "string",
+			"enum": [
+				"date",
+				"popularity",
+				"price_asc",
+				"price_desc",
+				"rating",
+				"title",
+				"menu_order"
+			],
+			"default": "date"
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/product-new/block.js → assets/js/blocks/product-new/block.tsx

@@ -2,34 +2,39 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
 import { Disabled, PanelBody } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
-import PropTypes from 'prop-types';
 import GridContentControl from '@woocommerce/editor-components/grid-content-control';
 import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
 import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
 import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 import { getSetting } from '@woocommerce/settings';
 
+/**
+ * Internal dependencies
+ */
+import { ProductNewestBlockProps } from './types';
 /**
  * Component to handle edit mode of "Newest Products".
  */
-class ProductNewestBlock extends Component {
-	getInspectorControls() {
-		const { attributes, setAttributes } = this.props;
-		const {
-			categories,
-			catOperator,
-			columns,
-			contentVisibility,
-			rows,
-			alignButtons,
-			stockStatus,
-		} = attributes;
-
+export const ProductNewestBlock = ( {
+	attributes,
+	name,
+	setAttributes,
+}: ProductNewestBlockProps ): JSX.Element => {
+	const {
+		categories,
+		catOperator,
+		columns,
+		contentVisibility,
+		rows,
+		alignButtons,
+		stockStatus,
+		isPreview,
+	} = attributes;
+	const getInspectorControls = () => {
 		return (
 			<InspectorControls key="inspector">
 				<PanelBody
@@ -91,42 +96,17 @@ class ProductNewestBlock extends Component {
 				</PanelBody>
 			</InspectorControls>
 		);
+	};
+	if ( isPreview ) {
+		return gridBlockPreview;
 	}
-
-	render() {
-		const { attributes, name } = this.props;
-
-		if ( attributes.isPreview ) {
-			return gridBlockPreview;
-		}
-
-		return (
-			<>
-				{ this.getInspectorControls() }
-				<Disabled>
-					<ServerSideRender
-						block={ name }
-						attributes={ attributes }
-					/>
-				</Disabled>
-			</>
-		);
-	}
-}
-
-ProductNewestBlock.propTypes = {
-	/**
-	 * The attributes for this block
-	 */
-	attributes: PropTypes.object.isRequired,
-	/**
-	 * The register block name.
-	 */
-	name: PropTypes.string.isRequired,
-	/**
-	 * A callback to update attributes
-	 */
-	setAttributes: PropTypes.func.isRequired,
+	return (
+		<>
+			{ getInspectorControls() }
+			<Disabled>
+				<ServerSideRender block={ name } attributes={ attributes } />
+			</Disabled>
+		</>
+	);
 };
-
 export default ProductNewestBlock;

assets/js/blocks/product-new/edit.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { ProductNewestBlock } from './block';
+import { ProductNewestBlockProps } from './types';
+
+export const Edit = (
+	props: unknown & ProductNewestBlockProps
+): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<ProductNewestBlock { ...props } />
+		</div>
+	);
+};

assets/js/blocks/product-new/index.js → assets/js/blocks/product-new/index.tsx

@@ -8,12 +8,13 @@ import { Icon, sparkles } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Block from './block';
 import sharedAttributes, {
 	sharedAttributeBlockTypes,
 } from '../../utils/shared-attributes';
+import { Edit } from './edit';
+import metadata from './block.json';
 
-registerBlockType( 'woocommerce/product-new', {
+registerBlockType( metadata, {
 	title: __( 'Newest Products', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
@@ -23,18 +24,9 @@ registerBlockType( 'woocommerce/product-new', {
 			/>
 		),
 	},
-	category: 'woocommerce',
-	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
-	description: __(
-		'Display a grid of your newest products.',
-		'woo-gutenberg-products-block'
-	),
-	supports: {
-		align: [ 'wide', 'full' ],
-		html: false,
-	},
 	attributes: {
 		...sharedAttributes,
+		...metadata.attributes,
 	},
 	transforms: {
 		from: [
@@ -52,12 +44,8 @@ registerBlockType( 'woocommerce/product-new', {
 	/**
 	 * Renders and manages the block.
 	 *
-	 * @param {Object} props Props to pass to block.
 	 */
-	edit( props ) {
-		return <Block { ...props } />;
-	},
-
+	edit: Edit,
 	save() {
 		return null;
 	},

assets/js/blocks/product-new/types.ts

@@ -0,0 +1,40 @@
+interface Attributes {
+	columns: number;
+	rows: number;
+	alignButtons: boolean;
+	contentVisibility: {
+		image: boolean;
+		title: boolean;
+		price: boolean;
+		rating: boolean;
+		button: boolean;
+	};
+	categories: Array< number >;
+	catOperator: string;
+	isPreview: boolean;
+	stockStatus: Array< string >;
+	editMode: boolean;
+	orderby:
+		| 'date'
+		| 'popularity'
+		| 'price_asc'
+		| 'price_desc'
+		| 'rating'
+		| 'title'
+		| 'menu_order';
+}
+
+export interface ProductNewestBlockProps {
+	/**
+	 * The attributes for this block
+	 */
+	attributes: Attributes;
+	/**
+	 * The register block name.
+	 */
+	name: string;
+	/**
+	 * A callback to update attributes
+	 */
+	setAttributes: ( attributes: Partial< Attributes > ) => void;
+}

checkstyle.xml

@@ -3328,12 +3328,12 @@
   Overload 2 of 2, '(name: string, settings: BlockConfiguration<{ columns: unknown; rows: unknown; alignButtons: unknown; categories: unknown; catOperator: unknown; contentVisibility: unknown; isPreview: unknown; stockStatus: unknown; editMode: unknown; orderby: unknown; }>): Block<...> | undefined', gave the following error.
     Argument of type '{ name: string; title: string; category: string; keywords: string[]; description: string; supports: { align: string[]; html: boolean; }; example: { attributes: { isPreview: boolean; }; }; attributes: { columns: { ...; }; ... 8 more ...; orderby: { ...; }; }; textdomain: string; apiVersion: number; $schema: string; }' is not assignable to parameter of type 'string'." source="TS2769" />
 </file>
-<file name="assets/js/blocks/product-new/block.js">
+<file name="assets/js/blocks/product-new/block.tsx">
 <error line="8" column="30" severity="error" message="Could not find a declaration file for module &apos;@wordpress/server-side-render&apos;. &apos;/home/runner/work/woocommerce-blocks/woocommerce-blocks/node_modules/@wordpress/server-side-render/build/index.js&apos; implicitly has an &apos;any&apos; type.
   Try `npm i --save-dev @types/wordpress__server-side-render` if it exists or add a new declaration (.d.ts) file containing `declare module &apos;@wordpress/server-side-render&apos;;`" source="TS7016" />
 <error line="82" column="20" severity="error" message="Parameter &apos;value&apos; implicitly has an &apos;any[]&apos; type." source="TS7006" />
 </file>
-<file name="assets/js/blocks/product-new/index.js">
+<file name="assets/js/blocks/product-new/index.tsx">
 <error line="17" column="1" severity="error" message="No overload matches this call.
   Overload 1 of 2, &apos;(metadata: BlockConfiguration&lt;{ columns: unknown; rows: unknown; alignButtons: unknown; categories: unknown; catOperator: unknown; contentVisibility: unknown; isPreview: unknown; stockStatus: unknown; }&gt;, settings?: Partial&lt;BlockConfiguration&lt;{ columns: unknown; rows: unknown; ... 5 more ...; stockStatus: unknown; }&gt;&gt; | undefined): Block&lt;...&gt; | undefined&apos;, gave the following error.
     Argument of type &apos;string&apos; is not assignable to parameter of type &apos;BlockConfiguration&lt;{ columns: unknown; rows: unknown; alignButtons: unknown; categories: unknown; catOperator: unknown; contentVisibility: unknown; isPreview: unknown; stockStatus: unknown; }&gt;&apos;.

docs/internal-developers/translations/translation-loading.md

@@ -39,7 +39,7 @@ msgstr ""
 #: assets/js/blocks/handpicked-products/block.js:42
 #: assets/js/blocks/product-best-sellers/block.js:34
 #: assets/js/blocks/product-category/block.js:157
-#: assets/js/blocks/product-new/block.js:36
+#: assets/js/blocks/product-new/block.tsx:36
 #: assets/js/blocks/product-on-sale/block.js:52
 #: assets/js/blocks/product-tag/block.js:121
 #: assets/js/blocks/product-top-rated/block.js:36