Product Collection: Add new flow for adding Product Collection block

assets/js/blocks/product-collection/block.json

@@ -24,6 +24,9 @@
 		"convertedFromProducts": {
 			"type": "boolean",
 			"default": false
+		},
+		"collection": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

assets/js/blocks/product-collection/collections/README.md

@@ -0,0 +1,32 @@
+# Product Collection - Collections
+
+Collections are a variations of Product Collection block with the predefined attributes which includes:
+
+- UI aspect - you can define layout, number of columns etc.
+- Query - specify the filters and sorting of the products
+- Inner blocks structure - define the Product Template structure
+
+## Interface
+
+Collections are in fact Variations and they are registered via Variation API. Hence they should follow the BlockVariation type, providing at least:
+
+```typescript
+{
+	name: string;
+	title: string,
+	icon: Icon,
+	description: string,
+	attributes: ProductCollectionAttributes,
+	innerBlocks: InnerBlockTemplate[],
+	isActive?:
+		(blockAttrs: BlockAttributes, variationAttributes: BlockAttributes) => boolean,
+}
+```
+
+Please be aware you can specify `isActive` function, but if not, the default one will compare the variation's `name` with `attributes.collection` value.
+
+As an example please follow `./new-arrivals.tsx`.
+
+## Registering Collection
+
+To register collection import it in `./index.ts` file and add to the `collections` array.

assets/js/blocks/product-collection/collections/best-sellers.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import type { InnerBlockTemplate, BlockIcon } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { Icon, chartBar } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_ATTRIBUTES,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+} from '../constants';
+
+const collection = {
+	name: 'woocommerce-blocks/product-collection/best-sellers',
+	title: __( 'Best Sellers', 'woo-gutenberg-products-block' ),
+	icon: ( <Icon icon={ chartBar } /> ) as BlockIcon,
+	description: __(
+		'Recommend your best-selling products.',
+		'woo-gutenberg-products-block'
+	),
+	keywords: [ 'best selling' ],
+	scope: [],
+};
+
+const attributes = {
+	...DEFAULT_ATTRIBUTES,
+	displayLayout: {
+		type: 'flex',
+		columns: 5,
+		shrinkColumns: true,
+	},
+	query: {
+		...DEFAULT_ATTRIBUTES.query,
+		inherit: false,
+		orderBy: 'popularity',
+		order: 'desc',
+		perPage: 5,
+		pages: 1,
+	},
+	collection: collection.name,
+};
+
+const heading: InnerBlockTemplate = [
+	'core/heading',
+	{
+		textAlign: 'center',
+		level: 2,
+		content: __( 'Best selling products', 'woo-gutenberg-products-block' ),
+		style: { spacing: { margin: { bottom: '1rem' } } },
+	},
+];
+
+const innerBlocks: InnerBlockTemplate[] = [
+	heading,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+];
+
+export default {
+	...collection,
+	attributes,
+	innerBlocks,
+};

assets/js/blocks/product-collection/collections/featured.tsx

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import type {
+	BlockAttributes,
+	InnerBlockTemplate,
+	BlockIcon,
+} from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { Icon, starFilled } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_ATTRIBUTES,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+} from '../constants';
+
+const collection = {
+	name: 'woocommerce-blocks/product-collection/featured',
+	title: __( 'Featured', 'woo-gutenberg-products-block' ),
+	icon: ( <Icon icon={ starFilled } /> ) as BlockIcon,
+	description: __(
+		'Showcase your featured products.',
+		'woo-gutenberg-products-block'
+	),
+	keywords: [],
+	scope: [],
+};
+
+const attributes = {
+	...DEFAULT_ATTRIBUTES,
+	displayLayout: {
+		type: 'flex',
+		columns: 5,
+		shrinkColumns: true,
+	},
+	query: {
+		...DEFAULT_ATTRIBUTES.query,
+		inherit: false,
+		featured: true,
+		perPage: 5,
+		pages: 1,
+	},
+	collection: collection.name,
+};
+
+const heading: [ string, BlockAttributes?, InnerBlockTemplate[]? ] = [
+	'core/heading',
+	{
+		textAlign: 'center',
+		level: 2,
+		content: __( 'Featured products', 'woo-gutenberg-products-block' ),
+		style: { spacing: { margin: { bottom: '1rem' } } },
+	},
+];
+
+const innerBlocks: InnerBlockTemplate[] = [
+	heading,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+];
+
+export default {
+	...collection,
+	attributes,
+	innerBlocks,
+};

assets/js/blocks/product-collection/collections/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import {
+	type BlockVariation,
+	registerBlockVariation,
+	BlockAttributes,
+} from '@wordpress/blocks';
+import { Icon, loop } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import blockJson from '../block.json';
+import newArrivals from './new-arrivals';
+import topRated from './top-rated';
+import bestSellers from './best-sellers';
+import onSale from './on-sale';
+import featured from './featured';
+
+export const defaultQuery = {
+	name: 'woocommerce-blocks/product-collection/default-query',
+	title: 'All Products',
+	icon: <Icon icon={ loop } />,
+	description:
+		'Display all products. Results may be limited by the current template context.',
+};
+
+const collections: BlockVariation[] = [
+	featured,
+	topRated,
+	onSale,
+	bestSellers,
+	newArrivals,
+];
+
+const registerCollections = () => {
+	collections.forEach( ( collection ) => {
+		const isActive = (
+			blockAttrs: BlockAttributes,
+			variationAttributes: BlockAttributes
+		) => {
+			return blockAttrs.collection === variationAttributes.collection;
+		};
+
+		registerBlockVariation( blockJson.name, {
+			isActive,
+			...collection,
+		} );
+	} );
+};
+
+export default registerCollections;

assets/js/blocks/product-collection/collections/new-arrivals.tsx

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import type {
+	BlockAttributes,
+	InnerBlockTemplate,
+	BlockIcon,
+} from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { Icon, calendar } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_ATTRIBUTES,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+} from '../constants';
+
+const collection = {
+	name: 'woocommerce-blocks/product-collection/new-arrivals',
+	title: __( 'New Arrivals', 'woo-gutenberg-products-block' ),
+	icon: ( <Icon icon={ calendar } /> ) as BlockIcon,
+	description: __(
+		'Recommend your newest products.',
+		'woo-gutenberg-products-block'
+	),
+	keywords: [ 'newest products' ],
+	scope: [],
+};
+
+const attributes = {
+	...DEFAULT_ATTRIBUTES,
+	displayLayout: {
+		type: 'flex',
+		columns: 5,
+		shrinkColumns: true,
+	},
+	query: {
+		...DEFAULT_ATTRIBUTES.query,
+		inherit: false,
+		orderBy: 'date',
+		order: 'desc',
+		perPage: 5,
+		pages: 1,
+	},
+	collection: collection.name,
+};
+
+const heading: [ string, BlockAttributes?, InnerBlockTemplate[]? ] = [
+	'core/heading',
+	{
+		textAlign: 'center',
+		level: 2,
+		content: __( 'New arrivals', 'woo-gutenberg-products-block' ),
+		style: { spacing: { margin: { bottom: '1rem' } } },
+	},
+];
+
+const innerBlocks: InnerBlockTemplate[] = [
+	heading,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+];
+
+export default {
+	...collection,
+	attributes,
+	innerBlocks,
+};

assets/js/blocks/product-collection/collections/on-sale.tsx

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import type {
+	BlockAttributes,
+	InnerBlockTemplate,
+	BlockIcon,
+} from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { Icon, percent } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_ATTRIBUTES,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+} from '../constants';
+
+const collection = {
+	name: 'woocommerce-blocks/product-collection/on-sale',
+	title: __( 'On Sale', 'woo-gutenberg-products-block' ),
+	icon: ( <Icon icon={ percent } /> ) as BlockIcon,
+	description: __(
+		'Highlight products that are currently on sale.',
+		'woo-gutenberg-products-block'
+	),
+	keywords: [],
+	scope: [],
+};
+
+const attributes = {
+	...DEFAULT_ATTRIBUTES,
+	displayLayout: {
+		type: 'flex',
+		columns: 5,
+		shrinkColumns: true,
+	},
+	query: {
+		...DEFAULT_ATTRIBUTES.query,
+		inherit: false,
+		woocommerceOnSale: true,
+		perPage: 5,
+		pages: 1,
+	},
+	collection: collection.name,
+};
+
+const heading: [ string, BlockAttributes?, InnerBlockTemplate[]? ] = [
+	'core/heading',
+	{
+		textAlign: 'center',
+		level: 2,
+		content: __( 'On sale products', 'woo-gutenberg-products-block' ),
+		style: { spacing: { margin: { bottom: '1rem' } } },
+	},
+];
+
+const innerBlocks: InnerBlockTemplate[] = [
+	heading,
+	INNER_BLOCKS_PRODUCT_TEMPLATE,
+];
+
+export default {
+	...collection,
+	attributes,
+	innerBlocks,
+};