New Block: Add "Newest Products" Block (https://github.com/woocommerce/woocommerce-blocks/pull/255)

* add newest products block

* update class name in index.js and product-new.js

* Add a new WooCommerce block category and include all blocks within.

* Fix shortcode product order

* Show block category on all post types

plugins/woocommerce-blocks/assets/js/index.js

@@ -15,6 +15,7 @@ import ProductBestSellersBlock from './product-best-sellers';
 import ProductByCategoryBlock from './product-category-block';
 import ProductTopRatedBlock from './product-top-rated';
 import ProductOnSaleBlock from './product-on-sale';
+import ProductNewestBlock from './product-new';
 import sharedAttributes from './utils/shared-attributes';
 
 const validAlignments = [ 'wide', 'full' ];
@@ -32,7 +33,7 @@ const getEditWrapperProps = ( attributes ) => {
 registerBlockType( 'woocommerce/product-category', {
 	title: __( 'Products by Category', 'woo-gutenberg-products-block' ),
 	icon: 'category',
-	category: 'widgets',
+	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	description: __(
 		'Display a grid of products from your selected categories.',
@@ -86,7 +87,7 @@ registerBlockType( 'woocommerce/product-category', {
 registerBlockType( 'woocommerce/product-best-sellers', {
 	title: __( 'Best Selling Products', 'woo-gutenberg-products-block' ),
 	icon: <Gridicon icon="stats-up-alt" />,
-	category: 'widgets',
+	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	description: __(
 		'Display a grid of your all-time best selling products.',
@@ -124,7 +125,7 @@ registerBlockType( 'woocommerce/product-best-sellers', {
 registerBlockType( 'woocommerce/product-top-rated', {
 	title: __( 'Top Rated Products', 'woo-gutenberg-products-block' ),
 	icon: <Gridicon icon="trophy" />,
-	category: 'widgets',
+	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	description: __(
 		'Display a grid of your top rated products.',
@@ -162,7 +163,7 @@ registerBlockType( 'woocommerce/product-top-rated', {
 registerBlockType( 'woocommerce/product-on-sale', {
 	title: __( 'On Sale Products', 'woo-gutenberg-products-block' ),
 	icon: <Gridicon icon="tag" />,
-	category: 'widgets',
+	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	description: __(
 		'Display a grid of on sale products.',
@@ -203,3 +204,41 @@ registerBlockType( 'woocommerce/product-on-sale', {
 		);
 	},
 } );
+
+registerBlockType( 'woocommerce/product-new', {
+	title: __( 'Newest Products', 'woo-gutenberg-products-block' ),
+	icon: <Gridicon icon="notice" />,
+	category: 'woocommerce',
+	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
+	description: __(
+		'Display a grid of your newest products.',
+		'woo-gutenberg-products-block'
+	),
+	attributes: {
+		...sharedAttributes,
+	},
+	getEditWrapperProps,
+
+	/**
+	 * Renders and manages the block.
+	 */
+	edit( props ) {
+		return <ProductNewestBlock { ...props } />;
+	},
+
+	/**
+	 * Save the block content in the post content. Block content is saved as a products shortcode.
+	 *
+	 * @return string
+	 */
+	save( props ) {
+		const {
+			align,
+		} = props.attributes; /* eslint-disable-line react/prop-types */
+		return (
+			<RawHTML className={ align ? `align${ align }` : '' }>
+				{ getShortcode( props, 'woocommerce/product-new' ) }
+			</RawHTML>
+		);
+	},
+} );

plugins/woocommerce-blocks/assets/js/legacy/products-block.jsx

@@ -903,7 +903,7 @@ class ProductsBlock extends Component {
 registerBlockType( 'woocommerce/products', {
 	title: __( 'Products' ),
 	icon: 'screenoptions',
-	category: 'widgets',
+	category: 'woocommerce',
 	description: __( 'Display a grid of products from a variety of sources.' ),
 
 	attributes: {

plugins/woocommerce-blocks/assets/js/product-new.js

@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+import {
+	BlockAlignmentToolbar,
+	BlockControls,
+	InspectorControls,
+} from '@wordpress/editor';
+import { Component, Fragment } from '@wordpress/element';
+import Gridicon from 'gridicons';
+import {
+	PanelBody,
+	Placeholder,
+	RangeControl,
+	Spinner,
+} from '@wordpress/components';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import getQuery from './utils/get-query';
+import ProductCategoryControl from './components/product-category-control';
+import ProductPreview from './components/product-preview';
+
+/**
+ * Component to handle edit mode of "Newest Products".
+ */
+class ProductNewestBlock extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			products: [],
+			loaded: false,
+		};
+	}
+
+	componentDidMount() {
+		if ( this.props.attributes.categories ) {
+			this.getProducts();
+		}
+	}
+
+	componentDidUpdate( prevProps ) {
+		const hasChange = [ 'rows', 'columns', 'categories' ].reduce( ( acc, key ) => {
+			return acc || prevProps.attributes[ key ] !== this.props.attributes[ key ];
+		}, false );
+		if ( hasChange ) {
+			this.getProducts();
+		}
+	}
+
+	getProducts() {
+		apiFetch( {
+			path: addQueryArgs( '/wc-pb/v3/products', getQuery( this.props.attributes, this.props.name ) ),
+		} )
+			.then( ( products ) => {
+				this.setState( { products, loaded: true } );
+			} )
+			.catch( () => {
+				this.setState( { products: [], loaded: true } );
+			} );
+	}
+
+	getInspectorControls() {
+		const { attributes, setAttributes } = this.props;
+		const { columns, rows } = attributes;
+
+		return (
+			<InspectorControls key="inspector">
+				<PanelBody
+					title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
+					initialOpen
+				>
+					<RangeControl
+						label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
+						value={ columns }
+						onChange={ ( value ) => setAttributes( { columns: value } ) }
+						min={ wc_product_block_data.min_columns }
+						max={ wc_product_block_data.max_columns }
+					/>
+					<RangeControl
+						label={ __( 'Rows', 'woo-gutenberg-products-block' ) }
+						value={ rows }
+						onChange={ ( value ) => setAttributes( { rows: value } ) }
+						min={ wc_product_block_data.min_rows }
+						max={ wc_product_block_data.max_rows }
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __(
+						'Filter by Product Category',
+						'woo-gutenberg-products-block'
+					) }
+					initialOpen={ false }
+				>
+					<ProductCategoryControl
+						selected={ attributes.categories }
+						onChange={ ( value = [] ) => {
+							const ids = value.map( ( { id } ) => id );
+							setAttributes( { categories: ids } );
+						} }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		);
+	}
+
+	render() {
+		const { setAttributes } = this.props;
+		const { columns, align } = this.props.attributes;
+		const { loaded, products } = this.state;
+		const classes = [ 'wc-block-products-grid', 'wc-block-newest-products' ];
+		if ( columns ) {
+			classes.push( `cols-${ columns }` );
+		}
+		if ( products && ! products.length ) {
+			if ( ! loaded ) {
+				classes.push( 'is-loading' );
+			} else {
+				classes.push( 'is-not-found' );
+			}
+		}
+
+		return (
+			<Fragment>
+				<BlockControls>
+					<BlockAlignmentToolbar
+						controls={ [ 'wide', 'full' ] }
+						value={ align }
+						onChange={ ( nextAlign ) => setAttributes( { align: nextAlign } ) }
+					/>
+				</BlockControls>
+				{ this.getInspectorControls() }
+				<div className={ classes.join( ' ' ) }>
+					{ products.length ? (
+						products.map( ( product ) => (
+							<ProductPreview product={ product } key={ product.id } />
+						) )
+					) : (
+						<Placeholder
+							icon={ <Gridicon icon="notice-outline" /> }
+							label={ __(
+								'Newest Products',
+								'woo-gutenberg-products-block'
+							) }
+						>
+							{ ! loaded ? (
+								<Spinner />
+							) : (
+								__( 'No products found.', 'woo-gutenberg-products-block' )
+							) }
+						</Placeholder>
+					) }
+				</div>
+			</Fragment>
+		);
+	}
+}
+
+ProductNewestBlock.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 ProductNewestBlock;

plugins/woocommerce-blocks/assets/js/utils/get-query.js

@@ -42,6 +42,9 @@ export default function getQuery( attributes, name ) {
 		case 'woocommerce/product-on-sale':
 			query.on_sale = 1;
 			break;
+		case 'woocommerce/product-new':
+			query.orderby = 'date';
+			break;
 	}
 
 	return query;

plugins/woocommerce-blocks/assets/js/utils/get-shortcode.js

@@ -38,6 +38,10 @@ export default function getShortcode( { attributes }, name ) {
 		case 'woocommerce/product-on-sale':
 			shortcodeAtts.set( 'on_sale', '1' );
 			break;
+		case 'woocommerce/product-new':
+			shortcodeAtts.set( 'orderby', 'date' );
+			shortcodeAtts.set( 'order', 'DESC' );
+			break;
 	}
 
 	// Build the shortcode string out of the set shortcode attributes.

plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php

@@ -53,6 +53,26 @@ function wgpb_plugins_notice() {
 	echo '</p></div>';
 }
 
+/**
+ * Adds a WooCommerce category to the block inserter.
+ *
+ * @param array $categories Array of categories.
+ * @return array Array of block categories.
+ */
+function wgpb_add_block_category( $categories ) {
+	return array_merge(
+		$categories,
+		array(
+			array(
+				'slug'  => 'woocommerce',
+				'title' => __( 'WooCommerce', 'woo-gutenberg-products-block' ),
+				'icon'  => 'woocommerce',
+			),
+		)
+	);
+}
+add_filter( 'block_categories', 'wgpb_add_block_category' );
+
 /**
  * Register the Products block and its scripts.
  */