Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Reorganise Columns controls and fix undefined problem in Product Collection settings #11937

Merged
merged 3 commits into from
Nov 28, 2023
Merged

Reorganise Columns controls and fix undefined problem in Product Collection settings #11937

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53bdf07
Reorganise Columns controls and fix undefined problem in Product Coll…
kmanijak Nov 24, 2023
efa7f68
Remove type condition in hasValue of Columns control
kmanijak Nov 27, 2023
04ca44a
Adjust the E2E tests locator to new changes
kmanijak Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 19 additions & 25 deletions assets/js/blocks/product-collection/inspector-controls/columns-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -63,33 +55,35 @@ const ColumnsControl = ( props: DisplayLayoutToolbarProps ) => {
return showColumnsControl ? (
<>
<ToolsPanelItem
label={ columnsLabel }
hasValue={ () =>
defaultLayout?.shrinkColumns !== shrinkColumns
defaultLayout?.columns !== columns ||
defaultLayout?.type !== type
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think the "defaultLayout?.type !== type" condition is necessary. In my view, "defaultLayout?.columns !== columns" should suffice. no?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, I applied your suggestion!

}
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>
</>
Expand Down
Loading