adds removed props and behavior back to Query Controls (#23419)

fixing backward compat for plugins that use this component. the new behavior exists only if the new props are passed in.

packages/components/src/query-controls/README.md

@@ -40,3 +40,45 @@ const MyQueryControls = withState( {
 	/>
 ) );
 ```
+
+## Multiple category selector
+
+The `QueryControls` component now supports multiple category selection, to replace the single category selection available so far. To enable it use the component with the new props instead: `categorySuggestions` in place of `categoriesList` and the `selectedCategories` array instead of `selectedCategoryId` like so:
+
+```jsx
+const MyQueryControls = withState( {
+	orderBy: 'title',
+	order: 'asc',
+	selectedCategories: [ 1 ],
+	categories: { 
+		'Category 1': {
+			id: 1,
+			name: 'Category 1',
+			parent: 0,
+		},
+		'Category 1b': {
+			id: 2,
+			name: 'Category 1b',
+			parent: 1,
+		},
+		'Category 2': {
+			id: 3,
+			name: 'Category 2',
+			parent: 0,
+		},
+	},
+	numberOfItems: 10,
+} )( ( { orderBy, order, category, categories, numberOfItems, setState } ) => (
+	<QueryControls
+		{ ...{ orderBy, order, numberOfItems } }
+		onOrderByChange={ ( orderBy ) => setState( { orderBy } ) }
+		onOrderChange={ ( order ) => setState( { order } ) }
+		categorySuggestions={ categories }
+		selectedCategories={ selectedCategories }
+		onCategoryChange={ ( category ) => setState( { category } ) }
+		onNumberOfItemsChange={ ( numberOfItems ) => setState( { numberOfItems } ) }
+	/>
+) );
+```
+
+The format of the categories list also needs to be updated to match what `FormTokenField` expects for making suggestions.

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

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import CategorySelect from './category-select';
 import { RangeControl, SelectControl, FormTokenField } from '../';
 import AuthorSelect from './author-select';
 
@@ -16,6 +17,8 @@ const MAX_CATEGORIES_SUGGESTIONS = 20;
 export default function QueryControls( {
 	authorList,
 	selectedAuthorId,
+	categoriesList,
+	selectedCategoryId,
 	categorySuggestions,
 	selectedCategories,
 	numberOfItems,
@@ -66,7 +69,16 @@ export default function QueryControls( {
 				} }
 			/>
 		),
-		onCategoryChange && (
+		categoriesList && onCategoryChange && (
+			<CategorySelect
+				key="query-controls-category-select"
+				categoriesList={ categoriesList }
+				label={ __( 'Category' ) }
+				noOptionLabel={ __( 'All' ) }
+				selectedCategoryId={ selectedCategoryId }
+			/>
+		),
+		categorySuggestions && onCategoryChange && (
 			<FormTokenField
 				key="query-controls-categories-select"
 				label={ __( 'Categories' ) }