Update Reader Post Component in SEO Reader Preview (Automattic#12704)

* First attempt at using the `reader-post-card` component in the SEO reader preview. * Don’t allow the action buttons to wrap. * Code style cleanup. * Hide the bottom border when used as an SEO preview. * Hide labels until we break at 960px. Used object.assign for a cleaner process of the post -> readerpost conversion. Force has_avatar so we get round avatars for authors. * Cleaned up the PropTypes in the `reader-preview` component. * Fix wrapping issue with action buttons. * Stub the reader-preview component for SSR to get the build working.
solarsoft0 · Apr 5, 2017 · ff7ce23 · ff7ce23
1 parent 4cba38b
commit ff7ce23
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 105 deletions.
diff --git a/client/components/seo-preview-pane/index.jsx b/client/components/seo-preview-pane/index.jsx
@@ -107,18 +107,13 @@ const ComingSoonMessage = translate => (
 const ReaderPost = ( site, post ) => {
 	return (
 		<ReaderPreview
-			siteTitle={ site.name }
-			siteSlug={ site.slug }
-			siteIcon={ `${ get( site, 'icon.img', '//gravatar.com/avatar/' ) }?s=32` }
-			postTitle={ get( post, 'title', '' ) }
+			site={ site }
+			post={ post }
 			postExcerpt={ formatExcerpt(
 				get( post, 'excerpt', false ) ||
 				get( post, 'content', false )
 			) }
 			postImage={ getPostImage( post ) }
-			postDate={ get( post, 'date', (new Date()).toISOString() ) }
-			authorName={ get( post, 'author.name', '' ) }
-			authorIcon={ get( post, 'author.avatar_URL', '' ) }
 		/>
 	);
 };

diff --git a/client/components/seo-preview-pane/style.scss b/client/components/seo-preview-pane/style.scss
@@ -95,6 +95,49 @@
 
 	background-color: $white;
 	border: 1px solid lighten( $gray, 25% );
+
+	.reader-post-card {
+		padding: 10px;
+
+		a {
+			text-decoration: none;
+			pointer-events: none;
+			cursor: default;
+		}
+
+		.reader-post-card__timestamp-and-tag a {
+			color: $gray;
+		}
+
+		.reader-post-actions__item {
+			white-space: nowrap;
+
+			span, .comment-button, .like-button, .ellipsis-menu .button {
+				cursor: default;
+				pointer-events: none;
+
+				&:hover {
+					color: $gray;
+				}
+			}
+		}
+
+		&.card {
+			border-bottom: none;
+		}
+
+		.comment-button__label-status,
+		.like-button__label-status,
+		.reader-share__button-label {
+			@include breakpoint( "<960px" ) {
+				display: none;
+			}
+		}
+
+		@include breakpoint( ">960px" ) {
+			min-width: 480px;
+		}
+	}
 }
 
 .seo-preview-pane__message {

diff --git a/client/components/seo/reader-preview/index.js b/client/components/seo/reader-preview/index.js
@@ -6,78 +6,41 @@ import React, { PropTypes, PureComponent } from 'react';
 /**
  * Internal dependencies
  */
-import humanDate from 'lib/human-date';
+import DisplayTypes from 'state/reader/posts/display-types';
+import ReaderPostCard from 'blocks/reader-post-card';
 
 export class ReaderPreview extends PureComponent {
 	render() {
 		const {
-			siteTitle,
-			siteSlug,
-			siteIcon,
-			postTitle,
+			site,
+			post,
 			postExcerpt,
 			postImage,
-			postDate,
-			authorName,
-			authorIcon
 		} = this.props;
 
+		// Add some ReaderPost specific properties that are necessary
+		const readerPost = Object.assign(
+			post,
+			{ better_excerpt: postExcerpt },
+			postImage && { canonical_media: { src: postImage } },
+			( postImage && ! postExcerpt ) && { display_type: DisplayTypes.PHOTO_ONLY },
+			{ author: Object.assign(
+				post.author,
+				{ has_avatar: true }
+			) }
+		);
+
 		return (
-			<article className="reader-preview">
-				<div className="reader__post-header">
-					<div className="site has-edit-capabilities">
-						<div className="site__content" title={ siteTitle }>
-							<div className="site-icon">
-								<img className="site-icon__img" src={ siteIcon } />
-							</div>
-							<div className="site__info">
-								<div className="site__title">{ siteTitle }</div>
-								<div className="site__domain">{ siteSlug }</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				{ postImage &&
-					<div className="reader__post-featured-image">
-						<img className="reader__post-featured-image-image" src={ postImage } />
-					</div>
-				}
-				<div className="reader-preview__text">
-				{ postTitle &&
-					<h1 className="reader__post-title">{ postTitle }</h1>
-				}
-				{ authorName &&
-					<ul className="reader-post-byline">
-						<li className="reader-post-byline__author">
-							<a href="#" className="external-link">
-								<img className="gravatar" src={ authorIcon } width="16" height="16" />
-								<span className="byline__author-name">{ authorName }</span>
-							</a>
-						</li>
-						<li className="reader-post-byline__date">
-							<a className="reader-post-byline__date-link" href="#">{ humanDate( postDate ) }</a>
-						</li>
-					</ul>
-				}
-				{ postExcerpt &&
-					<div className="post-excerpt"><p>{ postExcerpt }</p></div>
-				}
-				</div>
-			</article>
+			<ReaderPostCard site={ site } post={ readerPost } />
 		);
 	}
 }
 
 ReaderPreview.propTypes = {
-	siteTitle: PropTypes.string,
-	siteSlug: PropTypes.string,
-	siteIcon: PropTypes.string,
-	postTitle: PropTypes.string,
+	site: PropTypes.object,
+	post: PropTypes.object,
 	postExcerpt: PropTypes.string,
-	postImage: PropTypes.string,
-	postDate: PropTypes.string,
-	authorName: PropTypes.string,
-	authorIcon: PropTypes.string
+	postImage: PropTypes.string
 };
 
 export default ReaderPreview;
diff --git a/client/components/seo/style.scss b/client/components/seo/style.scss
@@ -277,44 +277,3 @@
 	text-overflow: ellipsis;
 	margin-top: 0.32333em;
 }
-
-
-// Overrides a few styles from the Reader post component
-.reader-preview {
-	max-width: 540px;
-	pointer-events: none;
-
-	.site__content {
-		padding: 16px 4px 0 16px
-	}
-
-	.reader__post-header {
-		margin: 0;
-	}
-
-	.reader__post-featured-image {
-		margin-top: 16px;
-		left: 0;
-		width: 100%;
-	}
-
-	.reader-post-byline {
-		margin: 8px 0;
-		padding: 0;
-		font-size: 14px;
-
-		a {
-			color: $blue-medium;
-		}
-
-		.reader-post-byline__author .gravatar {
-			height: 16px;
-			width: 16px;
-			top: 4px;
-		}
-	}
-}
-
-.reader-preview__text {
-	padding: 0 16px 16px;
-}
diff --git a/webpack.config.node.js b/webpack.config.node.js
@@ -109,6 +109,7 @@ var webpackConfig = {
 		new webpack.NormalModuleReplacementPlugin( /^lib\/olark$/, 'lodash/noop' ), // Too many dependencies, e.g. sites-list
 		new webpack.NormalModuleReplacementPlugin( /^lib\/post-normalizer\/rule-create-better-excerpt$/, 'lodash/noop' ), // Depends on BOM
 		new webpack.NormalModuleReplacementPlugin( /^components\/seo\/preview-upgrade-nudge$/, 'components/empty-component' ), // Depends on page.js and should never be required server side
+		new webpack.NormalModuleReplacementPlugin( /^components\/seo\/reader-preview$/, 'components/empty-component' ), // Conflicts with component-closest module
 		new webpack.NormalModuleReplacementPlugin( /^components\/popover$/, 'components/empty-component' ), // Depends on BOM and interactions don't work without JS
 		new webpack.NormalModuleReplacementPlugin( /^my-sites\/themes\/themes-site-selector-modal$/, 'components/empty-component' ), // Depends on BOM
 		new webpack.NormalModuleReplacementPlugin( /^my-sites\/themes\/theme-upload$/, 'components/empty-component' ), // Depends on BOM