119 lines
2.9 KiB
JavaScript
119 lines
2.9 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Component } from '@wordpress/element';
|
|
import { Disabled, PanelBody } from '@wordpress/components';
|
|
import { InspectorControls } from '@wordpress/block-editor';
|
|
import ServerSideRender from '@wordpress/server-side-render';
|
|
import PropTypes from 'prop-types';
|
|
import GridContentControl from '@woocommerce/editor-components/grid-content-control';
|
|
import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
|
|
import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
|
|
import { gridBlockPreview } from '@woocommerce/resource-previews';
|
|
import { getSetting } from '@woocommerce/settings';
|
|
|
|
/**
|
|
* Component to handle edit mode of "Best Selling Products".
|
|
*/
|
|
class ProductBestSellersBlock extends Component {
|
|
getInspectorControls() {
|
|
const { attributes, setAttributes } = this.props;
|
|
const {
|
|
categories,
|
|
catOperator,
|
|
columns,
|
|
contentVisibility,
|
|
rows,
|
|
alignButtons,
|
|
} = attributes;
|
|
|
|
return (
|
|
<InspectorControls key="inspector">
|
|
<PanelBody
|
|
title={ __( 'Layout', 'woocommerce' ) }
|
|
initialOpen
|
|
>
|
|
<GridLayoutControl
|
|
columns={ columns }
|
|
rows={ rows }
|
|
alignButtons={ alignButtons }
|
|
setAttributes={ setAttributes }
|
|
minColumns={ getSetting( 'min_columns', 1 ) }
|
|
maxColumns={ getSetting( 'max_columns', 6 ) }
|
|
minRows={ getSetting( 'min_rows', 1 ) }
|
|
maxRows={ getSetting( 'max_rows', 6 ) }
|
|
/>
|
|
</PanelBody>
|
|
<PanelBody
|
|
title={ __( 'Content', 'woocommerce' ) }
|
|
initialOpen
|
|
>
|
|
<GridContentControl
|
|
settings={ contentVisibility }
|
|
onChange={ ( value ) =>
|
|
setAttributes( { contentVisibility: value } )
|
|
}
|
|
/>
|
|
</PanelBody>
|
|
<PanelBody
|
|
title={ __(
|
|
'Filter by Product Category',
|
|
'woocommerce'
|
|
) }
|
|
initialOpen={ false }
|
|
>
|
|
<ProductCategoryControl
|
|
selected={ categories }
|
|
onChange={ ( value = [] ) => {
|
|
const ids = value.map( ( { id } ) => id );
|
|
setAttributes( { categories: ids } );
|
|
} }
|
|
operator={ catOperator }
|
|
onOperatorChange={ ( value = 'any' ) =>
|
|
setAttributes( { catOperator: value } )
|
|
}
|
|
/>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { attributes, name } = this.props;
|
|
|
|
if ( attributes.isPreview ) {
|
|
return gridBlockPreview;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{ this.getInspectorControls() }
|
|
<Disabled>
|
|
<ServerSideRender
|
|
block={ name }
|
|
attributes={ attributes }
|
|
/>
|
|
</Disabled>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
ProductBestSellersBlock.propTypes = {
|
|
/**
|
|
* The attributes for this block
|
|
*/
|
|
attributes: PropTypes.object.isRequired,
|
|
/**
|
|
* The register block name.
|
|
*/
|
|
name: PropTypes.string.isRequired,
|
|
/**
|
|
* A callback to update attributes
|
|
*/
|
|
setAttributes: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default ProductBestSellersBlock;
|