Add Empty Placeholder for the on-sale product block (https://github.com/woocommerce/woocommerce-blocks/pull/1519)

* Add EmptyResponsePlaceholder for on sale block

* Linting

* Address feedback
This commit is contained in:
Mike Jolley 2020-01-10 14:40:15 +00:00 committed by GitHub
parent bd2b8cb279
commit 5926a56602
4 changed files with 25 additions and 3 deletions

View File

@ -9,7 +9,7 @@ import { PanelBody, ToggleControl, Placeholder } from '@wordpress/components';
import { IconFolder } from '@woocommerce/block-components/icons';
import ToggleButtonControl from '@woocommerce/block-components/toggle-button-control';
const EmptyPlaceHolder = () => (
const EmptyPlaceholder = () => (
<Placeholder
icon={ <IconFolder /> }
label={ __(
@ -150,7 +150,7 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
<ServerSideRender
block={ name }
attributes={ attributes }
EmptyResponsePlaceholder={ EmptyPlaceHolder }
EmptyResponsePlaceholder={ EmptyPlaceholder }
/>
</Fragment>
);

View File

@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { Disabled, PanelBody } from '@wordpress/components';
import { Disabled, PanelBody, Placeholder } from '@wordpress/components';
import { InspectorControls, ServerSideRender } from '@wordpress/editor';
import PropTypes from 'prop-types';
import GridContentControl from '@woocommerce/block-components/grid-content-control';
@ -11,6 +11,20 @@ import GridLayoutControl from '@woocommerce/block-components/grid-layout-control
import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
import { IconProductOnSale } from '@woocommerce/block-components/icons';
const EmptyPlaceholder = () => (
<Placeholder
icon={ <IconProductOnSale /> }
label={ __( 'On Sale Products', 'woo-gutenberg-products-block' ) }
className="wc-block-product-on-sale"
>
{ __(
'This block shows on-sale products. There are currently no discounted products in your store.',
'woo-gutenberg-products-block'
) }
</Placeholder>
);
/**
* Component to handle edit mode of "On Sale Products".
@ -98,6 +112,7 @@ class ProductOnSaleBlock extends Component {
<ServerSideRender
block={ name }
attributes={ attributes }
EmptyResponsePlaceholder={ EmptyPlaceholder }
/>
</Disabled>
</Fragment>

View File

@ -0,0 +1,6 @@
.wc-block-product-on-sale {
.components-placeholder__label svg {
margin-right: 1ch;
fill: currentColor;
}
}

View File

@ -10,6 +10,7 @@ import { IconProductOnSale } from '@woocommerce/block-components/icons';
* Internal dependencies
*/
import Block from './block';
import './editor.scss';
import { deprecatedConvertToShortcode } from '../../utils/deprecations';
import sharedAttributes, {
sharedAttributeBlockTypes,