diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index c7ca39a6cd09bb..07eb43f5bad171 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -18,7 +18,6 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarGroup,
-	FormTokenField,
 } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
@@ -112,7 +111,13 @@ class LatestPostsEdit extends Component {
 			} ),
 			{}
 		);
-
+		const categorySuggestions = categoriesList.reduce(
+			( accumulator, category ) => ( {
+				...accumulator,
+				[ category.name ]: category,
+			} ),
+			{}
+		);
 		const selectCategories = ( tokens ) => {
 			// Categories that are already will be objects, while new additions will be strings (the name).
 			// allCategories nomalizes the array so that they are all objects.
@@ -243,21 +248,11 @@ class LatestPostsEdit extends Component {
 						onNumberOfItemsChange={ ( value ) =>
 							setAttributes( { postsToShow: value } )
 						}
+						categorySuggestions={ categorySuggestions }
+						onCategoryChange={ selectCategories }
+						selectedCategories={ categories }
 					/>
-					{ categoriesList.length > 0 && (
-						<FormTokenField
-							label={ __( 'Categories' ) }
-							value={
-								categories &&
-								categories.map( ( item ) => ( {
-									id: item.id,
-									value: item.name || item.value,
-								} ) )
-							}
-							suggestions={ Object.keys( suggestions ) }
-							onChange={ selectCategories }
-						/>
-					) }
+
 					{ postLayout === 'grid' && (
 						<RangeControl
 							label={ __( 'Columns' ) }
diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js
index f9a340354399bb..67c975b8e4bee8 100644
--- a/packages/components/src/query-controls/index.js
+++ b/packages/components/src/query-controls/index.js
@@ -7,11 +7,11 @@ import { Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { RangeControl, SelectControl } from '../';
-import CategorySelect from './category-select';
+import { RangeControl, SelectControl, FormTokenField } from '../';
 
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
+const MAX_CATEGORIES_SUGGESTIONS = 20;
 
 // currently this is needed for consistent controls UI on mobile
 // this can be removed after control components settle on consistent defaults
@@ -25,8 +25,8 @@ const MOBILE_CONTROL_PROPS_SEPARATOR_NONE = Platform.select( {
 } );
 
 export default function QueryControls( {
-	categoriesList,
-	selectedCategoryId,
+	categorySuggestions,
+	selectedCategories,
 	numberOfItems,
 	order,
 	orderBy,
@@ -76,16 +76,21 @@ export default function QueryControls( {
 			/>
 		),
 		onCategoryChange && (
-			<CategorySelect
-				key="query-controls-category-select"
-				categoriesList={ categoriesList }
-				label={ __( 'Category' ) }
-				noOptionLabel={ __( 'All' ) }
-				selectedCategoryId={ selectedCategoryId }
+			<FormTokenField
+				label={ __( 'Categories' ) }
+				value={
+					selectedCategories &&
+					selectedCategories.map( ( item ) => ( {
+						id: item.id,
+						value: item.name || item.value,
+					} ) )
+				}
+				suggestions={ Object.keys( categorySuggestions ) }
 				onChange={ onCategoryChange }
-				{ ...MOBILE_CONTROL_PROPS }
+				maxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }
 			/>
 		),
+
 		onNumberOfItemsChange && (
 			<RangeControl
 				key="query-controls-range-control"