Prevent shrinkColumns value when switching the layout type of Product…

… Collection (#11905)
woocommerce · Nov 23, 2023 · 684d923 · 684d923
1 parent 225b272
commit 684d923
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/assets/js/blocks/product-collection/inspector-controls/layout-options-control.tsx b/assets/js/blocks/product-collection/inspector-controls/layout-options-control.tsx
@@ -19,7 +19,7 @@ import {
 /**
  * Internal dependencies
  */
-import { DisplayLayoutControlProps, LayoutOptions } from '../types';
+import { DisplayLayoutToolbarProps, LayoutOptions } from '../types';
 
 const getHelpText = ( layoutOptions: LayoutOptions ) => {
 	switch ( layoutOptions ) {
@@ -40,13 +40,14 @@ const getHelpText = ( layoutOptions: LayoutOptions ) => {
 
 const DEFAULT_VALUE = LayoutOptions.GRID;
 
-const LayoutOptionsControl = ( props: DisplayLayoutControlProps ) => {
-	const { type, columns } = props.displayLayout;
+const LayoutOptionsControl = ( props: DisplayLayoutToolbarProps ) => {
+	const { type, columns, shrinkColumns } = props.displayLayout;
 	const setDisplayLayout = ( displayLayout: LayoutOptions ) => {
 		props.setAttributes( {
 			displayLayout: {
 				type: displayLayout,
 				columns,
+				shrinkColumns,
 			},
 		} );
 	};

diff --git a/assets/js/blocks/product-collection/toolbar-controls/display-layout-toolbar.tsx b/assets/js/blocks/product-collection/toolbar-controls/display-layout-toolbar.tsx
@@ -11,10 +11,11 @@ import { list, grid } from '@wordpress/icons';
 import {
 	DisplayLayoutToolbarProps,
 	ProductCollectionDisplayLayout,
+	LayoutOptions,
 } from '../types';
 
 const DisplayLayoutToolbar = ( props: DisplayLayoutToolbarProps ) => {
-	const { type, columns } = props.displayLayout;
+	const { type, columns, shrinkColumns } = props.displayLayout;
 	const setDisplayLayout = (
 		displayLayout: ProductCollectionDisplayLayout
 	) => {
@@ -25,14 +26,24 @@ const DisplayLayoutToolbar = ( props: DisplayLayoutToolbarProps ) => {
 		{
 			icon: list,
 			title: __( 'List view', 'woo-gutenberg-products-block' ),
-			onClick: () => setDisplayLayout( { type: 'list', columns } ),
-			isActive: type === 'list',
+			onClick: () =>
+				setDisplayLayout( {
+					type: LayoutOptions.STACK,
+					columns,
+					shrinkColumns,
+				} ),
+			isActive: type === LayoutOptions.STACK,
 		},
 		{
 			icon: grid,
 			title: __( 'Grid view', 'woo-gutenberg-products-block' ),
-			onClick: () => setDisplayLayout( { type: 'flex', columns } ),
-			isActive: type === 'flex',
+			onClick: () =>
+				setDisplayLayout( {
+					type: LayoutOptions.GRID,
+					columns,
+					shrinkColumns,
+				} ),
+			isActive: type === LayoutOptions.GRID,
 		},
 	];
 

diff --git a/assets/js/blocks/product-collection/types.ts b/assets/js/blocks/product-collection/types.ts
@@ -25,7 +25,7 @@ export enum LayoutOptions {
 export interface ProductCollectionDisplayLayout {
 	type: LayoutOptions;
 	columns: number;
-	shrinkColumns?: boolean;
+	shrinkColumns: boolean;
 }
 
 export enum ETimeFrameOperator {