Reorganise Columns controls and fix undefined problem in Product Coll…

…ection settings (#11937)

* Reorganise Columns controls and fix undefined problem in Product Collection settings

* Remove type condition in hasValue of Columns control

* Adjust the E2E tests locator to new changes

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

@@ -16,21 +16,13 @@ import {
 import { DisplayLayoutToolbarProps } from '../types';
 import { getDefaultDisplayLayout } from '../constants';
 
-const toggleLabel = __(
-	'Shrink columns to fit',
-	'woo-gutenberg-products-block'
-);
-
+const columnsLabel = __( 'Columns', 'woo-gutenberg-products-block' );
+const toggleLabel = __( 'Responsive', 'woo-gutenberg-products-block' );
 const toggleHelp = __(
-	'Reduce the number of columns to better fit smaller screens and spaces.',
+	'Automatically adjust the number of columns to better fit smaller screens.',
 	'woo-gutenberg-products-block'
 );
 
-const getColumnsLabel = ( shrinkColumns: boolean ) =>
-	shrinkColumns
-		? __( 'Max Columns', 'woo-gutenberg-products-block' )
-		: __( 'Columns', 'woo-gutenberg-products-block' );
-
 const ColumnsControl = ( props: DisplayLayoutToolbarProps ) => {
 	const { type, columns, shrinkColumns } = props.displayLayout;
 	const showColumnsControl = type === 'flex';
@@ -63,33 +55,32 @@ const ColumnsControl = ( props: DisplayLayoutToolbarProps ) => {
 	return showColumnsControl ? (
 		<>
 			<ToolsPanelItem
-				hasValue={ () =>
-					defaultLayout?.shrinkColumns !== shrinkColumns
-				}
+				label={ columnsLabel }
+				hasValue={ () => defaultLayout?.columns !== columns }
 				isShownByDefault
 				onDeselect={ onPanelDeselect }
 			>
-				<ToggleControl
-					checked={ !! shrinkColumns }
-					label={ toggleLabel }
-					help={ toggleHelp }
-					onChange={ onShrinkColumnsToggleChange }
+				<RangeControl
+					label={ columnsLabel }
+					onChange={ onColumnsChange }
+					value={ columns }
+					min={ 2 }
+					max={ Math.max( 6, columns ) }
 				/>
 			</ToolsPanelItem>
 			<ToolsPanelItem
+				label={ toggleLabel }
 				hasValue={ () =>
-					defaultLayout?.columns !== columns ||
-					defaultLayout?.type !== type
+					defaultLayout?.shrinkColumns !== shrinkColumns
 				}
 				isShownByDefault
 				onDeselect={ onPanelDeselect }
 			>
-				<RangeControl
-					label={ getColumnsLabel( !! shrinkColumns ) }
-					onChange={ onColumnsChange }
-					value={ columns }
-					min={ 2 }
-					max={ Math.max( 6, columns ) }
+				<ToggleControl
+					checked={ !! shrinkColumns }
+					label={ toggleLabel }
+					help={ toggleHelp }
+					onChange={ onShrinkColumnsToggleChange }
 				/>
 			</ToolsPanelItem>
 		</>

tests/e2e/tests/product-collection/product-collection.page.ts

@@ -29,7 +29,7 @@ export const SELECTORS = {
 	onSaleControlLabel: 'Show only products on sale',
 	inheritQueryFromTemplateControl:
 		'.wc-block-product-collection__inherit-query-control',
-	shrinkColumnsToFit: 'Shrink columns to fit',
+	shrinkColumnsToFit: 'Responsive',
 	productSearchLabel: 'Search',
 	productSearchButton: '.wp-block-search__button wp-element-button',
 };