From 5926a5660259863bc09c62634e02a066cf0314e7 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 10 Jan 2020 14:40:15 +0000
Subject: [PATCH] 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
---
 .../js/blocks/product-categories/block.js       |  4 ++--
 .../assets/js/blocks/product-on-sale/block.js   | 17 ++++++++++++++++-
 .../js/blocks/product-on-sale/editor.scss       |  6 ++++++
 .../assets/js/blocks/product-on-sale/index.js   |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/editor.scss

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js
index b2dde336acc..76963c14930 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js
@@ -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>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js
index 5a2f0776f68..06a78cb54f3 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js
@@ -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>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/editor.scss
new file mode 100644
index 00000000000..1b72998e2cf
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/editor.scss
@@ -0,0 +1,6 @@
+.wc-block-product-on-sale {
+	.components-placeholder__label svg {
+		margin-right: 1ch;
+		fill: currentColor;
+	}
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js
index c8e9fd34df7..7a37e02e9c3 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js
@@ -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,