Product Collection: Add 'on sale' filter and enhance settings management in product collection block

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

@@ -28,7 +28,8 @@
 				"inherit": false,
 				"taxQuery": null,
 				"parents": [],
-				"isProductCollectionBlock": true
+				"isProductCollectionBlock": true,
+				"woocommerceOnSale": false
 			}
 		},
 		"tagName": {

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

@@ -1,36 +1,61 @@
 /**
  * External dependencies
  */
-import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { BlockEditProps } from '@wordpress/blocks';
+import {
+	RangeControl,
+	// @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 {
+	ProductCollectionAttributes,
+	ProductCollectionDisplayLayout,
+} from '../types';
+import { getDefaultSettings } from './constants';
 
 const ColumnsControl = (
 	props: BlockEditProps< ProductCollectionAttributes >
 ) => {
 	const { type, columns } = props.attributes.displayLayout;
 	const showColumnsControl = type === 'flex';
 
+	const defaultSettings = getDefaultSettings( props.attributes );
+
 	return showColumnsControl ? (
-		<RangeControl
+		<ToolsPanelItem
 			label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
-			value={ columns }
-			onChange={ ( value: number ) =>
-				props.setAttributes( {
-					displayLayout: {
-						...props.attributes.displayLayout,
-						columns: value,
-					},
-				} )
+			hasValue={ () =>
+				defaultSettings.displayLayout?.columns !== columns ||
+				defaultSettings.displayLayout?.type !== type
 			}
-			min={ 2 }
-			max={ Math.max( 6, columns ) }
-		/>
+			isShownByDefault
+			onDeselect={ () => {
+				props.setAttributes( {
+					displayLayout:
+						defaultSettings.displayLayout as ProductCollectionDisplayLayout,
+				} );
+			} }
+		>
+			<RangeControl
+				value={ columns }
+				onChange={ ( value: number ) =>
+					props.setAttributes( {
+						displayLayout: {
+							...props.attributes.displayLayout,
+							columns: value,
+						},
+					} )
+				}
+				min={ 2 }
+				max={ Math.max( 6, columns ) }
+			/>
+		</ToolsPanelItem>
 	) : null;
 };
 

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

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import blockJson from '../block.json';
+import {
+	ProductCollectionAttributes,
+	TProductCollectionOrder,
+	TProductCollectionOrderBy,
+} from '../types';
+
+const defaultQuery = blockJson.attributes.query.default;
+
+export const DEFAULT_FILTERS = {
+	woocommerceOnSale: defaultQuery.woocommerceOnSale,
+};
+
+export const getDefaultSettings = (
+	currentAttributes: ProductCollectionAttributes
+): Partial< ProductCollectionAttributes > => ( {
+	displayLayout: blockJson.attributes.displayLayout.default,
+	query: {
+		...currentAttributes.query,
+		orderBy: blockJson.attributes.query.default
+			.orderBy as TProductCollectionOrderBy,
+		order: blockJson.attributes.query.default
+			.order as TProductCollectionOrder,
+	},
+} );

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

@@ -3,27 +3,49 @@
  */
 import type { BlockEditProps } from '@wordpress/blocks';
 import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import {
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { ProductCollectionAttributes } from '../types';
 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';
 
 const ProductCollectionInspectorControls = (
 	props: BlockEditProps< ProductCollectionAttributes >
 ) => {
 	return (
 		<InspectorControls>
-			<PanelBody
-				title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
+			<ToolsPanel
+				label={ __( 'Settings', 'woo-gutenberg-products-block' ) }
+				resetAll={ () => {
+					const defaultSettings = getDefaultSettings(
+						props.attributes
+					);
+					props.setAttributes( defaultSettings );
+				} }
 			>
 				<ColumnsControl { ...props } />
 				<OrderByControl { ...props } />
-			</PanelBody>
+			</ToolsPanel>
+
+			<ToolsPanel
+				label={ __( 'Filters', 'woo-gutenberg-products-block' ) }
+				resetAll={ () => {
+					setQueryAttribute( props, DEFAULT_FILTERS );
+				} }
+			>
+				<OnSaleControl { ...props } />
+			</ToolsPanel>
 		</InspectorControls>
 	);
 };

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

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { BlockEditProps } from '@wordpress/blocks';
+import {
+	ToggleControl,
+	// @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';
+
+const OnSaleControl = (
+	props: BlockEditProps< ProductCollectionAttributes >
+) => {
+	const { query } = props.attributes;
+
+	return (
+		<ToolsPanelItem
+			label={ __( 'On Sale', 'woo-gutenberg-products-block' ) }
+			hasValue={ () => query.woocommerceOnSale }
+			isShownByDefault
+			onDeselect={ () => {
+				props.setAttributes( {
+					query: {
+						...query,
+						woocommerceOnSale: false,
+					},
+				} );
+			} }
+		>
+			<ToggleControl
+				label={ __(
+					'Show only products on sale',
+					'woo-gutenberg-products-block'
+				) }
+				checked={ query.woocommerceOnSale || false }
+				onChange={ ( woocommerceOnSale ) => {
+					props.setAttributes( {
+						query: {
+							...query,
+							woocommerceOnSale,
+						},
+					} );
+				} }
+			/>
+		</ToolsPanelItem>
+	);
+};
+
+export default OnSaleControl;

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

@@ -1,9 +1,14 @@
 /**
  * External dependencies
  */
-import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { BlockEditProps } from '@wordpress/blocks';
+import {
+	SelectControl,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -13,6 +18,7 @@ import {
 	TProductCollectionOrder,
 	TProductCollectionOrderBy,
 } from '../types';
+import { getDefaultSettings } from './constants';
 
 const orderOptions = [
 	{
@@ -45,22 +51,40 @@ const OrderByControl = (
 	props: BlockEditProps< ProductCollectionAttributes >
 ) => {
 	const { order, orderBy } = props.attributes.query;
+	const defaultSettings = getDefaultSettings( props.attributes );
+
 	return (
-		<SelectControl
+		<ToolsPanelItem
 			label={ __( 'Order by', 'woo-gutenberg-products-block' ) }
-			value={ `${ orderBy }/${ order }` }
-			options={ orderOptions }
-			onChange={ ( value ) => {
-				const [ newOrderBy, newOrder ] = value.split( '/' );
+			hasValue={ () =>
+				order !== defaultSettings.query?.order ||
+				orderBy !== defaultSettings.query?.orderBy
+			}
+			isShownByDefault
+			onDeselect={ () => {
 				props.setAttributes( {
 					query: {
 						...props.attributes.query,
-						order: newOrder as TProductCollectionOrder,
-						orderBy: newOrderBy as TProductCollectionOrderBy,
+						...defaultSettings.query,
 					},
 				} );
 			} }
-		/>
+		>
+			<SelectControl
+				value={ `${ orderBy }/${ order }` }
+				options={ orderOptions }
+				onChange={ ( value ) => {
+					const [ newOrderBy, newOrder ] = value.split( '/' );
+					props.setAttributes( {
+						query: {
+							...props.attributes.query,
+							order: newOrder as TProductCollectionOrder,
+							orderBy: newOrderBy as TProductCollectionOrderBy,
+						},
+					} );
+				} }
+			/>
+		</ToolsPanelItem>
 	);
 };
 

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

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionAttributes, ProductCollectionQuery } from '../types';
+
+/**
+ * Sets the new query arguments of a Product Query block
+ *
+ * Shorthand for setting new nested query parameters.
+ */
+export function setQueryAttribute(
+	block: BlockEditProps< ProductCollectionAttributes >,
+	queryParams: Partial< ProductCollectionQuery >
+) {
+	const { query } = block.attributes;
+
+	block.setAttributes( {
+		query: {
+			...query,
+			...queryParams,
+		},
+	} );
+}

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

@@ -7,10 +7,12 @@ export interface ProductCollectionAttributes {
 		}
 	];
 	templateSlug: string;
-	displayLayout: {
-		type: string;
-		columns: number;
-	};
+	displayLayout: ProductCollectionDisplayLayout;
+}
+
+export interface ProductCollectionDisplayLayout {
+	type: string;
+	columns: number;
 }
 
 export interface ProductCollectionQuery {
@@ -27,6 +29,7 @@ export interface ProductCollectionQuery {
 	search: string;
 	sticky: string;
 	taxQuery: string;
+	woocommerceOnSale: boolean;
 }
 
 export type TProductCollectionOrder = 'asc' | 'desc';