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>
This commit is contained in:
parent
708ed47a85
commit
fd378be6eb
|
@ -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;
|
|
@ -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={ () => {
|
||||
|
|
|
@ -17,7 +17,7 @@ export interface ProductCollectionAttributes {
|
|||
}
|
||||
|
||||
export interface ProductCollectionDisplayLayout {
|
||||
type: string;
|
||||
type: 'flex' | 'list';
|
||||
columns: number;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue