Merge branch 'trunk' into remove-proptypes-reviews-by-product

Author: nielslange

assets/js/atomic/blocks/product-elements/add-to-cart-form/block.json

@@ -3,6 +3,12 @@
 	"version": "1.0.0",
 	"title": "Add to Cart with Options",
 	"description": "Display a button so the customer can add a product to their cart. Options will also be displayed depending on product type. e.g. quantity, variation.",
+	"attributes": {
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		}
+	},
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"usesContext": ["postId"],

assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx

@@ -1,23 +1,38 @@
 /**
  * External dependencies
  */
+import { useEffect } from '@wordpress/element';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { Button, Disabled, Tooltip } from '@wordpress/components';
 import { Skeleton } from '@woocommerce/base-components/skeleton';
+import { BlockEditProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
+import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
 export interface Attributes {
 	className?: string;
+	isDescendentOfSingleProductBlock: boolean;
 }
 
-const Edit = () => {
+const Edit = ( props: BlockEditProps< Attributes > ) => {
+	const { setAttributes } = props;
 	const blockProps = useBlockProps( {
 		className: 'wc-block-add-to-cart-form',
 	} );
+	const { isDescendentOfSingleProductBlock } =
+		useIsDescendentOfSingleProductBlock( {
+			blockClientId: blockProps?.id,
+		} );
+
+	useEffect( () => {
+		setAttributes( {
+			isDescendentOfSingleProductBlock,
+		} );
+	}, [ setAttributes, isDescendentOfSingleProductBlock ] );
 
 	return (
 		<div { ...blockProps }>

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

@@ -31,26 +31,28 @@ export const getDefaultStockStatuses = () => {
 		: Object.keys( STOCK_STATUS_OPTIONS );
 };
 
+export const DEFAULT_QUERY: ProductCollectionQuery = {
+	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(),
+	woocommerceAttributes: [],
+};
+
 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(),
-		woocommerceAttributes: [],
-	},
+	query: DEFAULT_QUERY,
 	tagName: 'div',
 	displayLayout: {
 		type: 'flex',
@@ -65,16 +67,14 @@ export const getDefaultSettings = (
 		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,
+		orderBy: DEFAULT_QUERY.orderBy as TProductCollectionOrderBy,
+		order: DEFAULT_QUERY.order as TProductCollectionOrder,
 	},
 } );
 
 export const DEFAULT_FILTERS = {
-	woocommerceOnSale: ( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery )
-		.woocommerceOnSale,
+	woocommerceOnSale: DEFAULT_QUERY.woocommerceOnSale,
 	woocommerceStockStatus: getDefaultStockStatuses(),
 	woocommerceAttributes: [],
+	taxQuery: DEFAULT_QUERY.taxQuery,
 };

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

@@ -14,6 +14,7 @@ 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';
+import './editor.scss';
 
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[

assets/js/blocks/product-collection/editor.scss

@@ -0,0 +1,5 @@
+.wc-block-editor-product-collection-inspector-toolspanel__filters {
+	.wc-block-editor-product-collection-inspector__taxonomy-control:not(:last-child) {
+		margin-bottom: $grid-unit-30;
+	}
+}

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

@@ -19,11 +19,12 @@ 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 { setQueryAttribute } from '../utils';
 import { DEFAULT_FILTERS, getDefaultSettings } from '../constants';
 import StockStatusControl from './stock-status-control';
 import KeywordControl from './keyword-control';
 import AttributesControl from './attributes-control';
+import TaxonomyControls from './taxonomy-controls';
 
 const ProductCollectionInspectorControls = (
 	props: BlockEditProps< ProductCollectionAttributes >
@@ -54,6 +55,7 @@ const ProductCollectionInspectorControls = (
 					setQueryAttribute( props, DEFAULT_FILTERS );
 					resetAllFilters.forEach( ( resetFilter ) => resetFilter() );
 				} }
+				className="wc-block-editor-product-collection-inspector-toolspanel__filters"
 			>
 				<OnSaleControl { ...props } />
 				<StockStatusControl { ...props } />
@@ -66,6 +68,10 @@ const ProductCollectionInspectorControls = (
 					}
 					setQueryAttribute={ setQueryAttributeBind }
 				/>
+				<TaxonomyControls
+					setQueryAttribute={ setQueryAttributeBind }
+					query={ props.attributes.query }
+				/>
 			</ToolsPanel>
 		</InspectorControls>
 	);

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

@@ -16,7 +16,7 @@ import {
  * Internal dependencies
  */
 import { ProductCollectionAttributes } from '../types';
-import { setQueryAttribute } from './utils';
+import { setQueryAttribute } from '../utils';
 
 const KeywordControl = (
 	props: BlockEditProps< ProductCollectionAttributes >

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

@@ -14,7 +14,7 @@ import {
  * Internal dependencies
  */
 import { ProductCollectionAttributes } from '../types';
-import { setQueryAttribute } from './utils';
+import { setQueryAttribute } from '../utils';
 
 const OnSaleControl = (
 	props: BlockEditProps< ProductCollectionAttributes >

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

@@ -15,7 +15,7 @@ import {
  * Internal dependencies
  */
 import { ProductCollectionAttributes } from '../types';
-import { setQueryAttribute } from './utils';
+import { setQueryAttribute } from '../utils';
 import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../constants';
 
 /**
@@ -76,6 +76,7 @@ const StockStatusControl = (
 					) || []
 				}
 				__experimentalExpandOnFocus={ true }
+				__experimentalShowHowTo={ false }
 			/>
 		</ToolsPanelItem>
 	);

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

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { Taxonomy } from '@wordpress/core-data/src/entity-types';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TaxonomyItem from './taxonomy-item';
+import { ProductCollectionQuery } from '../../types';
+
+interface TaxonomyControlProps {
+	query: ProductCollectionQuery;
+	setQueryAttribute: ( value: Partial< ProductCollectionQuery > ) => void;
+}
+
+/**
+ * Hook that returns the taxonomies associated with product post type.
+ */
+export const useTaxonomies = (): Taxonomy[] => {
+	const taxonomies = useSelect( ( select ) => {
+		const { getTaxonomies } = select( coreStore );
+		const filteredTaxonomies: Taxonomy[] = getTaxonomies( {
+			type: 'product',
+			per_page: -1,
+			context: 'view',
+		} );
+		return filteredTaxonomies;
+	}, [] );
+	return taxonomies;
+};
+
+function TaxonomyControls( {
+	setQueryAttribute,
+	query,
+}: TaxonomyControlProps ) {
+	const { taxQuery } = query;
+
+	const taxonomies = useTaxonomies();
+	if ( ! taxonomies || taxonomies.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<ToolsPanelItem
+			label={ __( 'Taxonomies', 'woo-gutenberg-products-block' ) }
+			hasValue={ () =>
+				Object.values( taxQuery || {} ).some(
+					( terms ) => !! terms.length
+				)
+			}
+			onDeselect={ () => setQueryAttribute( { taxQuery: {} } ) }
+		>
+			{ taxonomies.map( ( taxonomy: Taxonomy ) => {
+				const termIds = taxQuery?.[ taxonomy.slug ] || [];
+				const handleChange = ( newTermIds: number[] ) =>
+					setQueryAttribute( {
+						taxQuery: {
+							...taxQuery,
+							[ taxonomy.slug ]: newTermIds,
+						},
+					} );
+
+				return (
+					<TaxonomyItem
+						key={ taxonomy.slug }
+						taxonomy={ taxonomy }
+						termIds={ termIds }
+						onChange={ handleChange }
+					/>
+				);
+			} ) }
+		</ToolsPanelItem>
+	);
+}
+
+export default TaxonomyControls;