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

Product Collection - shrink columns to fit #11320

Merged
merged 5 commits into from
Oct 23, 2023
Merged

Product Collection - shrink columns to fit #11320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1a2a03e
Add Toggle to inspector controls allowing shrinking number of columns
kmanijak Oct 18, 2023
17a48b8
Add logic to allow columns to shrink in Product Collection
kmanijak Oct 18, 2023
a824385
Rename SCSS variable
kmanijak Oct 19, 2023
624fdfc
Make sure the value provided to component is a boolean
kmanijak Oct 20, 2023
99b6415
Rename onChange callback name to better reflect its purpose
kmanijak Oct 23, 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
1 change: 1 addition & 0 deletions assets/js/blocks/product-collection/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export const DEFAULT_ATTRIBUTES: Partial< ProductCollectionAttributes > = {
displayLayout: {
type: LayoutOptions.GRID,
columns: 3,
shrinkColumns: false,
},
};

Expand Down
103 changes: 73 additions & 30 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 @@ -4,6 +4,7 @@
import { __ } from '@wordpress/i18n';
import {
RangeControl,
ToggleControl,
// @ts-expect-error Using experimental features
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToolsPanelItem as ToolsPanelItem,
Expand All @@ -12,44 +13,86 @@ import {
/**
* Internal dependencies
*/
import { DisplayLayoutControlProps } from '../types';
import { DisplayLayoutToolbarProps } from '../types';
import { getDefaultDisplayLayout } from '../constants';

const ColumnsControl = ( props: DisplayLayoutControlProps ) => {
const { type, columns } = props.displayLayout;
const toggleLabel = __(
'Shrink columns to fit',
'woo-gutenberg-products-block'
);

const toggleHelp = __(
'Reduce the number of columns to better fit smaller screens and spaces.',
'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';

const defaultLayout = getDefaultDisplayLayout();

const onShrinkColumnsToggleChange = ( value: boolean ) => {
props.setAttributes( {
displayLayout: {
...props.displayLayout,
shrinkColumns: value,
},
} );
};

const onPanelDeselect = () => {
props.setAttributes( {
displayLayout: defaultLayout,
} );
};

const onColumnsChange = ( value: number ) =>
props.setAttributes( {
displayLayout: {
...props.displayLayout,
columns: value,
},
} );

return showColumnsControl ? (
<ToolsPanelItem
label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
hasValue={ () =>
defaultLayout?.columns !== columns ||
defaultLayout?.type !== type
}
isShownByDefault
onDeselect={ () => {
props.setAttributes( {
displayLayout: defaultLayout,
} );
} }
>
<RangeControl
label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
value={ columns }
onChange={ ( value: number ) =>
props.setAttributes( {
displayLayout: {
...props.displayLayout,
columns: value,
},
} )
<>
<ToolsPanelItem
hasValue={ () =>
defaultLayout?.shrinkColumns !== shrinkColumns
}
isShownByDefault
onDeselect={ onPanelDeselect }
>
<ToggleControl
checked={ !! shrinkColumns }
label={ toggleLabel }
help={ toggleHelp }
onChange={ onShrinkColumnsToggleChange }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () =>
defaultLayout?.columns !== columns ||
defaultLayout?.type !== type
}
min={ 2 }
max={ Math.max( 6, columns ) }
/>
</ToolsPanelItem>
isShownByDefault
onDeselect={ onPanelDeselect }
>
<RangeControl
label={ getColumnsLabel( !! shrinkColumns ) }
onChange={ onColumnsChange }
value={ columns }
min={ 2 }
max={ Math.max( 6, columns ) }
/>
</ToolsPanelItem>
</>
) : null;
};

Expand Down
1 change: 1 addition & 0 deletions assets/js/blocks/product-collection/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export enum LayoutOptions {
export interface ProductCollectionDisplayLayout {
type: LayoutOptions;
columns: number;
shrinkColumns?: boolean;
}

export interface ProductCollectionQuery {
Expand Down
17 changes: 12 additions & 5 deletions assets/js/blocks/product-template/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { __ } from '@wordpress/i18n';
import {
BlockContextProvider,
__experimentalUseBlockPreview as useBlockPreview,

Check warning on line 11 in assets/js/blocks/product-template/edit.tsx

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

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

[@wordpress/no-unsafe-wp-apis] Usage of `__experimentalUseBlockPreview` from `@wordpress/block-editor` is not allowed.
See https://developer.wordpress.org/block-editor/contributors/develop/coding-guidelines/#experimental-and-unstable-apis for details.
useBlockProps,
useInnerBlocksProps,
store as blockEditorStore,
Expand Down Expand Up @@ -87,9 +87,10 @@
},
queryContext = [ { page: 1 } ],
templateSlug,
displayLayout: { type: layoutType, columns } = {
displayLayout: { type: layoutType, columns, shrinkColumns } = {
type: 'flex',
columns: 3,
shrinkColumns: false,
},
},
__unstableLayoutClassNames,
Expand Down Expand Up @@ -203,15 +204,21 @@
} ) ),
[ products ]
);

const hasLayoutFlex = layoutType === 'flex' && columns > 1;
let customClassName = '';
if ( hasLayoutFlex ) {
const dynamicGrid = `wc-block-product-template__responsive columns-${ columns }`;
const staticGrid = `is-flex-container columns-${ columns }`;

customClassName = shrinkColumns ? dynamicGrid : staticGrid;
}

const blockProps = useBlockProps( {
className: classnames(
__unstableLayoutClassNames,
'wc-block-product-template',
{
'is-flex-container': hasLayoutFlex,
[ `columns-${ columns }` ]: hasLayoutFlex,
}
customClassName
),
} );

Expand Down
22 changes: 22 additions & 0 deletions assets/js/blocks/product-template/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
$break-small: 600px;

$grid-gap: 1.25em;
$min-product-width: 150px;

@mixin break-small() {
@media (min-width: #{ ($break-small) }) {
@content;
Expand Down Expand Up @@ -39,6 +42,25 @@ $break-small: 600px;
}
}
}

&__responsive {
display: grid;
grid-gap: $grid-gap;

@for $i from 2 through 6 {
$gap-count: calc(#{ $i } - 1);
$total-gap-width: calc(#{ $gap-count } * #{ $grid-gap });
$max-product-width: calc((100% - #{ $total-gap-width }) / #{ $i });

&.columns-#{ $i } {
grid-template-columns: repeat(auto-fill, minmax(max(#{ $min-product-width }, #{ $max-product-width }), 1fr));
}
}

> li {
margin-block-start: 0;
}
}
}

/**
Expand Down
6 changes: 5 additions & 1 deletion src/BlockTypes/ProductTemplate.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,11 @@ protected function render( $attributes, $content, $block ) {
$classnames = '';
if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) {
if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) {
$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
if ( $block->context['displayLayout']['shrinkColumns'] ) {
Copy link
Member

Choose a reason for hiding this comment

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

Hi @kmanijak - I didn't catch this earlier but this can potentially be undefined and will cause a PHP warning. So perhaps use ! empty()check?

$classnames = "wc-block-product-template__responsive columns-{$block->context['displayLayout']['columns']}";
} else {
$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
}
}
}
if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
Expand Down
Loading