initial commit

packages/woocommerce-blocks/assets/js/blocks/reviews/all-reviews/edit.js

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import PropTypes from 'prop-types';
+import { Icon, discussion } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import EditorContainerBlock from '../editor-container-block.js';
+import NoReviewsPlaceholder from './no-reviews-placeholder.js';
+import {
+	getSharedReviewContentControls,
+	getSharedReviewListControls,
+} from '../edit-utils.js';
+
+/**
+ * Component to handle edit mode of "All Reviews".
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {Object} props.attributes Incoming block attributes.
+ * @param {function(any):any} props.setAttributes Setter for block attributes.
+ */
+const AllReviewsEditor = ( { attributes, setAttributes } ) => {
+	const getInspectorControls = () => {
+		return (
+			<InspectorControls key="inspector">
+				<PanelBody
+					title={ __( 'Content', 'woocommerce' ) }
+				>
+					<ToggleControl
+						label={ __(
+							'Product name',
+							'woocommerce'
+						) }
+						checked={ attributes.showProductName }
+						onChange={ () =>
+							setAttributes( {
+								showProductName: ! attributes.showProductName,
+							} )
+						}
+					/>
+					{ getSharedReviewContentControls(
+						attributes,
+						setAttributes
+					) }
+				</PanelBody>
+				<PanelBody
+					title={ __(
+						'List Settings',
+						'woocommerce'
+					) }
+				>
+					{ getSharedReviewListControls( attributes, setAttributes ) }
+				</PanelBody>
+			</InspectorControls>
+		);
+	};
+
+	return (
+		<>
+			{ getInspectorControls() }
+			<EditorContainerBlock
+				attributes={ attributes }
+				icon={
+					<Icon
+						icon={ discussion }
+						className="block-editor-block-icon"
+					/>
+				}
+				name={ __( 'All Reviews', 'woocommerce' ) }
+				noReviewsPlaceholder={ NoReviewsPlaceholder }
+			/>
+		</>
+	);
+};
+
+AllReviewsEditor.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,
+};
+
+export default AllReviewsEditor;

packages/woocommerce-blocks/assets/js/blocks/reviews/all-reviews/index.js

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { Icon, discussion } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import '../editor.scss';
+import edit from './edit';
+import sharedAttributes from '../attributes';
+import save from '../save.js';
+import { example } from '../example';
+
+/**
+ * Register and run the "All Reviews" block.
+ * This block lists all product reviews.
+ */
+registerBlockType( 'woocommerce/all-reviews', {
+	apiVersion: 2,
+	title: __( 'All Reviews', 'woocommerce' ),
+	icon: {
+		src: <Icon srcElement={ discussion } />,
+		foreground: '#96588a',
+	},
+	category: 'woocommerce',
+	keywords: [ __( 'WooCommerce', 'woocommerce' ) ],
+	description: __(
+		'Show a list of all product reviews.',
+		'woocommerce'
+	),
+	supports: {
+		html: false,
+		color: {
+			background: false,
+		},
+		typography: {
+			fontSize: true,
+		},
+	},
+	example: {
+		...example,
+		attributes: {
+			...example.attributes,
+			showProductName: true,
+		},
+	},
+	attributes: {
+		...sharedAttributes,
+		/**
+		 * Show the product name.
+		 */
+		showProductName: {
+			type: 'boolean',
+			default: true,
+		},
+	},
+
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: [ 'core/legacy-widget' ],
+				// We can't transform if raw instance isn't shown in the REST API.
+				isMatch: ( { idBase, instance } ) =>
+					idBase === 'woocommerce_recent_reviews' && !! instance?.raw,
+				transform: ( { instance } ) =>
+					createBlock( 'woocommerce/all-reviews', {
+						reviewsOnPageLoad: instance.raw.number,
+						imageType: 'product',
+						showLoadMore: false,
+						showOrderby: false,
+						showReviewDate: false,
+						showReviewContent: false,
+					} ),
+			},
+		],
+	},
+
+	edit,
+	save,
+} );

packages/woocommerce-blocks/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Placeholder } from '@wordpress/components';
+import { Icon, discussion } from '@woocommerce/icons';
+
+const NoCategoryReviewsPlaceholder = () => {
+	return (
+		<Placeholder
+			className="wc-block-all-reviews"
+			icon={
+				<Icon
+					srcElement={ discussion }
+					className="block-editor-block-icon"
+				/>
+			}
+			label={ __( 'All Reviews', 'woocommerce' ) }
+		>
+			{ __(
+				'This block shows a list of all product reviews. Your store does not have any reviews yet, but they will show up here when it does.',
+				'woocommerce'
+			) }
+		</Placeholder>
+	);
+};
+
+export default NoCategoryReviewsPlaceholder;