Renamed and moved QueryControls from blocks/QueryPanel to components/…

…QueryControls. (#5319)

This change also exposes the component to be available for general usage. A depency of applyWithAPIData was also removed from the component, because the component should not be the one dealing with data requests.

blocks/library/latest-posts/block.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isUndefined, pickBy } from 'lodash';
+import { get, isUndefined, pickBy } from 'lodash';
 import moment from 'moment';
 import classnames from 'classnames';
 import { stringify } from 'querystringify';
@@ -12,6 +12,7 @@ import { stringify } from 'querystringify';
 import { Component } from '@wordpress/element';
 import {
 	Placeholder,
+	QueryControls,
 	RangeControl,
 	Spinner,
 	ToggleControl,
@@ -26,7 +27,6 @@ import { decodeEntities } from '@wordpress/utils';
  */
 import './editor.scss';
 import './style.scss';
-import QueryPanel from '../../query-panel';
 import InspectorControls from '../../inspector-controls';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -49,16 +49,17 @@ class LatestPostsBlock extends Component {
 
 	render() {
 		const latestPosts = this.props.latestPosts.data;
-		const { attributes, isSelected, setAttributes } = this.props;
+		const { attributes, categoriesList, isSelected, setAttributes } = this.props;
 		const { displayPostDate, align, layout, columns, order, orderBy, categories, postsToShow } = attributes;
 
 		const inspectorControls = isSelected && (
 			<InspectorControls key="inspector">
 				<h3>{ __( 'Latest Posts Settings' ) }</h3>
-				<QueryPanel
+				<QueryControls
 					{ ...{ order, orderBy } }
 					numberOfItems={ postsToShow }
-					category={ categories }
+					categoriesList={ get( categoriesList, 'data', {} ) }
+					selectedCategoryId={ categories }
 					onOrderChange={ ( value ) => setAttributes( { order: value } ) }
 					onOrderByChange={ ( value ) => setAttributes( { orderBy: value } ) }
 					onCategoryChange={ ( value ) => setAttributes( { categories: '' !== value ? value : undefined } ) }
@@ -155,14 +156,19 @@ class LatestPostsBlock extends Component {
 
 export default withAPIData( ( props ) => {
 	const { postsToShow, order, orderBy, categories } = props.attributes;
-	const queryString = stringify( pickBy( {
+	const latestPostsQuery = stringify( pickBy( {
 		categories,
 		order,
 		orderBy,
 		per_page: postsToShow,
 		_fields: [ 'date_gmt', 'link', 'title' ],
 	}, value => ! isUndefined( value ) ) );
+	const categoriesListQuery = stringify( {
+		per_page: 100,
+		_fields: [ 'id', 'name', 'parent' ],
+	} );
 	return {
-		latestPosts: `/wp/v2/posts?${ queryString }`,
+		latestPosts: `/wp/v2/posts?${ latestPostsQuery }`,
+		categoriesList: `/wp/v2/categories?${ categoriesListQuery }`,
 	};
 } )( LatestPostsBlock );

components/index.js

@@ -31,6 +31,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { default as QueryControls } from './query-controls';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
 export { default as ResponsiveWrapper } from './responsive-wrapper';

components/query-controls/category-select.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { buildTermsTree } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
+import TreeSelect from '../tree-select';
+
+export default function CategorySelect( { label, noOptionLabel, categoriesList, selectedCategoryId, onChange } ) {
+	const termsTree = buildTermsTree( categoriesList );
+	return (
+		<TreeSelect
+			{ ...{ label, noOptionLabel, onChange } }
+			tree={ termsTree }
+			selectedId={ selectedCategoryId }
+		/>
+	);
+}

blocks/query-panel/index.js → components/query-controls/index.js

@@ -1,38 +1,34 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RangeControl, SelectControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import { RangeControl, SelectControl } from '../';
 import CategorySelect from './category-select';
 
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 
-export default function QueryPanel( {
-	category,
+export default function QueryControls( {
+	categoriesList,
+	selectedCategoryId,
 	numberOfItems,
 	order,
 	orderBy,
 	maxItems = DEFAULT_MAX_ITEMS,
 	minItems = DEFAULT_MIN_ITEMS,
 	onCategoryChange,
 	onNumberOfItemsChange,
-	onOrderChange = noop,
-	onOrderByChange = noop,
+	onOrderChange,
+	onOrderByChange,
 } ) {
 	return [
-		( onOrderChange || onOrderByChange ) && (
+		( onOrderChange && onOrderByChange ) && (
 			<SelectControl
-				key="query-panel-select"
+				key="query-controls-order-select"
 				label={ __( 'Order by' ) }
 				value={ `${ orderBy }/${ order }` }
 				options={ [
@@ -68,15 +64,16 @@ export default function QueryPanel( {
 		),
 		onCategoryChange && (
 			<CategorySelect
-				key="query-panel-category-select"
+				key="query-controls-category-select"
+				categoriesList={ categoriesList }
 				label={ __( 'Category' ) }
 				noOptionLabel={ __( 'All' ) }
-				selectedCategory={ category }
+				selectedCategoryId={ selectedCategoryId }
 				onChange={ onCategoryChange }
 			/> ),
 		onNumberOfItemsChange && (
 			<RangeControl
-				key="query-panel-range-control"
+				key="query-controls-range-control"
 				label={ __( 'Number of items' ) }
 				value={ numberOfItems }
 				onChange={ onNumberOfItemsChange }