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 = () => (
}
label={ __(
@@ -150,7 +150,7 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
);
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 = () => (
+ }
+ 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'
+ ) }
+
+);
/**
* Component to handle edit mode of "On Sale Products".
@@ -98,6 +112,7 @@ class ProductOnSaleBlock extends Component {
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,