Some test fixes, more proper async code

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

@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	loadBlockType,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -115,8 +116,9 @@ function createBlockCompleter() {
 		allowContext( before, after ) {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
-		getOptionCompletion( inserterItem ) {
+		async getOptionCompletion( inserterItem ) {
 			const { name, initialAttributes, innerBlocks } = inserterItem;
+			await loadBlockType( name );
 			return {
 				action: 'replace',
 				value: createBlock(

packages/block-editor/src/components/convert-to-group-buttons/index.js

@@ -23,9 +23,9 @@ function ConvertToGroupButton( {
 	onClose = () => {},
 } ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const onConvertToGroup = () => {
+	const onConvertToGroup = async () => {
 		// Activate the `transform` on the Grouping Block which does the conversion.
-		const newBlocks = switchToBlockType(
+		const newBlocks = await switchToBlockType(
 			blocksSelection,
 			groupingBlockName
 		);

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

@@ -697,7 +697,7 @@ export const synchronizeTemplate =
  */
 export const __unstableDeleteSelection =
 	( isForward ) =>
-	( { registry, select, dispatch } ) => {
+	async ( { registry, select, dispatch } ) => {
 		const selectionAnchor = select.getSelectionStart();
 		const selectionFocus = select.getSelectionEnd();
 
@@ -798,7 +798,10 @@ export const __unstableDeleteSelection =
 		const blocksWithTheSameType =
 			blockA.name === blockB.name
 				? [ followingBlock ]
-				: switchToBlockType( followingBlock, targetBlockType.name );
+				: await switchToBlockType(
+						followingBlock,
+						targetBlockType.name
+				  );
 
 		// If the block types can not match, do nothing
 		if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
@@ -1003,7 +1006,7 @@ export const __unstableExpandSelection =
  */
 export const mergeBlocks =
 	( firstBlockClientId, secondBlockClientId ) =>
-	( { registry, select, dispatch } ) => {
+	async ( { registry, select, dispatch } ) => {
 		const blocks = [ firstBlockClientId, secondBlockClientId ];
 		dispatch( { type: 'MERGE_BLOCKS', blocks } );
 
@@ -1018,7 +1021,7 @@ export const mergeBlocks =
 		if ( blockAType && ! blockAType.merge ) {
 			// If there's no merge function defined, attempt merging inner
 			// blocks.
-			const blocksWithTheSameType = switchToBlockType(
+			const blocksWithTheSameType = await switchToBlockType(
 				blockB,
 				blockAType.name
 			);
@@ -1102,7 +1105,7 @@ export const mergeBlocks =
 		const blocksWithTheSameType =
 			blockA.name === blockB.name
 				? [ cloneB ]
-				: switchToBlockType( cloneB, blockA.name );
+				: await switchToBlockType( cloneB, blockA.name );
 
 		// If the block types can not match, do nothing.
 		if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {

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

@@ -2145,31 +2145,21 @@ export const getBlockTransformItems = createSelector(
  *
  * @return {boolean} Items that appear in inserter.
  */
-export const hasInserterItems = createRegistrySelector(
-	( select ) =>
-		( state, rootClientId = null ) => {
-			const { getBlockNames, getBootstrappedBlockType } =
-				select( blocksStore );
-			const hasBlockType = getBlockNames().some( ( blockName ) => {
-				return canIncludeBlockTypeInInserter(
-					state,
-					getBootstrappedBlockType( blockName ),
-					rootClientId
-				);
-			} );
-			if ( hasBlockType ) {
-				return true;
-			}
-			const hasReusableBlock =
-				canInsertBlockTypeUnmemoized(
-					state,
-					'core/block',
-					rootClientId
-				) && getReusableBlocks( state ).length > 0;
-
-			return hasReusableBlock;
-		}
-);
+export const hasInserterItems = ( state, rootClientId = null ) => {
+	const hasBlockType = getBootstrappedBlockTypes().some( ( blockType ) =>
+		canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+	);
+
+	if ( hasBlockType ) {
+		return true;
+	}
+
+	const hasReusableBlock =
+		canInsertBlockTypeUnmemoized( state, 'core/block', rootClientId ) &&
+		getReusableBlocks( state ).length > 0;
+
+	return hasReusableBlock;
+};
 
 /**
  * Returns the list of allowed inserter blocks for inner blocks children.

packages/block-library/src/image/image.js

@@ -341,10 +341,10 @@ export default function Image( {
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
 	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
 
-	function switchToCover() {
+	async function switchToCover() {
 		replaceBlocks(
 			clientId,
-			switchToBlockType( getBlock( clientId ), 'core/cover' )
+			await switchToBlockType( getBlock( clientId ), 'core/cover' )
 		);
 	}
 

packages/block-library/src/list-item/edit.js

@@ -90,9 +90,9 @@ export default function ListItemEdit( {
 					onMerge={ onMerge }
 					onReplace={
 						onReplace
-							? ( blocks, ...args ) => {
+							? async ( blocks, ...args ) => {
 									onReplace(
-										convertToListItems( blocks ),
+										await convertToListItems( blocks ),
 										...args
 									);
 							  }

packages/block-library/src/list-item/edit.native.js

@@ -130,12 +130,12 @@ export default function ListItemEdit( {
 		[ clientId, onSplit ]
 	);
 	const onReplaceList = useCallback(
-		( blocks, ...args ) => {
+		async ( blocks, ...args ) => {
 			if ( ! preventDefault.current ) {
-				onReplace( convertToListItems( blocks ), ...args );
+				onReplace( await convertToListItems( blocks ), ...args );
 			}
 		},
-		[ clientId, onReplace, convertToListItems ]
+		[ onReplace ]
 	);
 	const onLayout = useCallback( ( { nativeEvent } ) => {
 		setContentWidth( ( prevState ) => {

packages/block-library/src/list-item/utils.js

@@ -20,23 +20,27 @@ export function createListItem( listItemAttributes, listAttributes, children ) {
 	);
 }
 
-function convertBlockToList( block ) {
-	const list = switchToBlockType( block, listName );
-	if ( list ) return list;
-	const paragraph = switchToBlockType( block, paragraphName );
-	if ( paragraph ) return switchToBlockType( paragraph, listName );
+async function convertBlockToList( block ) {
+	const list = await switchToBlockType( block, listName );
+	if ( list ) {
+		return list;
+	}
+	const paragraph = await switchToBlockType( block, paragraphName );
+	if ( paragraph ) {
+		return await switchToBlockType( paragraph, listName );
+	}
 	return null;
 }
 
-export function convertToListItems( blocks ) {
+export async function convertToListItems( blocks ) {
 	const listItems = [];
 
 	for ( let block of blocks ) {
 		if ( block.name === listItemName ) {
 			listItems.push( block );
 		} else if ( block.name === listName ) {
 			listItems.push( ...block.innerBlocks );
-		} else if ( ( block = convertBlockToList( block ) ) ) {
+		} else if ( ( block = await convertBlockToList( block ) ) ) {
 			for ( const { innerBlocks } of block ) {
 				listItems.push( ...innerBlocks );
 			}

packages/block-library/src/navigation-link/link-ui.js

@@ -105,10 +105,10 @@ function LinkControlTransforms( { clientId } ) {
 					return (
 						<Button
 							key={ `transform-${ index }` }
-							onClick={ () =>
+							onClick={ async () =>
 								replaceBlock(
 									clientId,
-									switchToBlockType(
+									await switchToBlockType(
 										getBlock( clientId ),
 										item.name
 									)

packages/block-library/src/template-part/edit/utils/transformers.js

@@ -94,7 +94,7 @@ async function switchLegacyWidgetType( block ) {
 		return undefined;
 	}
 
-	return switchToBlockType( block, transforms[ 0 ].name );
+	return await switchToBlockType( block, transforms[ 0 ].name );
 }
 
 function transformInnerBlocks( innerBlocks = [] ) {

packages/blocks/src/api/registration.js

@@ -240,11 +240,13 @@ export function registerBlockType( blockNameOrMetadata, settings ) {
 		}
 	} catch {}
 
-	if ( isObject( blockNameOrMetadata ) ) {
-		unstable__bootstrapServerSideBlockDefinitions( {
-			[ name ]: getBlockSettingsFromMetadata( blockNameOrMetadata ),
-		} );
-	}
+	const metadata = isObject( blockNameOrMetadata )
+		? getBlockSettingsFromMetadata( blockNameOrMetadata )
+		: getBlockSettingsFromMetadata( settings );
+
+	unstable__bootstrapServerSideBlockDefinitions( {
+		[ name ]: metadata,
+	} );
 
 	const blockType = {
 		name,

packages/components/src/autocomplete/index.tsx

@@ -77,15 +77,18 @@ export function useAutocomplete( {
 		onChange( insert( record, toInsert, start, end ) );
 	}
 
-	function select( option: KeyedOption ) {
+	async function select( option: KeyedOption ) {
 		const { getOptionCompletion } = autocompleter || {};
 
 		if ( option.isDisabled ) {
 			return;
 		}
 
 		if ( getOptionCompletion ) {
-			const completion = getOptionCompletion( option.value, filterValue );
+			const completion = await getOptionCompletion(
+				option.value,
+				filterValue
+			);
 
 			const isCompletionObject = (
 				obj: OptionCompletion

packages/core-data/src/entity-provider.js

@@ -195,7 +195,7 @@ export function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
 		return () => {
 			mounted = false;
 		};
-	}, [ blocks, editedBlocks, content ] );
+	}, [ editedBlocks, content ] );
 
 	const updateFootnotes = useCallback(
 		( _blocks ) => {

packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts

@@ -11,7 +11,7 @@ import type { Editor } from './index';
  */
 export async function transformBlockTo( this: Editor, name: string ) {
 	await this.page.evaluate(
-		( [ blockName ] ) => {
+		async ( [ blockName ] ) => {
 			const clientIds = window.wp.data
 				.select( 'core/block-editor' )
 				.getSelectedBlockClientIds();
@@ -22,7 +22,10 @@ export async function transformBlockTo( this: Editor, name: string ) {
 				.dispatch( 'core/block-editor' )
 				.replaceBlocks(
 					clientIds,
-					window.wp.blocks.switchToBlockType( blocks, blockName )
+					await window.wp.blocks.switchToBlockType(
+						blocks,
+						blockName
+					)
 				);
 		},
 		[ name ]

packages/e2e-tests/specs/editor/various/block-grouping.test.js

@@ -45,7 +45,7 @@ describe( 'Block Grouping', () => {
 	} );
 
 	describe( 'Group creation', () => {
-		it.only( 'creates a group from multiple blocks of the same type via block transforms', async () => {
+		it( 'creates a group from multiple blocks of the same type via block transforms', async () => {
 			// Creating test blocks.
 			await insertBlocksOfSameType();
 

packages/e2e-tests/specs/editor/various/inserting-blocks.test.js

@@ -159,6 +159,9 @@ describe( 'Inserting blocks', () => {
 
 	it( 'should insert block with the slash inserter when using multiple words', async () => {
 		await page.keyboard.press( 'Enter' );
+		await canvas().waitForSelector(
+			'[data-type="core/paragraph"][data-empty="true"'
+		);
 		await page.keyboard.type( '/tag cloud' );
 		await page.waitForXPath(
 			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Tag Cloud')]`