Product Collection: Add stock status filter

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

@@ -12,12 +12,20 @@ import edit from './edit';
 import save from './save';
 import icon from './icon';
 import './variations';
+import { getDefaultStockStatuses } from './inspector-controls/constants';
 
 if ( isExperimentalBuild() ) {
 	registerBlockType( metadata, {
 		icon,
 		attributes: {
 			...metadata.attributes,
+			query: {
+				...metadata.attributes.query,
+				default: {
+					...metadata.attributes.query.default,
+					woocommerceStockStatus: getDefaultStockStatuses(),
+				},
+			},
 		},
 		edit,
 		save,

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

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+import { objectOmit } from '@woocommerce/utils';
+
 /**
  * Internal dependencies
  */
@@ -10,8 +16,25 @@ import {
 
 const defaultQuery = blockJson.attributes.query.default;
 
+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_FILTERS = {
 	woocommerceOnSale: defaultQuery.woocommerceOnSale,
+	woocommerceStockStatus: getDefaultStockStatuses(),
 };
 
 export const getDefaultSettings = (

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

@@ -19,6 +19,7 @@ import OrderByControl from './order-by-control';
 import OnSaleControl from './on-sale-control';
 import { setQueryAttribute } from './utils';
 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/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 statii 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

@@ -30,6 +30,20 @@ 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_statii,
+	 *   'compare' => 'IN',
+	 * ),
+	 * ```
+	 */
+	woocommerceStockStatus?: string[];
 }
 
 export type TProductCollectionOrder = 'asc' | 'desc';