Include the block variations on the inserter selector

packages/block-editor/src/autocompleters/block.js

@@ -15,7 +15,6 @@ import { useMemo } from '@wordpress/element';
  */
 import { searchBlockItems } from '../components/inserter/search-items';
 import useBlockTypesState from '../components/inserter/hooks/use-block-types-state';
-import { includeVariationsInInserterItems } from '../components/inserter/utils';
 import BlockIcon from '../components/block-icon';
 
 const SHOWN_BLOCK_TYPES = 9;
@@ -98,10 +97,7 @@ function createBlockCompleter() {
 
 			const options = useMemo(
 				() =>
-					includeVariationsInInserterItems(
-						filteredItems,
-						SHOWN_BLOCK_TYPES
-					).map( ( blockItem ) => {
+					filteredItems.map( ( blockItem ) => {
 						const { title, icon, isDisabled } = blockItem;
 						return {
 							key: `block-${ blockItem.id }`,

packages/block-editor/src/components/block-types-list/index.js

@@ -13,22 +13,16 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import InserterListItem from '../inserter-list-item';
-import { includeVariationsInInserterItems } from '../inserter/utils';
 
 function BlockTypesList( {
 	items = [],
 	onSelect,
 	onHover = () => {},
 	children,
 	label,
-	limit,
 } ) {
 	const composite = useCompositeState();
-	const normalizedItems = includeVariationsInInserterItems( items, limit );
-	const orderId = normalizedItems.reduce(
-		( acc, item ) => acc + '--' + item.id,
-		''
-	);
+	const orderId = items.reduce( ( acc, item ) => acc + '--' + item.id, '' );
 
 	// This ensures the composite state refreshes when the list order changes.
 	useEffect( () => {
@@ -47,7 +41,7 @@ function BlockTypesList( {
 			className="block-editor-block-types-list"
 			aria-label={ label }
 		>
-			{ normalizedItems.map( ( item ) => {
+			{ items.map( ( item ) => {
 				return (
 					<InserterListItem
 						key={ item.id }

packages/block-editor/src/components/inserter/block-types-tab.js

@@ -147,7 +147,6 @@ export function BlockTypesTab( {
 							onSelect={ onSelectItem }
 							onHover={ onHover }
 							label={ _x( 'Most used', 'blocks' ) }
-							limit={ MAX_SUGGESTED_ITEMS }
 						/>
 					</InserterPanel>
 				) }

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -80,7 +80,6 @@ function QuickInserterList( {
 						onSelect={ onSelectBlockType }
 						onHover={ onHover }
 						label={ __( 'Blocks' ) }
-						limit={ SHOWN_BLOCK_TYPES }
 					/>
 				</InserterPanel>
 			) }

packages/block-editor/src/store/selectors.js

@@ -1365,6 +1365,29 @@ const canIncludeBlockTypeInInserter = ( state, blockType, rootClientId ) => {
 	return canInsertBlockTypeUnmemoized( state, blockType.name, rootClientId );
 };
 
+/**
+ * Return a function to be used to tranform a block variation to an inserter item
+ *
+ * @param {Object} item Denormalized inserter item
+ * @return {Function} Function to transform a block variation to inserter item
+ */
+const getItemFromVariation = ( item ) => ( variation ) => ( {
+	...item,
+	id: `${ item.id }-${ variation.name }`,
+	icon: variation.icon || item.icon,
+	title: variation.title || item.title,
+	description: variation.description || item.description,
+	// If `example` is explicitly undefined for the variation, the preview will not be shown.
+	example: variation.hasOwnProperty( 'example' )
+		? variation.example
+		: item.example,
+	initialAttributes: {
+		...item.initialAttributes,
+		...variation.attributes,
+	},
+	innerBlocks: variation.innerBlocks,
+} );
+
 /**
  * Determines the items that appear in the inserter. Includes both static
  * items (e.g. a regular block type) and dynamic items (e.g. a reusable block).
@@ -1502,7 +1525,30 @@ export const getInserterItems = createSelector(
 			? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
 			: [];
 
-		return [ ...blockTypeInserterItems, ...reusableBlockInserterItems ];
+		// Exclude any block type item that is to be replaced by a default
+		// variation.
+		const visibleBlockTypeInserterItems = blockTypeInserterItems.filter(
+			( { variations = [] } ) =>
+				! variations.some( ( { isDefault } ) => isDefault )
+		);
+
+		// Fill `variationsToAdd` until there are as many items in total as
+		// `limit`.
+		const blockVariations = [];
+		// Show all available blocks with variations
+		for ( const item of blockTypeInserterItems ) {
+			const { variations = [] } = item;
+			if ( variations.length ) {
+				const variationMapper = getItemFromVariation( item );
+				blockVariations.push( ...variations.map( variationMapper ) );
+			}
+		}
+
+		return [
+			...visibleBlockTypeInserterItems,
+			...blockVariations,
+			...reusableBlockInserterItems,
+		];
 	},
 	( state, rootClientId ) => [
 		state.blockListSettings[ rootClientId ],