Add tag selector to latest posts widget, add tag selector to queries

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

@@ -34,13 +34,17 @@ import { withSelect } from '@wordpress/data';
 const CATEGORIES_LIST_QUERY = {
 	per_page: -1,
 };
+const TAGS_LIST_QUERY = {
+	per_page: -1,
+};
 const MAX_POSTS_COLUMNS = 6;
 
 class LatestPostsEdit extends Component {
 	constructor() {
 		super( ...arguments );
 		this.state = {
 			categoriesList: [],
+			tagsList: [],
 		};
 	}
 
@@ -61,6 +65,21 @@ class LatestPostsEdit extends Component {
 				}
 			}
 		);
+		this.fetchRequest = apiFetch( {
+			path: addQueryArgs( `/wp/v2/tags`, TAGS_LIST_QUERY ),
+		} ).then(
+			( tagsList ) => {
+				if ( this.isStillMounted ) {
+					this.setState( { tagsList } );
+				}
+			}
+		).catch(
+			() => {
+				if ( this.isStillMounted ) {
+					this.setState( { tagsList: [] } );
+				}
+			}
+		);
 	}
 
 	componentWillUnmount() {
@@ -70,7 +89,8 @@ class LatestPostsEdit extends Component {
 	render() {
 		const { attributes, setAttributes, latestPosts } = this.props;
 		const { categoriesList } = this.state;
-		const { displayPostContentRadio, displayPostContent, displayPostDate, postLayout, columns, order, orderBy, categories, postsToShow, excerptLength } = attributes;
+		const { tagsList } = this.state;
+		const { displayPostContentRadio, displayPostContent, displayPostDate, postLayout, columns, order, orderBy, categories, tags, postsToShow, excerptLength } = attributes;
 
 		const inspectorControls = (
 			<InspectorControls>
@@ -116,9 +136,12 @@ class LatestPostsEdit extends Component {
 						numberOfItems={ postsToShow }
 						categoriesList={ categoriesList }
 						selectedCategoryId={ categories }
+						tagsList={ tagsList }
+						selectedTagId={ tags }
 						onOrderChange={ ( value ) => setAttributes( { order: value } ) }
 						onOrderByChange={ ( value ) => setAttributes( { orderBy: value } ) }
 						onCategoryChange={ ( value ) => setAttributes( { categories: '' !== value ? value : undefined } ) }
+						onTagChange={ ( value ) => setAttributes( { tags: '' !== value ? value : undefined } ) }
 						onNumberOfItemsChange={ ( value ) => setAttributes( { postsToShow: value } ) }
 					/>
 					{ postLayout === 'grid' &&
@@ -244,10 +267,11 @@ class LatestPostsEdit extends Component {
 }
 
 export default withSelect( ( select, props ) => {
-	const { postsToShow, order, orderBy, categories } = props.attributes;
+	const { postsToShow, order, orderBy, categories, tags } = props.attributes;
 	const { getEntityRecords } = select( 'core' );
 	const latestPostsQuery = pickBy( {
 		categories,
+		tags,
 		order,
 		orderby: orderBy,
 		per_page: postsToShow,

packages/block-library/src/latest-posts/index.php

@@ -25,6 +25,10 @@ function render_block_core_latest_posts( $attributes ) {
 		$args['category'] = $attributes['categories'];
 	}
 
+	if ( isset( $attributes['tags'] ) ) {
+		$args['tag'] = $attributes['tags'];
+	}
+
 	$recent_posts = get_posts( $args );
 
 	$list_items_markup = '';
@@ -133,6 +137,9 @@ function register_block_core_latest_posts() {
 				'categories'              => array(
 					'type' => 'string',
 				),
+				'tags'                    => array(
+					'type' => 'string',
+				),
 				'postsToShow'             => array(
 					'type'    => 'number',
 					'default' => 5,

packages/components/src/query-controls/index.js

@@ -8,19 +8,23 @@ import { __ } from '@wordpress/i18n';
  */
 import { RangeControl, SelectControl } from '../';
 import CategorySelect from './category-select';
+import TagSelect from './tag-select';
 
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 
 export default function QueryControls( {
 	categoriesList,
 	selectedCategoryId,
+	tagsList,
+	selectedTagId,
 	numberOfItems,
 	order,
 	orderBy,
 	maxItems = DEFAULT_MAX_ITEMS,
 	minItems = DEFAULT_MIN_ITEMS,
 	onCategoryChange,
+	onTagChange,
 	onNumberOfItemsChange,
 	onOrderChange,
 	onOrderByChange,
@@ -71,6 +75,15 @@ export default function QueryControls( {
 				selectedCategoryId={ selectedCategoryId }
 				onChange={ onCategoryChange }
 			/> ),
+		onTagChange && (
+			<TagSelect
+				key="query-controls-tag-select"
+				tagsList={ tagsList }
+				label={ __( 'Tag' ) }
+				noOptionLabel={ __( 'All' ) }
+				selectedTagId={ selectedTagId }
+				onChange={ onTagChange }
+			/> ),
 		onNumberOfItemsChange && (
 			<RangeControl
 				key="query-controls-range-control"

packages/components/src/query-controls/tag-select.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { buildTermsTree } from './terms';
+import TreeSelect from '../tree-select';
+
+export default function TagSelect( { label, noOptionLabel, tagsList, selectedTagId, onChange } ) {
+	const termsTree = buildTermsTree( tagsList );
+	return (
+		<TreeSelect
+			{ ...{ label, noOptionLabel, onChange } }
+			tree={ termsTree }
+			selectedId={ selectedTagId }
+		/>
+	);
+}