Add "grid" and "list" view switch for Product Collection (https://github.com/woocommerce/woocommerce-blocks/pull/10145)

* Add Display Layout controls to Product Collection

* Adjust the layout type name

* Add explicit display layout types

* Change the function name to setDisplayLayout so it's more explicit

* Pass only the necessary props to nested inspector controls

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>

plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/display-layout-control.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarGroup } from '@wordpress/components';
+import { list, grid } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionDisplayLayout } from '../types';
+
+type DisplayLayoutObject = {
+	displayLayout: ProductCollectionDisplayLayout;
+};
+
+type DisplayLayoutControlProps = DisplayLayoutObject & {
+	setAttributes: ( attrs: DisplayLayoutObject ) => void;
+};
+
+const DisplayLayoutControl = ( props: DisplayLayoutControlProps ) => {
+	const { type, columns } = props.displayLayout;
+	const setDisplayLayout = (
+		displayLayout: ProductCollectionDisplayLayout
+	) => {
+		props.setAttributes( { displayLayout } );
+	};
+
+	const displayLayoutControls = [
+		{
+			icon: list,
+			title: __( 'List view', 'woo-gutenberg-products-block' ),
+			onClick: () => setDisplayLayout( { type: 'list', columns } ),
+			isActive: type === 'list',
+		},
+		{
+			icon: grid,
+			title: __( 'Grid view', 'woo-gutenberg-products-block' ),
+			onClick: () => setDisplayLayout( { type: 'flex', columns } ),
+			isActive: type === 'flex',
+		},
+	];
+
+	return <ToolbarGroup controls={ displayLayoutControls } />;
+};
+
+export default DisplayLayoutControl;

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { BlockEditProps } from '@wordpress/blocks';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, BlockControls } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { ProductCollectionFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
@@ -28,6 +28,7 @@ import AttributesControl from './attributes-control';
 import TaxonomyControls from './taxonomy-controls';
 import HandPickedProductsControl from './hand-picked-products-control';
 import AuthorControl from './author-control';
+import DisplayLayoutControl from './display-layout-control';
 
 const ProductCollectionInspectorControls = (
 	props: BlockEditProps< ProductCollectionAttributes >
@@ -43,6 +44,12 @@ const ProductCollectionInspectorControls = (
 
 	return (
 		<InspectorControls>
+			<BlockControls>
+				<DisplayLayoutControl
+					displayLayout={ props.attributes.displayLayout }
+					setAttributes={ props.setAttributes }
+				/>
+			</BlockControls>
 			<ToolsPanel
 				label={ __( 'Settings', 'woo-gutenberg-products-block' ) }
 				resetAll={ () => {

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

@@ -17,7 +17,7 @@ export interface ProductCollectionAttributes {
 }
 
 export interface ProductCollectionDisplayLayout {
-	type: string;
+	type: 'flex' | 'list';
 	columns: number;
 }