Show media placeholder for cards in Posts Collection block in editor

pixelgrade · Nov 17, 2020 · 8e8b72b · 8e8b72b
1 parent 4919436
commit 8e8b72b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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>
 	)