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:
parent
bd2b8cb279
commit
5926a56602
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
.wc-block-product-on-sale {
|
||||
.components-placeholder__label svg {
|
||||
margin-right: 1ch;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue