Remove propTypes definitions from Top Rated Products block (#9595)

* replace propTypes and converted to tsx - product-top-rated/block.js * replace propTypes and converted to tsx - product-top-rated/block.js * converted product-top-rated to typescript * added JSX.Element --------- Co-authored-by: Niels Lange <[email protected]>
woocommerce · May 26, 2023 · 94fc948 · 94fc948
1 parent 3a2ab1c
commit 94fc948
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 60 deletions.
diff --git a/assets/js/blocks/product-top-rated/block.json b/assets/js/blocks/product-top-rated/block.json
@@ -0,0 +1,92 @@
+{
+	"name": "woocommerce/product-top-rated",
+	"title": "Top Rated Products",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce", "woo-gutenberg-products-block" ],
+	"description": "Display a grid of your top rated 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": "rating"
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}
diff --git a/assets/js/blocks/product-top-rated/block.js → assets/js/blocks/product-top-rated/block.tsx b/assets/js/blocks/product-top-rated/block.js → assets/js/blocks/product-top-rated/block.tsx
@@ -2,34 +2,40 @@
  * 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 { Props } from './types';
 /**
  * Component to handle edit mode of "Top Rated Products".
  */
-class ProductTopRatedBlock extends Component {
-	getInspectorControls() {
-		const { attributes, setAttributes } = this.props;
-		const {
-			categories,
-			catOperator,
-			columns,
-			contentVisibility,
-			rows,
-			alignButtons,
-			stockStatus,
-		} = attributes;
+export const ProductTopRatedBlock = ( {
+	attributes,
+	name,
+	setAttributes,
+}: Props ): JSX.Element => {
+	const {
+		categories,
+		catOperator,
+		columns,
+		contentVisibility,
+		rows,
+		alignButtons,
+		stockStatus,
+		isPreview,
+	} = attributes;
 
+	const getInspectorControls = () => {
 		return (
 			<InspectorControls key="inspector">
 				<PanelBody
@@ -91,42 +97,20 @@ class ProductTopRatedBlock extends Component {
 				</PanelBody>
 			</InspectorControls>
 		);
-	}
-
-	render() {
-		const { name, attributes } = this.props;
+	};
 
-		if ( attributes.isPreview ) {
-			return gridBlockPreview;
-		}
-
-		return (
-			<>
-				{ this.getInspectorControls() }
-				<Disabled>
-					<ServerSideRender
-						block={ name }
-						attributes={ attributes }
-					/>
-				</Disabled>
-			</>
-		);
+	if ( isPreview ) {
+		return gridBlockPreview;
 	}
-}
 
-ProductTopRatedBlock.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 ProductTopRatedBlock;
diff --git a/assets/js/blocks/product-top-rated/edit.tsx b/assets/js/blocks/product-top-rated/edit.tsx
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { ProductTopRatedBlock } from './block';
+import { Props } from './types';
+
+export const Edit = ( props: unknown & Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<ProductTopRatedBlock { ...props } />
+		</div>
+	);
+};
diff --git a/assets/js/blocks/product-top-rated/index.js → assets/js/blocks/product-top-rated/index.tsx b/assets/js/blocks/product-top-rated/index.js → assets/js/blocks/product-top-rated/index.tsx
@@ -9,15 +9,13 @@ import { Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Block from './block';
+import metadata from './block.json';
 import sharedAttributes, {
 	sharedAttributeBlockTypes,
 } from '../../utils/shared-attributes';
+import { Edit } from './edit';
 
-const blockTypeName = 'woocommerce/product-top-rated';
-
-registerBlockType( blockTypeName, {
-	title: __( 'Top Rated Products', 'woo-gutenberg-products-block' ),
+registerBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
@@ -32,19 +30,16 @@ registerBlockType( blockTypeName, {
 		'Display a grid of your top rated products.',
 		'woo-gutenberg-products-block'
 	),
-	supports: {
-		align: [ 'wide', 'full' ],
-		html: false,
-	},
 	attributes: {
 		...sharedAttributes,
+		...metadata.attributes,
 	},
 	transforms: {
 		from: [
 			{
 				type: 'block',
 				blocks: sharedAttributeBlockTypes.filter(
-					( value ) => value !== blockTypeName
+					( value ) => value !== 'woocommerce/product-top-rated'
 				),
 				transform: ( attributes ) =>
 					createBlock( 'woocommerce/product-top-rated', attributes ),
@@ -57,9 +52,7 @@ registerBlockType( blockTypeName, {
 	 *
 	 * @param {Object} props Props to pass to block.
 	 */
-	edit( props ) {
-		return <Block { ...props } />;
-	},
+	edit: Edit,
 
 	save() {
 		return null;

diff --git a/assets/js/blocks/product-top-rated/types.ts b/assets/js/blocks/product-top-rated/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 Props {
+	/**
+	 * The attributes for this block
+	 */
+	attributes: Attributes;
+	/**
+	 * The register block name.
+	 */
+	name: string;
+	/**
+	 * A callback to update attributes
+	 */
+	setAttributes: ( attributes: Partial< Attributes > ) => void;
+}