Enhancement: added ability to filter latest posts by author and to di…

…splay author (#16169) * Added ability to filter latest posts by author * Updates to catch up to changes in Gutenberg * Fixes error of: Notice: Undefined index: items in /wp-includes/rest-api.php on line "1245" * Removed unused variables and fixed linting issues * Removed Whitespace from index.php * adding new line to index.php * applied changes suggested by @draganescu to LatestPosts block * linting edit * Updated from users to author on LatestPosts block * Added display author option * Updated edit.js on LatestPosts to match front end on author label * Attempt to fix tests on LatestPosts * Update e2e tests for LatestPostsa * Fix for PHP Unit tests * Updated rendering of author name on editor view * Changed 'posted by' to 'by' on the byline * Fixed linting issue in index.php for LatestPost * Fixed formatting issues in index.php for LatestPosts * fix to undefined author_info Co-authored-by: Paul Stonier <[email protected]>
WordPress · Jun 2, 2020 · 4ad2ed4 · 4ad2ed4
1 parent 89e3431
commit 4ad2ed4
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 5 deletions.
diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json
@@ -21,6 +21,9 @@
 				"type": "object"
 			}
 		},
+		"selectedAuthor": {
+			"type": "number"
+		},
 		"postsToShow": {
 			"type": "number",
 			"default": 5
@@ -37,6 +40,10 @@
 			"type": "number",
 			"default": 55
 		},
+		"displayAuthor": {
+			"type": "boolean",
+			"default": false
+		},
 		"displayPostDate": {
 			"type": "boolean",
 			"default": false

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -21,7 +21,7 @@ import {
 } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';
 import {
 	InspectorControls,
@@ -47,12 +47,16 @@ import {
 const CATEGORIES_LIST_QUERY = {
 	per_page: -1,
 };
+const USERS_LIST_QUERY = {
+	per_page: -1,
+};
 
 class LatestPostsEdit extends Component {
 	constructor() {
 		super( ...arguments );
 		this.state = {
 			categoriesList: [],
+			authorList: [],
 		};
 	}
 
@@ -71,6 +75,19 @@ class LatestPostsEdit extends Component {
 					this.setState( { categoriesList: [] } );
 				}
 			} );
+		this.fetchRequest = apiFetch( {
+			path: addQueryArgs( `/wp/v2/users`, USERS_LIST_QUERY ),
+		} )
+			.then( ( authorList ) => {
+				if ( this.isStillMounted ) {
+					this.setState( { authorList } );
+				}
+			} )
+			.catch( () => {
+				if ( this.isStillMounted ) {
+					this.setState( { authorList: [] } );
+				}
+			} );
 	}
 
 	componentWillUnmount() {
@@ -86,17 +103,19 @@ class LatestPostsEdit extends Component {
 			defaultImageWidth,
 			defaultImageHeight,
 		} = this.props;
-		const { categoriesList } = this.state;
+		const { categoriesList, authorList } = this.state;
 		const {
 			displayFeaturedImage,
 			displayPostContentRadio,
 			displayPostContent,
 			displayPostDate,
+			displayAuthor,
 			postLayout,
 			columns,
 			order,
 			orderBy,
 			categories,
+			selectedAuthor,
 			postsToShow,
 			excerptLength,
 			featuredImageAlign,
@@ -177,6 +196,13 @@ class LatestPostsEdit extends Component {
 				</PanelBody>
 
 				<PanelBody title={ __( 'Post meta settings' ) }>
+					<ToggleControl
+						label={ __( 'Display author name' ) }
+						checked={ displayAuthor }
+						onChange={ ( value ) =>
+							setAttributes( { displayAuthor: value } )
+						}
+					/>
 					<ToggleControl
 						label={ __( 'Display post date' ) }
 						checked={ displayPostDate }
@@ -258,6 +284,14 @@ class LatestPostsEdit extends Component {
 						categorySuggestions={ categorySuggestions }
 						onCategoryChange={ selectCategories }
 						selectedCategories={ categories }
+						onAuthorChange={ ( value ) =>
+							setAttributes( {
+								selectedAuthor:
+									'' !== value ? Number( value ) : undefined,
+							} )
+						}
+						authorList={ authorList }
+						selectedAuthorId={ selectedAuthor }
 					/>
 
 					{ postLayout === 'grid' && (
@@ -333,6 +367,7 @@ class LatestPostsEdit extends Component {
 						'wp-block-latest-posts__list': true,
 						'is-grid': postLayout === 'grid',
 						'has-dates': displayPostDate,
+						'has-author': displayAuthor,
 						[ `columns-${ columns }` ]: postLayout === 'grid',
 					} ) }
 				>
@@ -343,6 +378,9 @@ class LatestPostsEdit extends Component {
 							'trim',
 						] );
 						let excerpt = post.excerpt.rendered;
+						const currentAuthor = authorList.find(
+							( author ) => author.id === post.author
+						);
 
 						const excerptElement = document.createElement( 'div' );
 						excerptElement.innerHTML = excerpt;
@@ -411,6 +449,15 @@ class LatestPostsEdit extends Component {
 										__( '(no title)' )
 									) }
 								</a>
+								{ displayAuthor && (
+									<div className="wp-block-latest-posts__post-author">
+										{ sprintf(
+											/* translators: byline. %s: current author. */
+											__( 'by %s' ),
+											currentAuthor.name
+										) }
+									</div>
+								) }
 								{ displayPostDate && post.date_gmt && (
 									<time
 										dateTime={ format(
@@ -455,6 +502,7 @@ export default withSelect( ( select, props ) => {
 		order,
 		orderBy,
 		categories,
+		selectedAuthor,
 	} = props.attributes;
 	const { getEntityRecords, getMedia } = select( 'core' );
 	const { getSettings } = select( 'core/block-editor' );
@@ -466,6 +514,7 @@ export default withSelect( ( select, props ) => {
 	const latestPostsQuery = pickBy(
 		{
 			categories: catIds,
+			author: selectedAuthor,
 			order,
 			orderby: orderBy,
 			per_page: postsToShow,

diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
@@ -49,6 +49,9 @@ function render_block_core_latest_posts( $attributes ) {
 	if ( isset( $attributes['categories'] ) ) {
 		$args['category__in'] = array_column( $attributes['categories'], 'id' );
 	}
+	if ( isset( $attributes['selectedAuthor'] ) ) {
+		$args['author'] = $attributes['selectedAuthor'];
+	}
 
 	$recent_posts = get_posts( $args );
 
@@ -95,6 +98,20 @@ function render_block_core_latest_posts( $attributes ) {
 			$title
 		);
 
+		if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
+			$author_display_name = get_the_author_meta( 'display_name', $post->post_author );
+
+			/* translators: byline. %s: current author. */
+			$byline = sprintf( __( 'by %s' ), $author_display_name );
+
+			if ( ! empty( $author_display_name ) ) {
+				$list_items_markup .= sprintf(
+					'<div class="wp-block-latest-posts__post-author">%1$s</div>',
+					esc_html( $byline )
+				);
+			}
+		}
+
 		if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
 			$list_items_markup .= sprintf(
 				'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
@@ -144,6 +161,10 @@ function render_block_core_latest_posts( $attributes ) {
 		$class .= ' has-dates';
 	}
 
+	if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
+		$class .= ' has-author';
+	}
+
 	if ( isset( $attributes['className'] ) ) {
 		$class .= ' ' . $attributes['className'];
 	}

diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
@@ -34,7 +34,8 @@
 	}
 }
 
-.wp-block-latest-posts__post-date {
+.wp-block-latest-posts__post-date,
+.wp-block-latest-posts__post-author {
 	display: block;
 	color: $dark-gray-300;
 	font-size: $default-font-size;

diff --git a/packages/components/src/query-controls/author-select.js b/packages/components/src/query-controls/author-select.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { buildTermsTree } from './terms';
+import TreeSelect from '../tree-select';
+
+export default function AuthorSelect( {
+	label,
+	noOptionLabel,
+	authorList,
+	selectedAuthorId,
+	onChange,
+} ) {
+	const termsTree = buildTermsTree( authorList );
+	return (
+		<TreeSelect
+			{ ...{ label, noOptionLabel, onChange } }
+			tree={ termsTree }
+			selectedId={ selectedAuthorId }
+		/>
+	);
+}
diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js
@@ -7,12 +7,15 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { RangeControl, SelectControl, FormTokenField } from '../';
+import AuthorSelect from './author-select';
 
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 const MAX_CATEGORIES_SUGGESTIONS = 20;
 
 export default function QueryControls( {
+	authorList,
+	selectedAuthorId,
 	categorySuggestions,
 	selectedCategories,
 	numberOfItems,
@@ -21,6 +24,7 @@ export default function QueryControls( {
 	maxItems = DEFAULT_MAX_ITEMS,
 	minItems = DEFAULT_MIN_ITEMS,
 	onCategoryChange,
+	onAuthorChange,
 	onNumberOfItemsChange,
 	onOrderChange,
 	onOrderByChange,
@@ -77,7 +81,16 @@ export default function QueryControls( {
 				maxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }
 			/>
 		),
-
+		onAuthorChange && (
+			<AuthorSelect
+				key="query-controls-author-select"
+				authorList={ authorList }
+				label={ __( 'Author' ) }
+				noOptionLabel={ __( 'All' ) }
+				selectedAuthorId={ selectedAuthorId }
+				onChange={ onAuthorChange }
+			/>
+		),
 		onNumberOfItemsChange && (
 			<RangeControl
 				key="query-controls-range-control"

diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js
@@ -221,6 +221,10 @@ export const EXPECTED_TRANSFORMS = {
 		originalBlock: 'Latest Posts',
 		availableTransforms: [ 'Group' ],
 	},
+	'core__latest-posts__displayAuthor': {
+		originalBlock: 'Latest Posts',
+		availableTransforms: [ 'Group' ],
+	},
 	'core__latest-posts__displayPostDate': {
 		originalBlock: 'Latest Posts',
 		availableTransforms: [ 'Group' ],

diff --git a/packages/e2e-tests/fixtures/blocks/core__latest-posts.html b/packages/e2e-tests/fixtures/blocks/core__latest-posts.html
@@ -1 +1 @@
-<!-- wp:core/latest-posts {"postsToShow":5,"displayPostDate":false} /-->
+<!-- wp:core/latest-posts {"postsToShow":5,"displayAuthor":false,"displayPostDate":false} /-->
diff --git a/packages/e2e-tests/fixtures/blocks/core__latest-posts.json b/packages/e2e-tests/fixtures/blocks/core__latest-posts.json
@@ -8,6 +8,7 @@
             "displayPostContent": false,
             "displayPostContentRadio": "excerpt",
             "excerptLength": 55,
+            "displayAuthor": false,
             "displayPostDate": false,
             "postLayout": "list",
             "columns": 3,

diff --git a/packages/e2e-tests/fixtures/blocks/core__latest-posts.parsed.json b/packages/e2e-tests/fixtures/blocks/core__latest-posts.parsed.json
@@ -3,6 +3,7 @@
         "blockName": "core/latest-posts",
         "attrs": {
             "postsToShow": 5,
+            "displayAuthor": false,
             "displayPostDate": false
         },
         "innerBlocks": [],

diff --git a/packages/e2e-tests/fixtures/blocks/core__latest-posts__displayPostDate.json b/packages/e2e-tests/fixtures/blocks/core__latest-posts__displayPostDate.json
@@ -8,6 +8,7 @@
             "displayPostContent": false,
             "displayPostContentRadio": "excerpt",
             "excerptLength": 55,
+            "displayAuthor": false,
             "displayPostDate": true,
             "postLayout": "list",
             "columns": 3,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!-- wp:core/latest-posts {"postsToShow":5,"displayPostDate":false} /-->
		<!-- wp:core/latest-posts {"postsToShow":5,"displayAuthor":false,"displayPostDate":false} /-->