diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts b/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts
index 19e52de781d..a4a79bc4006 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts
@@ -110,7 +110,7 @@ export default {
export type ReviewBlockAttributes = BlockAttributes & {
editMode: boolean;
imageType: string;
- orderby: string;
+ orderby: 'most-recent' | 'highest-rating' | 'lowest-rating';
reviewsOnLoadMore: number;
reviewsOnPageLoad: number;
showLoadMore: boolean;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.tsx
similarity index 71%
rename from plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.js
rename to plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.tsx
index 3c480371090..382b184c9bf 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.tsx
@@ -3,31 +3,39 @@
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
-import PropTypes from 'prop-types';
import { Disabled } from '@wordpress/components';
import { getSetting } from '@woocommerce/settings';
-import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder';
+import ErrorPlaceholder, {
+ ErrorObject,
+} from '@woocommerce/editor-components/error-placeholder';
import LoadMoreButton from '@woocommerce/base-components/load-more-button';
import {
ReviewList,
ReviewSortSelect,
} from '@woocommerce/base-components/reviews';
+import type { Review } from '@woocommerce/base-components/reviews/types';
import withReviews from '@woocommerce/base-hocs/with-reviews';
+/**
+ * Internal dependencies
+ */
+import { ReviewBlockAttributes } from './attributes';
+
+interface EditorBlockProps {
+ attributes: ReviewBlockAttributes;
+ reviews: Review[];
+ totalReviews: number;
+ error?: ErrorObject;
+ isLoading: boolean;
+ noReviewsPlaceholder: React.ComponentType< {
+ attributes: EditorBlockProps[ 'attributes' ];
+ } >;
+}
+
/**
* Block rendered in the editor.
*/
-class EditorBlock extends Component {
- static propTypes = {
- /**
- * The attributes for this block.
- */
- attributes: PropTypes.object.isRequired,
- // from withReviews
- reviews: PropTypes.array,
- totalReviews: PropTypes.number,
- };
-
+class EditorBlock extends Component< EditorBlockProps > {
render() {
const {
attributes,
@@ -63,6 +71,7 @@ class EditorBlock extends Component {
onChange={ () => null }
/>
) }
+
{ attributes.showLoadMore && totalReviews > reviews.length && (
null }
/>
) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx
index c08b82d112e..0c1329bc02a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx
@@ -10,7 +10,7 @@ import { EditorContainerBlockProps } from '@woocommerce/blocks/reviews/types';
/**
* Internal dependencies
*/
-import EditorBlock from './editor-block.js';
+import EditorBlock from './editor-block';
import { getBlockClassName, getSortArgs } from './utils.js';
const EditorContainerBlock = ( {
diff --git a/plugins/woocommerce/changelog/44594-chore-42294-convert-reviews-editor-block-file-to-typescript b/plugins/woocommerce/changelog/44594-chore-42294-convert-reviews-editor-block-file-to-typescript
new file mode 100644
index 00000000000..eb2da7196e9
--- /dev/null
+++ b/plugins/woocommerce/changelog/44594-chore-42294-convert-reviews-editor-block-file-to-typescript
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Convert editor-block.js from the Reviews block to editor-block.tsx and replace propTypes with TypeScript definitions.
+