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.js b/assets/js/blocks/product-top-rated/block.tsx similarity index 72% rename from assets/js/blocks/product-top-rated/block.js rename to assets/js/blocks/product-top-rated/block.tsx index 65a58b199fa..388abb6b6d2 100644 --- a/assets/js/blocks/product-top-rated/block.js +++ b/assets/js/blocks/product-top-rated/block.tsx @@ -2,11 +2,9 @@ * 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'; @@ -14,22 +12,30 @@ import ProductStockControl from '@woocommerce/editor-components/product-stock-co 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 ( ); - } - - render() { - const { name, attributes } = this.props; + }; - if ( attributes.isPreview ) { - return gridBlockPreview; - } - - return ( - <> - { this.getInspectorControls() } - - - - - ); + 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() } + + + + + ); }; 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; 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; +}