Discover: show full post excerpt in stream

client/blocks/reader-post-card/index.jsx

@@ -31,13 +31,17 @@ export default class RefreshPostCard extends React.Component {
 		onClick: PropTypes.func,
 		onCommentClick: PropTypes.func,
 		showPrimaryFollowButton: PropTypes.bool,
-		originalPost: PropTypes.object // used for Discover only
+		originalPost: PropTypes.object, // used for Discover only
+		showEntireExcerpt: PropTypes.bool,
+		useBetterExcerpt: PropTypes.bool
 	};
 
 	static defaultProps = {
 		onClick: noop,
 		onCommentClick: noop,
-		isSelected: false
+		isSelected: false,
+		showEntireExcerpt: false,
+		useBetterExcerpt: true
 	};
 
 	propagateCardClick = () => {
@@ -88,16 +92,28 @@ export default class RefreshPostCard extends React.Component {
 	}
 
 	render() {
-		const { post, originalPost, site, feed, onCommentClick, showPrimaryFollowButton, isSelected } = this.props;
+		const {
+			post,
+			originalPost,
+			site,
+			feed,
+			onCommentClick,
+			showPrimaryFollowButton,
+			isSelected,
+			showEntireExcerpt,
+			useBetterExcerpt
+		} = this.props;
 		const isPhotoOnly = !! ( post.display_type & DisplayTypes.PHOTO_ONLY );
 		const isGallery = !! ( post.display_type & DisplayTypes.GALLERY );
 		const classes = classnames( 'reader-post-card', {
 			'has-thumbnail': !! post.canonical_media,
 			'is-photo': isPhotoOnly,
 			'is-gallery': isGallery,
-			'is-selected': isSelected
+			'is-selected': isSelected,
+			'is-showing-entire-excerpt': showEntireExcerpt
 		} );
 		const showExcerpt = ! isPhotoOnly;
+		const excerptAttribute = useBetterExcerpt ? 'better_excerpt_no_html' : 'excerpt_no_html';
 		let title = truncate( post.title, {
 			length: 140,
 			separator: /,? +/
@@ -132,7 +148,7 @@ export default class RefreshPostCard extends React.Component {
 						<h1 className="reader-post-card__title">
 							<a className="reader-post-card__title-link" href={ post.URL }>{ title }</a>
 						</h1>
-						{ showExcerpt && <div className="reader-post-card__excerpt">{ post.better_excerpt_no_html }</div> }
+						{ showExcerpt && <div className="reader-post-card__excerpt">{ post[ excerptAttribute ] }</div> }
 						{ isDailyPostChallengeOrPrompt( post ) && <DailyPostButton post={ post } tagName="span" /> }
 						{ post &&
 							<ReaderPostActions

client/blocks/reader-post-card/style.scss

@@ -238,21 +238,21 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )";
 }
 
 .reader-post-card__tag {
-    overflow: hidden;
-    position: relative;
-    height: 20px;
-    width: 100%;
+	overflow: hidden;
+	position: relative;
+	height: 20px;
+	width: 100%;
 
 	&::after {
 		@include long-content-fade( $size: 10% );
 	}
 }
 
 .reader-post-card__tag .gridicons-tag {
-    height: 18px;
-    margin: -4px 5px 0 0;
-    position: relative;
-    	top: 5px;
+	height: 18px;
+	margin: -4px 5px 0 0;
+	position: relative;
+		top: 5px;
 	width: 15px;
 	fill: lighten( $gray, 10% );
 }
@@ -350,14 +350,20 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )";
 	font-weight: 100;
 	margin-top: 9px;
 	word-break: break-word;
-	overflow: hidden;
-	max-height: 15px * 1.6 * 3;
 	position: relative;
+}
+
+// If we're not showing the entire excerpt, clamp to 3 lines
+.reader-post-card.card:not(.is-showing-entire-excerpt) {
+	.reader-post-card__excerpt {
+		overflow: hidden;
+		max-height: 15px * 1.6 * 3;
 
-	&::before {
-		@include long-content-fade( $size: 15px * 1.6 * 5 );
-		top: inherit;
-		height: 15px * 1.6;
+		&::before {
+			@include long-content-fade( $size: 15px * 1.6 * 5 );
+			top: inherit;
+			height: 15px * 1.6;
+		}
 	}
 }
 

client/lib/post-normalizer/rule-create-better-excerpt-refresh.js

@@ -43,6 +43,10 @@ export default function createBetterExcerpt( post ) {
 		return post;
 	}
 
+	// Create standard excerpt for Discover
+	post.excerpt_no_html = formatExcerpt( post.excerpt );
+
+	// Create better excerpt from the main post content
 	post.better_excerpt_no_html = post.better_excerpt = formatExcerpt( post.content );
 
 	// also make a shorter excerpt...

client/reader/discover/helper.js

@@ -13,6 +13,11 @@ const debug = Debug( 'calypso:reader:discover' ); // eslint-disable-line
 import userUtils from 'lib/user/utils';
 import { getSiteUrl as readerRouteGetSiteUrl } from 'reader/route';
 
+function hasDiscoverSlug( post, searchSlug ) {
+	const metaData = get( post, 'discover_metadata.discover_fp_post_formats' );
+	return !! ( metaData && find( metaData, { slug: searchSlug } ) );
+}
+
 export function isDiscoverEnabled() {
 	return userUtils.getLocaleSlug() === 'en';
 }
@@ -22,8 +27,7 @@ export function isDiscoverPost( post ) {
 }
 
 export function isDiscoverSitePick( post ) {
-	const metaData = get( post, 'discover_metadata.discover_fp_post_formats' );
-	return !! ( metaData && find( metaData, { slug: 'site-pick' } ) );
+	return hasDiscoverSlug( post, 'site-pick' );
 }
 
 export function isInternalDiscoverPost( post ) {

client/reader/stream/refresh-post.jsx

@@ -40,6 +40,7 @@ class ReaderPostCardAdapter extends React.Component {
 			site_ID: siteId,
 			is_external: isExternal
 		} = this.props.post;
+		const isDiscoverPost = this.props.post && DiscoverHelper.isDiscoverPost( this.props.post );
 
 		// only query the site if the feed id is missing. feed queries end up fetching site info
 		// via a meta query, so we don't need both.
@@ -52,7 +53,9 @@ class ReaderPostCardAdapter extends React.Component {
 				onClick={ this.onClick }
 				onCommentClick={ this.onCommentClick }
 				isSelected={ this.props.isSelected }
-				showPrimaryFollowButton={ this.props.showPrimaryFollowButtonOnCards }>
+				showPrimaryFollowButton={ this.props.showPrimaryFollowButtonOnCards }
+				showEntireExcerpt={ isDiscoverPost }
+				useBetterExcerpt={ ! isDiscoverPost }>
 				{ feedId && <QueryReaderFeed feedId={ feedId } includeMeta={ false } /> }
 				{ ! isExternal && siteId && <QueryReaderSite siteId={ +siteId } includeMeta={ false } /> }
 			</ReaderPostCard>