Added ability to filter latest posts by author

packages/block-library/src/latest-posts/block.json

@@ -15,6 +15,9 @@
 				"type": "object"
 			}
 		},
+		"author": {
+			"type": "number"
+		},
 		"postsToShow": {
 			"type": "number",
 			"default": 5
@@ -31,6 +34,10 @@
 			"type": "number",
 			"default": 55
 		},
+		"displayAuthor": {
+			"type": "boolean",
+			"default": false
+		},
 		"displayPostDate": {
 			"type": "boolean",
 			"default": false

packages/block-library/src/latest-posts/edit.js

@@ -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,
+			author,
 			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( {
+								author:
+									'' !== value ? Number( value ) : undefined,
+							} )
+						}
+						authorList={ authorList }
+						selectedAuthorId={ author }
 					/>
 
 					{ 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',
 					} ) }
 				>
@@ -411,6 +446,12 @@ class LatestPostsEdit extends Component {
 										__( '(no title)' )
 									) }
 								</a>
+								{ displayAuthor && (
+									<div className="wp-block-latest-posts__post-author">
+										{ __( 'Posted by' ) }{ ' ' }
+										{ post.author_info.name }
+									</div>
+								) }
 								{ displayPostDate && post.date_gmt && (
 									<time
 										dateTime={ format(
@@ -455,6 +496,7 @@ export default withSelect( ( select, props ) => {
 		order,
 		orderBy,
 		categories,
+		author,
 	} = props.attributes;
 	const { getEntityRecords, getMedia } = select( 'core' );
 	const { getSettings } = select( 'core/block-editor' );
@@ -466,6 +508,7 @@ export default withSelect( ( select, props ) => {
 	const latestPostsQuery = pickBy(
 		{
 			categories: catIds,
+			author,
 			order,
 			orderby: orderBy,
 			per_page: postsToShow,

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['author'] ) ) {
+		$args['author'] = $attributes['author'];
+	}
 
 	$recent_posts = get_posts( $args );
 
@@ -95,6 +98,14 @@ function render_block_core_latest_posts( $attributes ) {
 			$title
 		);
 
+		if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
+			$list_items_markup .= sprintf(
+				'<div class="wp-block-latest-posts__post-author">%1$s %2$s</div>',
+				__( 'Posted by' ),
+				get_the_author_meta( 'display_name', $post->post_author )
+			);
+		}
+
 		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 +155,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'];
 	}

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;

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 }
+		/>
+	);
+}

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"

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' ],

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} /-->

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,

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": [],

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,