Add stock level filter to product blocks

jonny-bull · Dec 16, 2021 · 06657d4 · 06657d4
1 parent 8241d0a
commit 06657d4
Show file tree

Hide file tree

Showing 14 changed files with 308 additions and 43 deletions.
diff --git a/assets/js/blocks/product-new/block.js b/assets/js/blocks/product-new/block.js
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import GridContentControl from '@woocommerce/editor-components/grid-content-control';
 import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
 import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
+import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 import { getSetting } from '@woocommerce/settings';
 
@@ -26,6 +27,7 @@ class ProductNewestBlock extends Component {
 			contentVisibility,
 			rows,
 			alignButtons,
+			stockStatus,
 		} = attributes;
 
 		return (
@@ -56,6 +58,20 @@ class ProductNewestBlock extends Component {
 						}
 					/>
 				</PanelBody>
+				{ getSetting( 'hide_out_of_stock' ) !== 'yes' && (
+					<PanelBody
+						title={ __(
+							'Filter by stock status',
+							'woo-gutenberg-products-block'
+						) }
+						initialOpen={ false }
+					>
+						<ProductStockControl
+							setAttributes={ setAttributes }
+							value={ stockStatus }
+						/>
+					</PanelBody>
+				) }
 				<PanelBody
 					title={ __(
 						'Filter by Product Category',

diff --git a/assets/js/blocks/product-on-sale/block.js b/assets/js/blocks/product-on-sale/block.js
@@ -11,6 +11,7 @@ import GridContentControl from '@woocommerce/editor-components/grid-content-cont
 import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
 import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
 import ProductOrderbyControl from '@woocommerce/editor-components/product-orderby-control';
+import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 import { Icon, tag } from '@woocommerce/icons';
 import { getSetting } from '@woocommerce/settings';
@@ -42,6 +43,7 @@ class ProductOnSaleBlock extends Component {
 			rows,
 			orderby,
 			alignButtons,
+			stockStatus,
 		} = attributes;
 
 		return (
@@ -100,6 +102,20 @@ class ProductOnSaleBlock extends Component {
 						}
 					/>
 				</PanelBody>
+				{ getSetting( 'hide_out_of_stock' ) !== 'yes' && (
+					<PanelBody
+						title={ __(
+							'Stock level',
+							'woo-gutenberg-products-block'
+						) }
+						initialOpen={ false }
+					>
+						<ProductStockControl
+							setAttributes={ setAttributes }
+							value={ stockStatus }
+						/>
+					</PanelBody>
+				) }
 			</InspectorControls>
 		);
 	}

diff --git a/assets/js/blocks/product-tag/block.js b/assets/js/blocks/product-tag/block.js
@@ -18,6 +18,7 @@ import GridContentControl from '@woocommerce/editor-components/grid-content-cont
 import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
 import ProductTagControl from '@woocommerce/editor-components/product-tag-control';
 import ProductOrderbyControl from '@woocommerce/editor-components/product-orderby-control';
+import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
 import { Icon, more } from '@woocommerce/icons';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 import { getSetting } from '@woocommerce/settings';
@@ -91,6 +92,7 @@ class ProductsByTagBlock extends Component {
 			orderby,
 			rows,
 			alignButtons,
+			stockStatus,
 		} = attributes;
 
 		return (
@@ -150,6 +152,20 @@ class ProductsByTagBlock extends Component {
 						value={ orderby }
 					/>
 				</PanelBody>
+				{ getSetting( 'hide_out_of_stock' ) !== 'yes' && (
+					<PanelBody
+						title={ __(
+							'Stock level',
+							'woo-gutenberg-products-block'
+						) }
+						initialOpen={ false }
+					>
+						<ProductStockControl
+							setAttributes={ setAttributes }
+							value={ stockStatus }
+						/>
+					</PanelBody>
+				) }
 			</InspectorControls>
 		);
 	}

diff --git a/assets/js/blocks/product-tag/index.js b/assets/js/blocks/product-tag/index.js
@@ -109,6 +109,14 @@ registerBlockType( 'woocommerce/product-tag', {
 			type: 'boolean',
 			default: false,
 		},
+
+		/**
+		 * Whether to display in stock, out of stock or backorder products.
+		 */
+		stockStatus: {
+			type: 'string',
+			default: 'any',
+		},
 	},
 
 	/**

diff --git a/assets/js/blocks/product-top-rated/block.js b/assets/js/blocks/product-top-rated/block.js
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import GridContentControl from '@woocommerce/editor-components/grid-content-control';
 import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
 import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
+import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 import { getSetting } from '@woocommerce/settings';
 
@@ -26,6 +27,7 @@ class ProductTopRatedBlock extends Component {
 			contentVisibility,
 			rows,
 			alignButtons,
+			stockStatus,
 		} = attributes;
 
 		return (
@@ -75,6 +77,20 @@ class ProductTopRatedBlock extends Component {
 						}
 					/>
 				</PanelBody>
+				{ getSetting( 'hide_out_of_stock' ) !== 'yes' && (
+					<PanelBody
+						title={ __(
+							'Stock level',
+							'woo-gutenberg-products-block'
+						) }
+						initialOpen={ false }
+					>
+						<ProductStockControl
+							setAttributes={ setAttributes }
+							value={ stockStatus }
+						/>
+					</PanelBody>
+				) }
 			</InspectorControls>
 		);
 	}

diff --git a/assets/js/blocks/products-by-attribute/block.js b/assets/js/blocks/products-by-attribute/block.js
@@ -19,6 +19,7 @@ import GridContentControl from '@woocommerce/editor-components/grid-content-cont
 import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
 import ProductAttributeTermControl from '@woocommerce/editor-components/product-attribute-term-control';
 import ProductOrderbyControl from '@woocommerce/editor-components/product-orderby-control';
+import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 import { getSetting } from '@woocommerce/settings';
 
@@ -36,6 +37,7 @@ class ProductsByAttributeBlock extends Component {
 			orderby,
 			rows,
 			alignButtons,
+			stockStatus,
 		} = this.props.attributes;
 
 		return (
@@ -100,6 +102,20 @@ class ProductsByAttributeBlock extends Component {
 						value={ orderby }
 					/>
 				</PanelBody>
+				{ getSetting( 'hide_out_of_stock' ) !== 'yes' && (
+					<PanelBody
+						title={ __(
+							'Stock level',
+							'woo-gutenberg-products-block'
+						) }
+						initialOpen={ false }
+					>
+						<ProductStockControl
+							setAttributes={ setAttributes }
+							value={ stockStatus }
+						/>
+					</PanelBody>
+				) }
 			</InspectorControls>
 		);
 	}

diff --git a/assets/js/blocks/products-by-attribute/index.js b/assets/js/blocks/products-by-attribute/index.js
@@ -116,6 +116,14 @@ registerBlockType( blockTypeName, {
 			type: 'boolean',
 			default: false,
 		},
+
+		/**
+		 * Whether to display in stock, out of stock or backorder products.
+		 */
+		stockStatus: {
+			type: 'string',
+			default: 'any',
+		},
 	},
 
 	/**

diff --git a/assets/js/blocks/products/attributes.js b/assets/js/blocks/products/attributes.js
@@ -18,6 +18,7 @@ export const defaults = {
 	orderby: 'date',
 	layoutConfig: DEFAULT_PRODUCT_LIST_LAYOUT,
 	isPreview: false,
+	stockStatus: 'any',
 };
 
 export const attributes = {
@@ -64,4 +65,12 @@ export const attributes = {
 		type: 'boolean',
 		default: false,
 	},
+
+	/**
+	 * Whether to display in stock, out of stock or backorder products.
+	 */
+	stockStatus: {
+		type: 'string',
+		default: 'any',
+	},
 };
diff --git a/assets/js/blocks/products/edit.js b/assets/js/blocks/products/edit.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToggleControl, SelectControl } from '@wordpress/components';
+import { getSetting } from '@woocommerce/settings';
 
 export const getSharedContentControls = ( attributes, setAttributes ) => {
 	const { contentVisibility } = attributes;
@@ -27,48 +28,98 @@ export const getSharedContentControls = ( attributes, setAttributes ) => {
 
 export const getSharedListControls = ( attributes, setAttributes ) => {
 	return (
-		<SelectControl
-			label={ __( 'Order Products By', 'woo-gutenberg-products-block' ) }
-			value={ attributes.orderby }
-			options={ [
-				{
-					label: __(
-						'Default sorting (menu order)',
-						'woo-gutenberg-products-block'
-					),
-					value: 'menu_order',
-				},
-				{
-					label: __( 'Popularity', 'woo-gutenberg-products-block' ),
-					value: 'popularity',
-				},
-				{
-					label: __(
-						'Average rating',
-						'woo-gutenberg-products-block'
-					),
-					value: 'rating',
-				},
-				{
-					label: __( 'Latest', 'woo-gutenberg-products-block' ),
-					value: 'date',
-				},
-				{
-					label: __(
-						'Price: low to high',
-						'woo-gutenberg-products-block'
-					),
-					value: 'price',
-				},
-				{
-					label: __(
-						'Price: high to low',
+		<div>
+			<SelectControl
+				label={ __(
+					'Order Products By',
+					'woo-gutenberg-products-block'
+				) }
+				value={ attributes.orderby }
+				options={ [
+					{
+						label: __(
+							'Default sorting (menu order)',
+							'woo-gutenberg-products-block'
+						),
+						value: 'menu_order',
+					},
+					{
+						label: __(
+							'Popularity',
+							'woo-gutenberg-products-block'
+						),
+						value: 'popularity',
+					},
+					{
+						label: __(
+							'Average rating',
+							'woo-gutenberg-products-block'
+						),
+						value: 'rating',
+					},
+					{
+						label: __( 'Latest', 'woo-gutenberg-products-block' ),
+						value: 'date',
+					},
+					{
+						label: __(
+							'Price: low to high',
+							'woo-gutenberg-products-block'
+						),
+						value: 'price',
+					},
+					{
+						label: __(
+							'Price: high to low',
+							'woo-gutenberg-products-block'
+						),
+						value: 'price-desc',
+					},
+				] }
+				onChange={ ( orderby ) => setAttributes( { orderby } ) }
+			/>
+			{ getSetting( 'hide_out_of_stock' ) !== 'yes' && (
+				<SelectControl
+					label={ __(
+						'Products with the stock level:',
 						'woo-gutenberg-products-block'
-					),
-					value: 'price-desc',
-				},
-			] }
-			onChange={ ( orderby ) => setAttributes( { orderby } ) }
-		/>
+					) }
+					value={ attributes.stockStatus }
+					options={ [
+						{
+							label: __(
+								'All stock levels',
+								'woo-gutenberg-products-block'
+							),
+							value: 'any',
+						},
+						{
+							label: __(
+								'In stock',
+								'woo-gutenberg-products-block'
+							),
+							value: 'instock',
+						},
+						{
+							label: __(
+								'Out of stock',
+								'woo-gutenberg-products-block'
+							),
+							value: 'outofstock',
+						},
+						{
+							label: __(
+								'On backorder',
+								'woo-gutenberg-products-block'
+							),
+							value: 'onbackorder',
+						},
+					] }
+					onChange={ ( stockStatus ) =>
+						setAttributes( { stockStatus } )
+					}
+				/>
+			) }
+		</div>
 	);
 };