fix: byline, avatar and date in carousel block (#455)

* fix: byline, avatar and date in carousel block * feat: real author links for avatar and author name
Automattic · May 5, 2020 · 85b7865 · 85b7865
1 parent 94c0a2b
commit 85b7865
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 54 deletions.
diff --git a/class-newspack-blocks-api.php b/class-newspack-blocks-api.php
@@ -172,13 +172,19 @@ public static function newspack_blocks_get_author_info( $object ) {
 				} else {
 					$author_avatar = coauthors_get_avatar( $author, 48 );
 				}
+				$author_link = null;
+				if ( function_exists( 'coauthors_posts_links' ) ) {
+					$author_link = get_author_posts_url( $author->ID, $author->user_nicename );
+				}
 				$author_data[] = array(
 					/* Get the author name */
 					'display_name' => esc_html( $author->display_name ),
 					/* Get the author avatar */
 					'avatar'       => wp_kses_post( $author_avatar ),
 					/* Get the author ID */
 					'id'           => $author->ID,
+					/* Get the author Link */
+					'author_link'  => $author_link,
 				);
 			}
 		else :
@@ -189,6 +195,8 @@ public static function newspack_blocks_get_author_info( $object ) {
 				'avatar'       => get_avatar( $object['author'], 48 ),
 				/* Get the author ID */
 				'id'           => $object['author'],
+				/* Get the author Link */
+				'author_link'  => get_author_posts_url( $object['author'] ),
 			);
 		endif;
 

diff --git a/src/blocks/carousel/edit.js b/src/blocks/carousel/edit.js
@@ -5,19 +5,20 @@
  */
 import QueryControls from '../../components/query-controls';
 import createSwiper from './create-swiper';
-import classnames from 'classnames';
+import { formatAvatars, formatByline } from '../../shared/js/utils';
 
 /**
  * External dependencies
  */
 import { isUndefined, pickBy } from 'lodash';
-import moment from 'moment';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, createRef, Fragment, RawHTML } from '@wordpress/element';
+import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
+import { Component, createRef, Fragment } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/editor';
 import {
 	PanelBody,
@@ -78,6 +79,7 @@ class Edit extends Component {
 			{}
 		);
 	}
+
 	render() {
 		const { attributes, className, setAttributes, latestPosts } = this.props;
 		const { autoPlayState } = this.state;
@@ -99,7 +101,7 @@ class Edit extends Component {
 			'swiper-container',
 			autoplay && autoPlayState && 'wp-block-newspack-blocks-carousel__autoplay-playing'
 		);
-
+		const dateFormat = __experimentalGetSettings().formats.date;
 		return (
 			<Fragment>
 				<div className={ classes } ref={ this.carouselRef }>
@@ -133,26 +135,13 @@ class Edit extends Component {
 														<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
 													</h3>
 													<div className="entry-meta">
-														{ showAuthor && showAvatar && post.newspack_author_info.avatar && (
-															<span className="avatar author-avatar" key="author-avatar">
-																<RawHTML>{ post.newspack_author_info.avatar }</RawHTML>
-															</span>
-														) }
-														{ showAuthor && (
-															<span className="byline">
-																{ __( 'by' ) }{' '}
-																<span className="author vcard">
-																	<a className="url fn n" href="#">
-																		{ post.newspack_author_info.display_name }
-																	</a>
-																</span>
-															</span>
-														) }
+														{ showAuthor &&
+															showAvatar &&
+															formatAvatars( post.newspack_author_info ) }
+														{ showAuthor && formatByline( post.newspack_author_info ) }
 														{ showDate && (
 															<time className="entry-date published" key="pub-date">
-																{ moment( post.date_gmt )
-																	.local()
-																	.format( 'MMMM DD, Y' ) }
+																{ dateI18n( dateFormat, post.date_gmt ) }
 															</time>
 														) }
 													</div>

diff --git a/src/blocks/homepage-articles/edit.js b/src/blocks/homepage-articles/edit.js
@@ -6,6 +6,7 @@
 import QueryControls from '../../components/query-controls';
 import { STORE_NAMESPACE } from './store';
 import { isBlogPrivate, isSpecificPostModeActive, queryCriteriaFromAttributes } from './utils';
+import { formatAvatars, formatByline } from '../../shared/js/utils';
 
 /**
  * External dependencies
@@ -15,7 +16,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
 import { Component, Fragment, RawHTML } from '@wordpress/element';
 import {
@@ -178,8 +179,8 @@ class Edit extends Component {
 						</RawHTML>
 					) }
 					<div className="entry-meta">
-						{ showAuthor && showAvatar && this.formatAvatars( post.newspack_author_info ) }
-						{ showAuthor && this.formatByline( post.newspack_author_info ) }
+						{ showAuthor && showAvatar && formatAvatars( post.newspack_author_info ) }
+						{ showAuthor && formatByline( post.newspack_author_info ) }
 						{ showDate && (
 							<time className="entry-date published" key="pub-date">
 								{ dateI18n( dateFormat, post.date_gmt ) }
@@ -203,35 +204,6 @@ class Edit extends Component {
 		}
 	};
 
-	formatAvatars = authorInfo =>
-		authorInfo.map( author => (
-			<span className="avatar author-avatar" key={ author.id }>
-				<a className="url fn n" href="#">
-					<RawHTML>{ author.avatar }</RawHTML>
-				</a>
-			</span>
-		) );
-
-	formatByline = authorInfo => (
-		<span className="byline">
-			{ _x( 'by', 'post author', 'newspack-blocks' ) }{' '}
-			{ authorInfo.reduce( ( accumulator, author, index ) => {
-				return [
-					...accumulator,
-					<span className="author vcard" key={ author.id }>
-						<a className="url fn n" href="#">
-							{ author.display_name }
-						</a>
-					</span>,
-					index < authorInfo.length - 2 && ', ',
-					authorInfo.length > 1 &&
-						index === authorInfo.length - 2 &&
-						_x( ' and ', 'post author', 'newspack-blocks' ),
-				];
-			}, [] ) }
-		</span>
-	);
-
 	renderInspectorControls = () => {
 		const { attributes, setAttributes, textColor, setTextColor } = this.props;
 

diff --git a/src/shared/js/utils.js b/src/shared/js/utils.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
+
+export const formatAvatars = authorInfo =>
+	authorInfo.map( author => (
+		<span className="avatar author-avatar" key={ author.id }>
+			<a className="url fn n" href={ author.author_link }>
+				<RawHTML>{ author.avatar }</RawHTML>
+			</a>
+		</span>
+	) );
+
+export const formatByline = authorInfo => (
+	<span className="byline">
+		{ _x( 'by', 'post author', 'newspack-blocks' ) }{' '}
+		{ authorInfo.reduce( ( accumulator, author, index ) => {
+			return [
+				...accumulator,
+				<span className="author vcard" key={ author.id }>
+					<a className="url fn n" href={ author.author_link }>
+						{ author.display_name }
+					</a>
+				</span>,
+				index < authorInfo.length - 2 && ', ',
+				authorInfo.length > 1 &&
+					index === authorInfo.length - 2 &&
+					_x( ' and ', 'post author', 'newspack-blocks' ),
+			];
+		}, [] ) }
+	</span>
+);