Product Collection: Add columns control to product collection block e…

…ditor settings (#9466)

* Add columns control to product collection block editor settings

- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.

* Refactor: Simplify Fallback Return in ColumnsControl Component

This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.

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

@@ -2,22 +2,17 @@
  * External dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { InnerBlockTemplate } from '@wordpress/blocks';
+import { BlockEditProps, InnerBlockTemplate } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
-import { Attributes } from './types';
+import { ProductCollectionAttributes } from './types';
 import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/product-title';
-
-interface Props {
-	className: string;
-	attributes: Attributes;
-	setAttributes: ( attributes: Attributes ) => void;
-}
+import InspectorControls from './inspector-controls';
 
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
@@ -76,7 +71,8 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[ 'core/query-no-results' ],
 ];
 
-const Edit = ( { attributes, setAttributes }: Props ) => {
+const Edit = ( props: BlockEditProps< ProductCollectionAttributes > ) => {
+	const { attributes, setAttributes } = props;
 	const { queryId } = attributes;
 
 	const blockProps = useBlockProps();
@@ -96,6 +92,7 @@ const Edit = ( { attributes, setAttributes }: Props ) => {
 
 	return (
 		<div { ...blockProps }>
+			<InspectorControls { ...props } />
 			<div { ...innerBlocksProps } />
 		</div>
 	);

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

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionAttributes } from '../types';
+
+const ColumnsControl = (
+	props: BlockEditProps< ProductCollectionAttributes >
+) => {
+	const { type, columns } = props.attributes.displayLayout;
+	const showColumnsControl = type === 'flex';
+
+	return showColumnsControl ? (
+		<RangeControl
+			label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
+			value={ columns }
+			onChange={ ( value: number ) =>
+				props.setAttributes( {
+					displayLayout: {
+						...props.attributes.displayLayout,
+						columns: value,
+					},
+				} )
+			}
+			min={ 2 }
+			max={ Math.max( 6, columns ) }
+		/>
+	) : null;
+};
+
+export default ColumnsControl;

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

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { BlockEditProps } from '@wordpress/blocks';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionAttributes } from '../types';
+import ColumnsControl from './columns-control';
+
+const ProductCollectionInspectorControls = (
+	props: BlockEditProps< ProductCollectionAttributes >
+) => {
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
+			>
+				<ColumnsControl { ...props } />
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default ProductCollectionInspectorControls;

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

@@ -1,6 +1,16 @@
-export interface Attributes {
-	queryId: number;
+export interface ProductCollectionAttributes {
 	query: ProductCollectionQuery;
+	queryId: number;
+	queryContext: [
+		{
+			page: number;
+		}
+	];
+	templateSlug: string;
+	displayLayout: {
+		type: string;
+		columns: number;
+	};
 }
 
 export interface ProductCollectionQuery {
@@ -18,18 +28,3 @@ export interface ProductCollectionQuery {
 	sticky: string;
 	taxQuery: string;
 }
-
-export interface ProductCollectionContext {
-	query: ProductCollectionQuery;
-	queryId: number;
-	queryContext: [
-		{
-			page: number;
-		}
-	];
-	templateSlug: string;
-	displayLayout: {
-		type: string;
-		columns: number;
-	};
-}

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

@@ -7,7 +7,6 @@
 	"description": "Contains the block elements used to render a product.",
 	"keywords": [ "WooCommerce" ],
     "textdomain": "woo-gutenberg-products-block",
-	"parent": [ "woocommerce/product-collection" ],
 	"usesContext": [
 		"queryId",
 		"query",

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

@@ -16,7 +16,7 @@ import {
 import { Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import type { BlockEditProps } from '@wordpress/blocks';
-import { ProductCollectionContext } from '@woocommerce/blocks/product-collection/types';
+import { ProductCollectionAttributes } from '@woocommerce/blocks/product-collection/types';
 
 const ProductTemplateInnerBlocks = () => {
 	const innerBlocksProps = useInnerBlocksProps(
@@ -96,7 +96,7 @@ const ProductTemplateEdit = ( {
 }: BlockEditProps< {
 	clientId: string;
 } > & {
-	context: ProductCollectionContext;
+	context: ProductCollectionAttributes;
 	__unstableLayoutClassNames: string;
 } ) => {
 	const [ { page } ] = queryContext;