Add a placeholder if title has no content

assets/js/atomic/blocks/product-elements/shared/content-placeholder.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const ContentPlaceholder = ( { label } ) => (
+	<div className="wc-atomic-blocks-product-placeholder">{ label }</div>
+);
+
+export default ContentPlaceholder;

assets/js/atomic/blocks/product-elements/shared/editor.scss

@@ -9,3 +9,7 @@
 		margin: 0 0 $gap;
 	}
 }
+.wc-atomic-blocks-product-placeholder {
+	border: 1px solid #000;
+	padding: 1em;
+}

assets/js/atomic/blocks/product-elements/title/block.js

@@ -22,9 +22,15 @@ import './style.scss';
  * @param {string}  [props.className]    CSS Class name for the component.
  * @param {number}  [props.headingLevel] Heading level (h1, h2 etc)
  * @param {boolean} [props.productLink]  Whether or not to display a link to the product page.
+ * @param {Element|null} [props.placeholder] Placeholder content should nothing be rendered.
  * @return {*} The component.
  */
-const Block = ( { className, headingLevel = 2, productLink = true } ) => {
+const Block = ( {
+	className,
+	headingLevel = 2,
+	productLink = true,
+	placeholder = null,
+} ) => {
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const TagName = `h${ headingLevel }`;
@@ -36,21 +42,30 @@ const Block = ( { className, headingLevel = 2, productLink = true } ) => {
 				className={ classnames(
 					className,
 					'wc-block-components-product-title',
-					`${ parentClassName }__product-title`
+					'wc-block-components-product-title--placeholder',
+					{
+						[ `${ parentClassName }__product-title` ]: parentClassName,
+					}
 				) }
 			/>
 		);
 	}
 
 	const productName = decodeEntities( product.name );
 
+	if ( ! productName ) {
+		return placeholder;
+	}
+
 	return (
 		// @ts-ignore
 		<TagName
 			className={ classnames(
 				className,
 				'wc-block-components-product-title',
-				`${ parentClassName }__product-title`
+				{
+					[ `${ parentClassName }__product-title` ]: parentClassName,
+				}
 			) }
 		>
 			{ productLink ? (

assets/js/atomic/blocks/product-elements/title/edit.js

@@ -11,6 +11,7 @@ import HeadingToolbar from '@woocommerce/block-components/heading-toolbar';
  */
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
+import ContentPlaceholder from '../shared/content-placeholder';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
 const Edit = ( { attributes, setAttributes } ) => {
@@ -51,7 +52,17 @@ const Edit = ( { attributes, setAttributes } ) => {
 				</PanelBody>
 			</InspectorControls>
 			<Disabled>
-				<Block { ...attributes } />
+				<Block
+					{ ...attributes }
+					placeholder={
+						<ContentPlaceholder
+							label={ __(
+								'The selected product does not have a title.',
+								'woo-gutenberg-products-block'
+							) }
+						/>
+					}
+				/>
 			</Disabled>
 		</>
 	);

assets/js/atomic/blocks/product-elements/title/style.scss

@@ -11,15 +11,23 @@
 		font-size: inherit;
 		display: block;
 	}
-	&--is-loading {
-		.wc-block-components-product-title::before {
-			@include placeholder();
-			content: ".";
-			display: inline-block;
-			width: 7em;
-		}
-		.wc-block-grid .wc-block-components-product-title::before {
-			width: 10em;
-		}
+}
+
+.wc-block-components-product-title--placeholder::before {
+	@include placeholder();
+	content: ".";
+	display: inline-block;
+	width: 7em;
+}
+
+.wc-block-layout--is-loading {
+	.wc-block-components-product-title::before {
+		@include placeholder();
+		content: ".";
+		display: inline-block;
+		width: 7em;
+	}
+	.wc-block-grid .wc-block-components-product-title::before {
+		width: 10em;
 	}
 }