Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit ac2b6d6

Browse files
hritikchaudharynielslange
hritikchaudhary
and
nielslange
authored
Remove propTypes definitions from Newest Products block (#9613)
* converted product-new block * converted product-new block * filename changes in readme and checkstyle.xml --------- Co-authored-by: Niels Lange <[email protected]>
1 parent f105e04 commit ac2b6d6

File tree

8 files changed

+195
-73
lines changed

8 files changed

+195
-73
lines changed

‎assets/js/blocks/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ The scss files are split so that things in `style` are added to the editor _and_
1717

1818
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.
1919

20-
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.
20+
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.
2121

22-
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)
22+
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)
2323

2424
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‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
{
2+
"name": "woocommerce/product-new",
3+
"title": "Newest Products",
4+
"category": "woocommerce",
5+
"keywords": [ "WooCommerce", "woo-gutenberg-products-block" ],
6+
"description": "Display a grid of your newest products.",
7+
"supports": {
8+
"align": [ "wide", "full" ],
9+
"html": false
10+
},
11+
"attributes": {
12+
"columns": {
13+
"type": "number",
14+
"default": 3
15+
},
16+
"rows": {
17+
"type": "number",
18+
"default": 3
19+
},
20+
"alignButtons": {
21+
"type": "boolean",
22+
"default": false
23+
},
24+
"contentVisibility": {
25+
"type": "object",
26+
"default": {
27+
"image": true,
28+
"title": true,
29+
"price": true,
30+
"rating": true,
31+
"button": true
32+
},
33+
"properties": {
34+
"image": {
35+
"type": "boolean",
36+
"default": true
37+
},
38+
"title": {
39+
"type": "boolean",
40+
"default": true
41+
},
42+
"price": {
43+
"type": "boolean",
44+
"default": true
45+
},
46+
"rating": {
47+
"type": "boolean",
48+
"default": true
49+
},
50+
"button": {
51+
"type": "boolean",
52+
"default": true
53+
}
54+
}
55+
},
56+
"categories": {
57+
"type": "array",
58+
"default": []
59+
},
60+
"catOperator": {
61+
"type": "string",
62+
"default": "any"
63+
},
64+
"isPreview": {
65+
"type": "boolean",
66+
"default": false
67+
},
68+
"stockStatus": {
69+
"type": "array"
70+
},
71+
"editMode": {
72+
"type": "boolean",
73+
"default": true
74+
},
75+
"orderby": {
76+
"type": "string",
77+
"enum": [
78+
"date",
79+
"popularity",
80+
"price_asc",
81+
"price_desc",
82+
"rating",
83+
"title",
84+
"menu_order"
85+
],
86+
"default": "date"
87+
}
88+
},
89+
"textdomain": "woo-gutenberg-products-block",
90+
"apiVersion": 2,
91+
"$schema": "https://schemas.wp.org/trunk/block.json"
92+
}

‎assets/js/blocks/product-new/block.js‎ renamed to ‎assets/js/blocks/product-new/block.tsx‎

Lines changed: 31 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,39 @@
22
* External dependencies
33
*/
44
import { __ } from '@wordpress/i18n';
5-
import { Component } from '@wordpress/element';
65
import { Disabled, PanelBody } from '@wordpress/components';
76
import { InspectorControls } from '@wordpress/block-editor';
87
import ServerSideRender from '@wordpress/server-side-render';
9-
import PropTypes from 'prop-types';
108
import GridContentControl from '@woocommerce/editor-components/grid-content-control';
119
import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
1210
import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
1311
import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
1412
import { gridBlockPreview } from '@woocommerce/resource-previews';
1513
import { getSetting } from '@woocommerce/settings';
1614

15+
/**
16+
* Internal dependencies
17+
*/
18+
import { ProductNewestBlockProps } from './types';
1719
/**
1820
* Component to handle edit mode of "Newest Products".
1921
*/
20-
class ProductNewestBlock extends Component {
21-
getInspectorControls() {
22-
const { attributes, setAttributes } = this.props;
23-
const {
24-
categories,
25-
catOperator,
26-
columns,
27-
contentVisibility,
28-
rows,
29-
alignButtons,
30-
stockStatus,
31-
} = attributes;
32-
22+
export const ProductNewestBlock = ( {
23+
attributes,
24+
name,
25+
setAttributes,
26+
}: ProductNewestBlockProps ): JSX.Element => {
27+
const {
28+
categories,
29+
catOperator,
30+
columns,
31+
contentVisibility,
32+
rows,
33+
alignButtons,
34+
stockStatus,
35+
isPreview,
36+
} = attributes;
37+
const getInspectorControls = () => {
3338
return (
3439
<InspectorControls key="inspector">
3540
<PanelBody
@@ -91,42 +96,17 @@ class ProductNewestBlock extends Component {
9196
</PanelBody>
9297
</InspectorControls>
9398
);
99+
};
100+
if ( isPreview ) {
101+
return gridBlockPreview;
94102
}
95-
96-
render() {
97-
const { attributes, name } = this.props;
98-
99-
if ( attributes.isPreview ) {
100-
return gridBlockPreview;
101-
}
102-
103-
return (
104-
<>
105-
{ this.getInspectorControls() }
106-
<Disabled>
107-
<ServerSideRender
108-
block={ name }
109-
attributes={ attributes }
110-
/>
111-
</Disabled>
112-
</>
113-
);
114-
}
115-
}
116-
117-
ProductNewestBlock.propTypes = {
118-
/**
119-
* The attributes for this block
120-
*/
121-
attributes: PropTypes.object.isRequired,
122-
/**
123-
* The register block name.
124-
*/
125-
name: PropTypes.string.isRequired,
126-
/**
127-
* A callback to update attributes
128-
*/
129-
setAttributes: PropTypes.func.isRequired,
103+
return (
104+
<>
105+
{ getInspectorControls() }
106+
<Disabled>
107+
<ServerSideRender block={ name } attributes={ attributes } />
108+
</Disabled>
109+
</>
110+
);
130111
};
131-
132112
export default ProductNewestBlock;

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { useBlockProps } from '@wordpress/block-editor';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import { ProductNewestBlock } from './block';
10+
import { ProductNewestBlockProps } from './types';
11+
12+
export const Edit = (
13+
props: unknown & ProductNewestBlockProps
14+
): JSX.Element => {
15+
const blockProps = useBlockProps();
16+
17+
return (
18+
<div { ...blockProps }>
19+
<ProductNewestBlock { ...props } />
20+
</div>
21+
);
22+
};

‎assets/js/blocks/product-new/index.js‎ renamed to ‎assets/js/blocks/product-new/index.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import { Icon, sparkles } from '@wordpress/icons';
88
/**
99
* Internal dependencies
1010
*/
11-
import Block from './block';
1211
import sharedAttributes, {
1312
sharedAttributeBlockTypes,
1413
} from '../../utils/shared-attributes';
14+
import { Edit } from './edit';
15+
import metadata from './block.json';
1516

16-
registerBlockType( 'woocommerce/product-new', {
17+
registerBlockType( metadata, {
1718
title: __( 'Newest Products', 'woo-gutenberg-products-block' ),
1819
icon: {
1920
src: (
@@ -23,18 +24,9 @@ registerBlockType( 'woocommerce/product-new', {
2324
/>
2425
),
2526
},
26-
category: 'woocommerce',
27-
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
28-
description: __(
29-
'Display a grid of your newest products.',
30-
'woo-gutenberg-products-block'
31-
),
32-
supports: {
33-
align: [ 'wide', 'full' ],
34-
html: false,
35-
},
3627
attributes: {
3728
...sharedAttributes,
29+
...metadata.attributes,
3830
},
3931
transforms: {
4032
from: [
@@ -52,12 +44,8 @@ registerBlockType( 'woocommerce/product-new', {
5244
/**
5345
* Renders and manages the block.
5446
*
55-
* @param {Object} props Props to pass to block.
5647
*/
57-
edit( props ) {
58-
return <Block { ...props } />;
59-
},
60-
48+
edit: Edit,
6149
save() {
6250
return null;
6351
},

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
interface Attributes {
2+
columns: number;
3+
rows: number;
4+
alignButtons: boolean;
5+
contentVisibility: {
6+
image: boolean;
7+
title: boolean;
8+
price: boolean;
9+
rating: boolean;
10+
button: boolean;
11+
};
12+
categories: Array< number >;
13+
catOperator: string;
14+
isPreview: boolean;
15+
stockStatus: Array< string >;
16+
editMode: boolean;
17+
orderby:
18+
| 'date'
19+
| 'popularity'
20+
| 'price_asc'
21+
| 'price_desc'
22+
| 'rating'
23+
| 'title'
24+
| 'menu_order';
25+
}
26+
27+
export interface ProductNewestBlockProps {
28+
/**
29+
* The attributes for this block
30+
*/
31+
attributes: Attributes;
32+
/**
33+
* The register block name.
34+
*/
35+
name: string;
36+
/**
37+
* A callback to update attributes
38+
*/
39+
setAttributes: ( attributes: Partial< Attributes > ) => void;
40+
}

‎checkstyle.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3328,12 +3328,12 @@
33283328
Overload 2 of 2, &apos;(name: string, settings: BlockConfiguration&lt;{ columns: unknown; rows: unknown; alignButtons: unknown; categories: unknown; catOperator: unknown; contentVisibility: unknown; isPreview: unknown; stockStatus: unknown; editMode: unknown; orderby: unknown; }&gt;): Block&lt;...&gt; | undefined&apos;, gave the following error.
33293329
Argument of type &apos;{ 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; }&apos; is not assignable to parameter of type &apos;string&apos;." source="TS2769" />
33303330
</file>
3331-
<file name="assets/js/blocks/product-new/block.js">
3331+
<file name="assets/js/blocks/product-new/block.tsx">
33323332
<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.
33333333
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" />
33343334
<error line="82" column="20" severity="error" message="Parameter &apos;value&apos; implicitly has an &apos;any[]&apos; type." source="TS7006" />
33353335
</file>
3336-
<file name="assets/js/blocks/product-new/index.js">
3336+
<file name="assets/js/blocks/product-new/index.tsx">
33373337
<error line="17" column="1" severity="error" message="No overload matches this call.
33383338
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.
33393339
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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ msgstr ""
3939
#: assets/js/blocks/handpicked-products/block.js:42
4040
#: assets/js/blocks/product-best-sellers/block.js:34
4141
#: assets/js/blocks/product-category/block.js:157
42-
#: assets/js/blocks/product-new/block.js:36
42+
#: assets/js/blocks/product-new/block.tsx:36
4343
#: assets/js/blocks/product-on-sale/block.js:52
4444
#: assets/js/blocks/product-tag/block.js:121
4545
#: assets/js/blocks/product-top-rated/block.js:36

0 commit comments

Comments
 (0)