2019-08-23 14:48:48 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
import { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
import { Placeholder } from '@wordpress/components';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import EditorBlock from './editor-block.js';
|
|
|
|
import { getBlockClassName, getOrderArgs } from './utils.js';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Container of the block rendered in the editor.
|
|
|
|
*/
|
|
|
|
class EditorContainerBlock extends Component {
|
|
|
|
renderHiddenContentPlaceholder() {
|
|
|
|
const { icon, name } = this.props;
|
|
|
|
|
|
|
|
return (
|
2019-09-05 15:09:31 +00:00
|
|
|
<Placeholder icon={ icon } label={ name }>
|
|
|
|
{ __(
|
|
|
|
'The content for this block is hidden due to block settings.',
|
|
|
|
'woo-gutenberg-products-block'
|
|
|
|
) }
|
2019-08-23 14:48:48 +00:00
|
|
|
</Placeholder>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { attributes, className, noReviewsPlaceholder } = this.props;
|
2019-09-05 15:09:31 +00:00
|
|
|
const {
|
|
|
|
categoryIds,
|
|
|
|
productId,
|
|
|
|
reviewsOnPageLoad,
|
|
|
|
showProductName,
|
|
|
|
showReviewDate,
|
|
|
|
showReviewerName,
|
|
|
|
showReviewContent,
|
|
|
|
showReviewImage,
|
|
|
|
showReviewRating,
|
|
|
|
} = attributes;
|
2019-08-23 14:48:48 +00:00
|
|
|
const { order, orderby } = getOrderArgs( attributes.orderby );
|
2019-09-05 15:09:31 +00:00
|
|
|
const isAllContentHidden =
|
|
|
|
! showReviewContent &&
|
|
|
|
! showReviewRating &&
|
|
|
|
! showReviewDate &&
|
|
|
|
! showReviewerName &&
|
|
|
|
! showReviewImage &&
|
|
|
|
! showProductName;
|
2019-08-23 14:48:48 +00:00
|
|
|
|
|
|
|
if ( isAllContentHidden ) {
|
|
|
|
return this.renderHiddenContentPlaceholder();
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={ getBlockClassName( className, attributes ) }>
|
|
|
|
<EditorBlock
|
|
|
|
attributes={ attributes }
|
|
|
|
categoryIds={ categoryIds }
|
|
|
|
delayFunction={ ( callback ) => debounce( callback, 400 ) }
|
|
|
|
noReviewsPlaceholder={ noReviewsPlaceholder }
|
|
|
|
orderby={ orderby }
|
|
|
|
order={ order }
|
|
|
|
productId={ productId }
|
|
|
|
reviewsToDisplay={ reviewsOnPageLoad }
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
EditorContainerBlock.propTypes = {
|
|
|
|
attributes: PropTypes.object.isRequired,
|
|
|
|
icon: PropTypes.node.isRequired,
|
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
noReviewsPlaceholder: PropTypes.func.isRequired,
|
|
|
|
className: PropTypes.string,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default EditorContainerBlock;
|