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

Remove propTypes definitions from Reviews By Product #10249

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Remove propTypes definitions from Reviews By Product #10249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
245f601
renamed edit.tsx to block.tsx
hritikchaudhary Jul 18, 2023
8a5dce0
renamed index.js to index.tsx
hritikchaudhary Jul 18, 2023
82df858
renamed no-reviews-placeholder.js to no-reviews-placeholder.tsx
hritikchaudhary Jul 18, 2023
51b76a9
TS error fixes
hritikchaudhary Jul 18, 2023
ad9c37c
fixed an import
hritikchaudhary Jul 18, 2023
59705b0
Merge branch 'trunk' into issue/9539
nielslange Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 182 additions & 0 deletions assets/js/blocks/reviews/reviews-by-product/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import {
Button,
PanelBody,
Placeholder,
withSpokenMessages,
} from '@wordpress/components';
import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
import ProductControl from '@woocommerce/editor-components/product-control';
import { commentContent, Icon } from '@wordpress/icons';

/**
* Internal dependencies
*/
import EditorContainerBlock from '../editor-container-block.js';
import NoReviewsPlaceholder from './no-reviews-placeholder';
import {
getBlockControls,
getSharedReviewContentControls,
getSharedReviewListControls,
} from '../edit-utils.js';
import type { ReviewsByProductEditorProps, SearchListItemProps } from './types';

const ReviewsByProductEditor = ( {
attributes,
debouncedSpeak,
setAttributes,
}: ReviewsByProductEditorProps ) => {
const { editMode, productId } = attributes;

const renderProductControlItem = ( args: SearchListItemProps ) => {
return (
<SearchListItem
{ ...args }
countLabel={ sprintf(
/* translators: %d is the review count. */
_n(
'%d review',
'%d reviews',
args.reviewCount,
'woo-gutenberg-products-block'
),
args.reviewCount
) }
aria-label={ sprintf(
/* translators: %1$s is the item name, and %2$d is the number of reviews for the item. */
_n(
'%1$s, has %2$d review',
'%1$s, has %2$d reviews',
args.reviewCount,
'woo-gutenberg-products-block'
),
args.name,
args.reviewCount
) }
/>
);
};

const getInspectorControls = () => {
return (
<InspectorControls key="inspector">
<PanelBody
title={ __( 'Product', 'woo-gutenberg-products-block' ) }
initialOpen={ false }
>
<ProductControl
selected={ attributes.productId || 0 }
onChange={ ( value = [] ) => {
const id = value[ 0 ] ? value[ 0 ].id : 0;
setAttributes( { productId: id } );
} }
renderItem={ renderProductControlItem }
isCompact={ true }
/>
</PanelBody>
<PanelBody
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
>
{ getSharedReviewContentControls(
attributes,
setAttributes
) }
</PanelBody>
<PanelBody
title={ __(
'List Settings',
'woo-gutenberg-products-block'
) }
>
{ getSharedReviewListControls( attributes, setAttributes ) }
</PanelBody>
</InspectorControls>
);
};

const renderEditMode = () => {
const onDone = () => {
setAttributes( { editMode: false } );
debouncedSpeak(
__(
'Showing Reviews by Product block preview.',
'woo-gutenberg-products-block'
)
);
};

return (
<Placeholder
icon={
<Icon
icon={ commentContent }
className="block-editor-block-icon"
/>
}
label={ __(
'Reviews by Product',
'woo-gutenberg-products-block'
) }
className="wc-block-reviews-by-product"
>
{ __(
'Show reviews of your product to build trust',
'woo-gutenberg-products-block'
) }
<div className="wc-block-reviews__selection">
<ProductControl
selected={ attributes.productId || 0 }
onChange={ ( value = [] ) => {
const id = value[ 0 ] ? value[ 0 ].id : 0;
setAttributes( { productId: id } );
} }
queryArgs={ {
orderby: 'comment_count',
order: 'desc',
} }
renderItem={ renderProductControlItem }
/>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>
</Placeholder>
);
};

if ( ! productId || editMode ) {
return renderEditMode();
}

const buttonTitle = __(
'Edit selected product',
'woo-gutenberg-products-block'
);

return (
<>
{ getBlockControls( editMode, setAttributes, buttonTitle ) }
{ getInspectorControls() }
<EditorContainerBlock
attributes={ attributes }
icon={
<Icon
icon={ commentContent }
className="block-editor-block-icon"
/>
}
name={ __(
'Reviews by Product',
'woo-gutenberg-products-block'
) }
noReviewsPlaceholder={ NoReviewsPlaceholder }
/>
</>
);
};

export default withSpokenMessages( ReviewsByProductEditor );
182 changes: 10 additions & 172 deletions assets/js/blocks/reviews/reviews-by-product/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,184 +1,22 @@
/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import {
Button,
PanelBody,
Placeholder,
withSpokenMessages,
} from '@wordpress/components';
import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
import ProductControl from '@woocommerce/editor-components/product-control';
import { commentContent, Icon } from '@wordpress/icons';
import { useBlockProps } from '@wordpress/block-editor';

/**
* 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 { ReviewsByProductEditorProps } from './types';
import Block from './block';
import type { ReviewsByProductEditorProps } from './types';

const ReviewsByProductEditor = ( {
attributes,
debouncedSpeak,
setAttributes,
}: ReviewsByProductEditorProps ) => {
const { editMode, productId } = attributes;

const renderProductControlItem = ( args ) => {
const { item = 0 } = args;

return (
<SearchListItem
{ ...args }
countLabel={ sprintf(
/* translators: %d is the review count. */
_n(
'%d review',
'%d reviews',
item.review_count,
'woo-gutenberg-products-block'
),
item.review_count
) }
aria-label={ sprintf(
/* translators: %1$s is the item name, and %2$d is the number of reviews for the item. */
_n(
'%1$s, has %2$d review',
'%1$s, has %2$d reviews',
item.review_count,
'woo-gutenberg-products-block'
),
item.name,
item.review_count
) }
/>
);
};

const getInspectorControls = () => {
return (
<InspectorControls key="inspector">
<PanelBody
title={ __( 'Product', 'woo-gutenberg-products-block' ) }
initialOpen={ false }
>
<ProductControl
selected={ attributes.productId || 0 }
onChange={ ( value = [] ) => {
const id = value[ 0 ] ? value[ 0 ].id : 0;
setAttributes( { productId: id } );
} }
renderItem={ renderProductControlItem }
isCompact={ true }
/>
</PanelBody>
<PanelBody
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
>
{ getSharedReviewContentControls(
attributes,
setAttributes
) }
</PanelBody>
<PanelBody
title={ __(
'List Settings',
'woo-gutenberg-products-block'
) }
>
{ getSharedReviewListControls( attributes, setAttributes ) }
</PanelBody>
</InspectorControls>
);
};

const renderEditMode = () => {
const onDone = () => {
setAttributes( { editMode: false } );
debouncedSpeak(
__(
'Showing Reviews by Product block preview.',
'woo-gutenberg-products-block'
)
);
};

return (
<Placeholder
icon={
<Icon
icon={ commentContent }
className="block-editor-block-icon"
/>
}
label={ __(
'Reviews by Product',
'woo-gutenberg-products-block'
) }
className="wc-block-reviews-by-product"
>
{ __(
'Show reviews of your product to build trust',
'woo-gutenberg-products-block'
) }
<div className="wc-block-reviews__selection">
<ProductControl
selected={ attributes.productId || 0 }
onChange={ ( value = [] ) => {
const id = value[ 0 ] ? value[ 0 ].id : 0;
setAttributes( { productId: id } );
} }
queryArgs={ {
orderby: 'comment_count',
order: 'desc',
} }
renderItem={ renderProductControlItem }
/>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>
</Placeholder>
);
};

if ( ! productId || editMode ) {
return renderEditMode();
}

const buttonTitle = __(
'Edit selected product',
'woo-gutenberg-products-block'
);
export const Edit = (
props: unknown & ReviewsByProductEditorProps
): JSX.Element => {
const blockProps = useBlockProps();

return (
<>
{ getBlockControls( editMode, setAttributes, buttonTitle ) }
{ getInspectorControls() }
<EditorContainerBlock
attributes={ attributes }
icon={
<Icon
icon={ commentContent }
className="block-editor-block-icon"
/>
}
name={ __(
'Reviews by Product',
'woo-gutenberg-products-block'
) }
noReviewsPlaceholder={ NoReviewsPlaceholder }
/>
</>
<div { ...blockProps }>
<Block { ...props } />
</div>
);
};

export default withSpokenMessages( ReviewsByProductEditor );
6 changes: 2 additions & 4 deletions ...locks/reviews/reviews-by-product/index.js → ...ocks/reviews/reviews-by-product/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -64,9 +64,7 @@ registerBlockType( 'woocommerce/reviews-by-product', {
*
* @param {Object} props Props to pass to block.
*/
edit( props ) {
return <Editor { ...props } />;
},
edit: Edit,

/**
* Save the props to post content.
Expand Down
Loading
Loading