From 296eca1877f2ebede68102278807481dc8110ad1 Mon Sep 17 00:00:00 2001 From: Hritik Chaudhary <33057454+hritikchaudhary@users.noreply.github.com> Date: Thu, 25 May 2023 01:56:01 +0530 Subject: [PATCH 1/4] replace propTypes and converted to tsx - product-top-rated/block.js --- assets/js/blocks/product-top-rated/block.js | 132 -------------------- 1 file changed, 132 deletions(-) delete mode 100644 assets/js/blocks/product-top-rated/block.js diff --git a/assets/js/blocks/product-top-rated/block.js b/assets/js/blocks/product-top-rated/block.js deleted file mode 100644 index 65a58b199fa..00000000000 --- a/assets/js/blocks/product-top-rated/block.js +++ /dev/null @@ -1,132 +0,0 @@ -/** - * 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'; - -/** - * 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; - - return ( - - - - - - - setAttributes( { contentVisibility: value } ) - } - /> - - - { - const ids = value.map( ( { id } ) => id ); - setAttributes( { categories: ids } ); - } } - operator={ catOperator } - onOperatorChange={ ( value = 'any' ) => - setAttributes( { catOperator: value } ) - } - /> - - - - - - ); - } - - render() { - const { name, attributes } = this.props; - - if ( attributes.isPreview ) { - return gridBlockPreview; - } - - return ( - <> - { this.getInspectorControls() } - - - - - ); - } -} - -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, -}; - -export default ProductTopRatedBlock; From 90a3594a553e27904f775c5eb4d6070e94c31bf4 Mon Sep 17 00:00:00 2001 From: Hritik Chaudhary <33057454+hritikchaudhary@users.noreply.github.com> Date: Thu, 25 May 2023 01:58:38 +0530 Subject: [PATCH 2/4] replace propTypes and converted to tsx - product-top-rated/block.js --- assets/js/blocks/product-top-rated/block.tsx | 122 +++++++++++++++++++ assets/js/blocks/product-top-rated/types.ts | 40 ++++++ 2 files changed, 162 insertions(+) create mode 100644 assets/js/blocks/product-top-rated/block.tsx create mode 100644 assets/js/blocks/product-top-rated/types.ts diff --git a/assets/js/blocks/product-top-rated/block.tsx b/assets/js/blocks/product-top-rated/block.tsx new file mode 100644 index 00000000000..648cf9adf7a --- /dev/null +++ b/assets/js/blocks/product-top-rated/block.tsx @@ -0,0 +1,122 @@ +/** + * 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 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< Props > { + getInspectorControls() { + const { attributes, setAttributes } = this.props; + const { + categories, + catOperator, + columns, + contentVisibility, + rows, + alignButtons, + stockStatus, + } = attributes; + + return ( + + + + + + + setAttributes( { contentVisibility: value } ) + } + /> + + + { + const ids = value.map( ( { id } ) => id ); + setAttributes( { categories: ids } ); + } } + operator={ catOperator } + onOperatorChange={ ( value = 'any' ) => + setAttributes( { catOperator: value } ) + } + /> + + + + + + ); + } + + render() { + const { name, attributes } = this.props; + + if ( attributes.isPreview ) { + return gridBlockPreview; + } + + return ( + <> + { this.getInspectorControls() } + + + + + ); + } +} + +export default ProductTopRatedBlock; diff --git a/assets/js/blocks/product-top-rated/types.ts b/assets/js/blocks/product-top-rated/types.ts new file mode 100644 index 00000000000..648a3ad91a4 --- /dev/null +++ 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; +} From 6a398d19cf1a180e454795b9791dfb67ee930236 Mon Sep 17 00:00:00 2001 From: Hritik Chaudhary <33057454+hritikchaudhary@users.noreply.github.com> Date: Fri, 26 May 2023 01:16:40 +0530 Subject: [PATCH 3/4] converted product-top-rated to typescript --- assets/js/blocks/product-top-rated/block.json | 92 +++++++++++++++++++ assets/js/blocks/product-top-rated/block.tsx | 64 ++++++------- assets/js/blocks/product-top-rated/edit.tsx | 20 ++++ .../product-top-rated/{index.js => index.tsx} | 19 ++-- 4 files changed, 147 insertions(+), 48 deletions(-) create mode 100644 assets/js/blocks/product-top-rated/block.json create mode 100644 assets/js/blocks/product-top-rated/edit.tsx rename assets/js/blocks/product-top-rated/{index.js => index.tsx} (75%) diff --git a/assets/js/blocks/product-top-rated/block.json b/assets/js/blocks/product-top-rated/block.json new file mode 100644 index 00000000000..0117d224c4d --- /dev/null +++ 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.tsx b/assets/js/blocks/product-top-rated/block.tsx index 648cf9adf7a..7c9a89eaf78 100644 --- a/assets/js/blocks/product-top-rated/block.tsx +++ b/assets/js/blocks/product-top-rated/block.tsx @@ -2,7 +2,6 @@ * 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'; @@ -17,24 +16,26 @@ import { getSetting } from '@woocommerce/settings'; * Internal dependencies */ import { Props } from './types'; - /** * Component to handle edit mode of "Top Rated Products". */ +export const ProductTopRatedBlock = ( { + attributes, + name, + setAttributes, +}: Props ) => { + const { + categories, + catOperator, + columns, + contentVisibility, + rows, + alignButtons, + stockStatus, + isPreview, + } = attributes; -class ProductTopRatedBlock extends Component< Props > { - getInspectorControls() { - const { attributes, setAttributes } = this.props; - const { - categories, - catOperator, - columns, - contentVisibility, - rows, - alignButtons, - stockStatus, - } = attributes; - + const getInspectorControls = () => { return ( { ); - } - - render() { - const { name, attributes } = this.props; - - if ( attributes.isPreview ) { - return gridBlockPreview; - } + }; - return ( - <> - { this.getInspectorControls() } - - - - - ); + if ( isPreview ) { + return gridBlockPreview; } -} + + return ( + <> + { getInspectorControls() } + + + + + ); +}; export default ProductTopRatedBlock; diff --git a/assets/js/blocks/product-top-rated/edit.tsx b/assets/js/blocks/product-top-rated/edit.tsx new file mode 100644 index 00000000000..d84384d22a8 --- /dev/null +++ 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 ( +
+ +
+ ); +}; diff --git a/assets/js/blocks/product-top-rated/index.js b/assets/js/blocks/product-top-rated/index.tsx similarity index 75% rename from assets/js/blocks/product-top-rated/index.js rename to assets/js/blocks/product-top-rated/index.tsx index d8ffb01462e..43d3eb0bcbd 100644 --- a/assets/js/blocks/product-top-rated/index.js +++ b/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: ( 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 ; - }, + edit: Edit, save() { return null; From 3496cc5f931c7dc58c15ea1308910b2279abf440 Mon Sep 17 00:00:00 2001 From: Hritik Chaudhary <33057454+hritikchaudhary@users.noreply.github.com> Date: Fri, 26 May 2023 01:27:44 +0530 Subject: [PATCH 4/4] added JSX.Element --- assets/js/blocks/product-top-rated/block.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/product-top-rated/block.tsx b/assets/js/blocks/product-top-rated/block.tsx index 7c9a89eaf78..388abb6b6d2 100644 --- a/assets/js/blocks/product-top-rated/block.tsx +++ b/assets/js/blocks/product-top-rated/block.tsx @@ -23,7 +23,7 @@ export const ProductTopRatedBlock = ( { attributes, name, setAttributes, -}: Props ) => { +}: Props ): JSX.Element => { const { categories, catOperator,