Product Collection: Add stock status filter

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

@@ -13,35 +13,13 @@
 			"type": "number"
 		},
 		"query": {
-			"type": "object",
-			"default": {
-				"perPage": 9,
-				"pages": 0,
-				"offset": 0,
-				"postType": "product",
-				"order": "asc",
-				"orderBy": "title",
-				"author": "",
-				"search": "",
-				"exclude": [],
-				"sticky": "",
-				"inherit": false,
-				"taxQuery": null,
-				"parents": [],
-				"isProductCollectionBlock": true,
-				"woocommerceOnSale": false
-			}
+			"type": "object"
 		},
 		"tagName": {
-			"type": "string",
-			"default": "div"
+			"type": "string"
 		},
 		"displayLayout": {
-			"type": "object",
-			"default": {
-				"type": "flex",
-				"columns": 3
-			}
+			"type": "object"
 		}
 	},
 	"providesContext": {

assets/js/blocks/product-collection/constants.ts

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+import { objectOmit } from '@woocommerce/utils';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ProductCollectionAttributes,
+	TProductCollectionOrder,
+	TProductCollectionOrderBy,
+	ProductCollectionQuery,
+	ProductCollectionDisplayLayout,
+} from './types';
+
+export const STOCK_STATUS_OPTIONS = getSetting< Record< string, string > >(
+	'stockStatusOptions',
+	[]
+);
+
+const GLOBAL_HIDE_OUT_OF_STOCK = getSetting< boolean >(
+	'hideOutOfStockItems',
+	false
+);
+
+export const getDefaultStockStatuses = () => {
+	return GLOBAL_HIDE_OUT_OF_STOCK
+		? Object.keys( objectOmit( STOCK_STATUS_OPTIONS, 'outofstock' ) )
+		: Object.keys( STOCK_STATUS_OPTIONS );
+};
+
+export const DEFAULT_ATTRIBUTES: Partial< ProductCollectionAttributes > = {
+	query: {
+		perPage: 9,
+		pages: 0,
+		offset: 0,
+		postType: 'product',
+		order: 'asc',
+		orderBy: 'title',
+		author: '',
+		search: '',
+		exclude: [],
+		sticky: '',
+		inherit: false,
+		taxQuery: '',
+		parents: [],
+		isProductCollectionBlock: true,
+		woocommerceOnSale: false,
+		woocommerceStockStatus: getDefaultStockStatuses(),
+	},
+	tagName: 'div',
+	displayLayout: {
+		type: 'flex',
+		columns: 3,
+	},
+};
+
+export const getDefaultSettings = (
+	currentAttributes: ProductCollectionAttributes
+): Partial< ProductCollectionAttributes > => ( {
+	displayLayout:
+		DEFAULT_ATTRIBUTES.displayLayout as ProductCollectionDisplayLayout,
+	query: {
+		...currentAttributes.query,
+		orderBy: ( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery )
+			.orderBy as TProductCollectionOrderBy,
+		order: ( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery )
+			.order as TProductCollectionOrder,
+	},
+} );
+
+export const DEFAULT_FILTERS = {
+	woocommerceOnSale: ( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery )
+		.woocommerceOnSale,
+	woocommerceStockStatus: getDefaultStockStatuses(),
+};

assets/js/blocks/product-collection/edit.tsx

@@ -13,6 +13,7 @@ import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
 import { ProductCollectionAttributes } from './types';
 import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/product-title';
 import InspectorControls from './inspector-controls';
+import { DEFAULT_ATTRIBUTES } from './constants';
 
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
@@ -82,11 +83,19 @@ const Edit = ( props: BlockEditProps< ProductCollectionAttributes > ) => {
 
 	const instanceId = useInstanceId( Edit );
 
+	/**
+	 * Because of issue https://github.com/WordPress/gutenberg/issues/7342,
+	 * We are using this workaround to set default attributes.
+	 */
+	useEffect( () => {
+		setAttributes( { ...DEFAULT_ATTRIBUTES, ...attributes } );
+	}, [ setAttributes ] );
+
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
 		if ( ! Number.isFinite( queryId ) ) {
-			setAttributes( { queryId: instanceId } );
+			setAttributes( { queryId: Number( instanceId ) } );
 		}
 	}, [ queryId, instanceId, setAttributes ] );
 

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

@@ -16,9 +16,6 @@ import './variations';
 if ( isExperimentalBuild() ) {
 	registerBlockType( metadata, {
 		icon,
-		attributes: {
-			...metadata.attributes,
-		},
 		edit,
 		save,
 	} );

assets/js/blocks/product-collection/inspector-controls/columns-control.tsx

@@ -17,7 +17,7 @@ import {
 	ProductCollectionAttributes,
 	ProductCollectionDisplayLayout,
 } from '../types';
-import { getDefaultSettings } from './constants';
+import { getDefaultSettings } from '../constants';
 
 const ColumnsControl = (
 	props: BlockEditProps< ProductCollectionAttributes >

assets/js/blocks/product-collection/inspector-controls/index.tsx

@@ -18,7 +18,8 @@ import ColumnsControl from './columns-control';
 import OrderByControl from './order-by-control';
 import OnSaleControl from './on-sale-control';
 import { setQueryAttribute } from './utils';
-import { DEFAULT_FILTERS, getDefaultSettings } from './constants';
+import { DEFAULT_FILTERS, getDefaultSettings } from '../constants';
+import StockStatusControl from './stock-status-control';
 
 const ProductCollectionInspectorControls = (
 	props: BlockEditProps< ProductCollectionAttributes >
@@ -45,6 +46,7 @@ const ProductCollectionInspectorControls = (
 				} }
 			>
 				<OnSaleControl { ...props } />
+				<StockStatusControl { ...props } />
 			</ToolsPanel>
 		</InspectorControls>
 	);

assets/js/blocks/product-collection/inspector-controls/on-sale-control.tsx

@@ -14,6 +14,7 @@ import {
  * Internal dependencies
  */
 import { ProductCollectionAttributes } from '../types';
+import { setQueryAttribute } from './utils';
 
 const OnSaleControl = (
 	props: BlockEditProps< ProductCollectionAttributes >
@@ -23,14 +24,11 @@ const OnSaleControl = (
 	return (
 		<ToolsPanelItem
 			label={ __( 'On Sale', 'woo-gutenberg-products-block' ) }
-			hasValue={ () => query.woocommerceOnSale }
+			hasValue={ () => query.woocommerceOnSale === true }
 			isShownByDefault
 			onDeselect={ () => {
-				props.setAttributes( {
-					query: {
-						...query,
-						woocommerceOnSale: false,
-					},
+				setQueryAttribute( props, {
+					woocommerceOnSale: false,
 				} );
 			} }
 		>
@@ -41,11 +39,8 @@ const OnSaleControl = (
 				) }
 				checked={ query.woocommerceOnSale || false }
 				onChange={ ( woocommerceOnSale ) => {
-					props.setAttributes( {
-						query: {
-							...query,
-							woocommerceOnSale,
-						},
+					setQueryAttribute( props, {
+						woocommerceOnSale,
 					} );
 				} }
 			/>

assets/js/blocks/product-collection/inspector-controls/order-by-control.tsx

@@ -18,7 +18,7 @@ import {
 	TProductCollectionOrder,
 	TProductCollectionOrderBy,
 } from '../types';
-import { getDefaultSettings } from './constants';
+import { getDefaultSettings } from '../constants';
 
 const orderOptions = [
 	{

assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { BlockEditProps } from '@wordpress/blocks';
+import fastDeepEqual from 'fast-deep-equal/es6';
+import {
+	FormTokenField,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionAttributes } from '../types';
+import { setQueryAttribute } from './utils';
+import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../constants';
+
+/**
+ * Gets the id of a specific stock status from its text label
+ *
+ * In theory, we could use a `saveTransform` function on the
+ * `FormFieldToken` component to do the conversion. However, plugins
+ * can add custom stock statuses which don't conform to our naming
+ * conventions.
+ */
+function getStockStatusIdByLabel( statusLabel: FormTokenField.Value ) {
+	const label =
+		typeof statusLabel === 'string' ? statusLabel : statusLabel.value;
+
+	return Object.entries( STOCK_STATUS_OPTIONS ).find(
+		( [ , value ] ) => value === label
+	)?.[ 0 ];
+}
+
+const StockStatusControl = (
+	props: BlockEditProps< ProductCollectionAttributes >
+) => {
+	const { query } = props.attributes;
+	return (
+		<ToolsPanelItem
+			label={ __( 'Stock status', 'woo-gutenberg-products-block' ) }
+			hasValue={ () =>
+				! fastDeepEqual(
+					query.woocommerceStockStatus,
+					getDefaultStockStatuses()
+				)
+			}
+			onDeselect={ () => {
+				setQueryAttribute( props, {
+					woocommerceStockStatus: getDefaultStockStatuses(),
+				} );
+			} }
+			isShownByDefault
+		>
+			<FormTokenField
+				label={ __( 'Stock status', 'woo-gutenberg-products-block' ) }
+				onChange={ ( statusLabels ) => {
+					const woocommerceStockStatus = statusLabels
+						.map( getStockStatusIdByLabel )
+						.filter( Boolean ) as string[];
+
+					setQueryAttribute( props, {
+						woocommerceStockStatus,
+					} );
+				} }
+				suggestions={ Object.values( STOCK_STATUS_OPTIONS ) }
+				validateInput={ ( value: string ) =>
+					Object.values( STOCK_STATUS_OPTIONS ).includes( value )
+				}
+				value={
+					query?.woocommerceStockStatus?.map(
+						( key ) => STOCK_STATUS_OPTIONS[ key ]
+					) || []
+				}
+				__experimentalExpandOnFocus={ true }
+			/>
+		</ToolsPanelItem>
+	);
+};
+
+export default StockStatusControl;

assets/js/blocks/product-collection/types.ts

@@ -8,6 +8,7 @@ export interface ProductCollectionAttributes {
 	];
 	templateSlug: string;
 	displayLayout: ProductCollectionDisplayLayout;
+	tagName: string;
 }
 
 export interface ProductCollectionDisplayLayout {
@@ -30,6 +31,21 @@ export interface ProductCollectionQuery {
 	sticky: string;
 	taxQuery: string;
 	woocommerceOnSale: boolean;
+	/**
+	 * Filter products by their stock status.
+	 *
+	 * Will generate the following `meta_query`:
+	 *
+	 * ```
+	 * array(
+	 *   'key'     => '_stock_status',
+	 *   'value'   => (array) $stock_statuses,
+	 *   'compare' => 'IN',
+	 * ),
+	 * ```
+	 */
+	woocommerceStockStatus?: string[];
+	isProductCollectionBlock?: boolean;
 }
 
 export type TProductCollectionOrder = 'asc' | 'desc';