diff --git a/assets/js/blocks/reviews/reviews-by-product/edit.js b/assets/js/blocks/reviews/reviews-by-product/block.tsx
similarity index 80%
rename from assets/js/blocks/reviews/reviews-by-product/edit.js
rename to assets/js/blocks/reviews/reviews-by-product/block.tsx
index 0ef1bee3a38..44692462936 100644
--- a/assets/js/blocks/reviews/reviews-by-product/edit.js
+++ b/assets/js/blocks/reviews/reviews-by-product/block.tsx
@@ -10,7 +10,6 @@ import {
withSpokenMessages,
} from '@wordpress/components';
import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
-import PropTypes from 'prop-types';
import ProductControl from '@woocommerce/editor-components/product-control';
import { Icon, commentContent } from '@wordpress/icons';
@@ -18,31 +17,26 @@ import { Icon, commentContent } from '@wordpress/icons';
* Internal dependencies
*/
import EditorContainerBlock from '../editor-container-block.js';
-import NoReviewsPlaceholder from './no-reviews-placeholder.js';
import {
getBlockControls,
getSharedReviewContentControls,
getSharedReviewListControls,
} from '../edit-utils.js';
+import type { ReviewsByProductEditorProps, SearchListItemProps } from './types';
+import NoReviewsPlaceholder from './no-reviews-placeholder';
/**
* Component to handle edit mode of "Reviews by Product".
*
- * @param {Object} props Incoming props for the component.
- * @param {Object} props.attributes Incoming block attributes.
- * @param {function(any):any} props.debouncedSpeak
- * @param {function(any):any} props.setAttributes Setter for block attributes.
*/
const ReviewsByProductEditor = ( {
attributes,
debouncedSpeak,
setAttributes,
-} ) => {
+}: ReviewsByProductEditorProps ) => {
const { editMode, productId } = attributes;
- const renderProductControlItem = ( args ) => {
- const { item = 0 } = args;
-
+ const renderProductControlItem = ( args: SearchListItemProps ) => {
return (
);
@@ -189,21 +183,4 @@ const ReviewsByProductEditor = ( {
);
};
-ReviewsByProductEditor.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,
- // from withSpokenMessages
- debouncedSpeak: PropTypes.func.isRequired,
-};
-
export default withSpokenMessages( ReviewsByProductEditor );
diff --git a/assets/js/blocks/reviews/reviews-by-product/edit.tsx b/assets/js/blocks/reviews/reviews-by-product/edit.tsx
new file mode 100644
index 00000000000..e241189c5f7
--- /dev/null
+++ b/assets/js/blocks/reviews/reviews-by-product/edit.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import type { ReviewsByProductEditorProps } from './types';
+
+export const Edit = (
+ props: unknown & ReviewsByProductEditorProps
+): JSX.Element => {
+ const blockProps = useBlockProps();
+
+ return (
+
+
+
+ );
+};
diff --git a/assets/js/blocks/reviews/reviews-by-product/index.js b/assets/js/blocks/reviews/reviews-by-product/index.tsx
similarity index 94%
rename from assets/js/blocks/reviews/reviews-by-product/index.js
rename to assets/js/blocks/reviews/reviews-by-product/index.tsx
index ff6d152d41b..c9927088dc7 100644
--- a/assets/js/blocks/reviews/reviews-by-product/index.js
+++ b/assets/js/blocks/reviews/reviews-by-product/index.tsx
@@ -8,7 +8,7 @@ import { Icon, commentContent } from '@wordpress/icons';
* Internal dependencies
*/
import '../editor.scss';
-import Editor from './edit';
+import { Edit } from './edit';
import sharedAttributes from '../attributes';
import save from '../save.js';
import { example } from '../example';
@@ -64,9 +64,7 @@ registerBlockType( 'woocommerce/reviews-by-product', {
*
* @param {Object} props Props to pass to block.
*/
- edit( props ) {
- return ;
- },
+ edit: Edit,
/**
* Save the props to post content.
diff --git a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx
similarity index 80%
rename from assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
rename to assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx
index 9d17ee9e350..85301538094 100644
--- a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
+++ b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx
@@ -3,13 +3,21 @@
*/
import { __, sprintf } from '@wordpress/i18n';
import { Placeholder, Spinner } from '@wordpress/components';
-import PropTypes from 'prop-types';
import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder';
import { Icon, commentContent } from '@wordpress/icons';
import { withProduct } from '@woocommerce/block-hocs';
import { decodeEntities } from '@wordpress/html-entities';
+/**
+ * Internal dependencies
+ */
+import type { NoReviewsPlaceholderProps } from './types';
-const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => {
+const NoReviewsPlaceholder = ( {
+ error,
+ getProduct,
+ isLoading,
+ product,
+}: NoReviewsPlaceholderProps ) => {
const renderApiError = () => (
{
);
};
-NoReviewsPlaceholder.propTypes = {
- // from withProduct
- error: PropTypes.object,
- isLoading: PropTypes.bool,
- product: PropTypes.shape( {
- name: PropTypes.node,
- review_count: PropTypes.number,
- } ),
-};
-
export default withProduct( NoReviewsPlaceholder );
diff --git a/assets/js/blocks/reviews/reviews-by-product/types.ts b/assets/js/blocks/reviews/reviews-by-product/types.ts
new file mode 100644
index 00000000000..e7b6dfc535e
--- /dev/null
+++ b/assets/js/blocks/reviews/reviews-by-product/types.ts
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { ErrorObject } from '@woocommerce/editor-components/error-placeholder';
+import { renderItemArgs } from '@woocommerce/editor-components/search-list-control/types';
+
+export interface ReviewsByProductEditorProps {
+ attributes: {
+ editMode: boolean;
+ categoryIds: number[];
+ showProductName: boolean;
+ productId: number[];
+ };
+ setAttributes: ( attributes: {
+ editMode?: boolean;
+ categoryIds?: number[];
+ showProductName?: boolean;
+ productId?: number[];
+ } ) => void;
+ debouncedSpeak: ( message: string ) => void;
+}
+
+export interface SearchListItemProps extends renderItemArgs {
+ name: string;
+ reviewCount: number;
+}
+
+export interface NoReviewsPlaceholderProps {
+ error: ErrorObject;
+ getProduct: () => void;
+ isLoading: boolean;
+ product?: {
+ name: string;
+ };
+}
diff --git a/checkstyle.xml b/checkstyle.xml
index 1b045b6b42d..c0f7787ac87 100644
--- a/checkstyle.xml
+++ b/checkstyle.xml
@@ -3643,13 +3643,13 @@
Type '{ type: string; default: boolean; }' is not assignable to type 'BlockAttribute<unknown>'." source="TS2769" />
-
+
-
+
@@ -3664,7 +3664,7 @@
-
+