/**
* 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 "Top Rated Products".
*/
class ProductTopRatedBlock 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 { name, attributes } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<>
{ this.getInspectorControls() }
<Disabled>
<ServerSideRender
block={ name }
attributes={ attributes }
/>
</Disabled>
</>
);
}
}
ProductTopRatedBlock.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 ProductTopRatedBlock;