From 8e8b72b0537422d8d94b4f51dfd68a4294966e86 Mon Sep 17 00:00:00 2001
From: Razvan <razwan.me@gmail.com>
Date: Tue, 17 Nov 2020 17:38:39 +0200
Subject: [PATCH] Show media placeholder for cards in Posts Collection block in
 editor

---
 .../src/components/post-card/index.js             |  4 +---
 packages/components/src/card/index.js             | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/post-card/index.js b/packages/block-editor/src/components/post-card/index.js
index f5a56ab64..0f749d627 100644
--- a/packages/block-editor/src/components/post-card/index.js
+++ b/packages/block-editor/src/components/post-card/index.js
@@ -131,9 +131,7 @@ const Post = ( props ) => {
 		metaBelowTitle = secondaryMeta;
 	}
 
-	const media = (
-		<Media id={ post.featured_media } />
-	);
+	const media = !! post.featured_media ? <Media id={ post.featured_media } /> : null;
 
 	const buttons = (
 		<div className="wp-block-buttons">
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 6ddcea2c1..799d0b86a 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -1,4 +1,5 @@
 import classnames from "classnames";
+import * as icons from '@novablocks/icons';
 import { RawHTML } from '@wordpress/element';
 import { TextPlaceholder } from '../index';
 
@@ -33,7 +34,7 @@ const Card = ( props ) => {
 		<div className={ className }>
 			<div className="novablocks-card__layout">
 				{
-					( ( showMedia && props.media ) || placeholder ) &&
+					( showMedia || placeholder ) &&
 					<div className="novablocks-card__layout-media novablocks-grid__item-media">
 						<CardMedia { ...props }>{ props.media }</CardMedia>
 					</div>
@@ -161,10 +162,20 @@ const CardMedia = ( { children, placeholder } ) => {
 		}
 	);
 
+	let content = children;
+
+	if ( ! children && ! placeholder ) {
+		content = (
+			<div className={ 'novablocks-card__media-placeholder' }>
+				{ icons.placeholder }
+			</div>
+		);
+	}
+
 	return (
 		<div className="novablocks-card__media-wrap">
 			<div className={ mediaClasses }>
-				{ children }
+				{ content }
 			</div>
 		</div>
 	)