Async block loading

docs/reference-guides/data/data-core-block-editor.md

@@ -834,6 +834,10 @@ _Returns_
 
 -   `string|false`: Block Template Lock
 
+### getUnsyncedPatterns
+
+Undocumented declaration.
+
 ### hasBlockMovingClientId
 
 Returns whether block moving mode is enabled.

docs/reference-guides/data/data-core-blocks.md

@@ -246,6 +246,14 @@ _Returns_
 
 -   `(WPBlockVariation[]|void)`: Block variations.
 
+### getBootstrappedBlockType
+
+Undocumented declaration.
+
+### getBootstrappedBlockTypes
+
+Undocumented declaration.
+
 ### getCategories
 
 Returns all the available block categories.

lib/blocks.php

@@ -224,6 +224,13 @@ function gutenberg_deregister_core_block_and_assets( $block_name ) {
 				}
 			}
 		}
+		if ( ! empty( $block_type->editor_script_handles ) ) {
+			foreach ( $block_type->editor_script_handles as $editor_script_handle ) {
+				if ( str_starts_with( $editor_script_handle, 'wp-block-' ) ) {
+					wp_deregister_script( $editor_script_handle );
+				}
+			}
+		}
 		$registry->unregister( $block_name );
 	}
 }

lib/init.php

@@ -57,3 +57,55 @@ function gutenberg_menu() {
 	);
 }
 add_action( 'admin_menu', 'gutenberg_menu', 9 );
+
+// disable loading and enqueuing block editor scripts and styles
+add_filter( 'should_load_block_editor_scripts_and_styles', '__return_false', 11 );
+
+function get_block_importmap() {
+	$block_registry = WP_Block_Type_Registry::get_instance();
+	$scripts = wp_scripts();
+	$styles = wp_styles();
+	$blocks         = array();
+
+	foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
+		$imports = array();
+		if ( isset( $block_type->editor_script_handles ) ) {
+			foreach ( $block_type->editor_script_handles as $handle ) {
+				$spec = $scripts->registered[ $handle ];
+				$imports[] = array(
+					'type' => 'script',
+					'handle' => $spec->handle,
+					'src' => $spec->src,
+					'ver' => $spec->ver
+				);
+			}
+		}
+		if ( isset( $block_type->editor_style_handles ) ) {
+			foreach ( $block_type->editor_style_handles as $handle ) {
+				if ( ! isset( $styles->registered[ $handle ] ) ) {
+					continue;
+				}
+				$spec = $styles->registered[ $handle ];
+				$imports[] = array(
+					'type' => 'style',
+					'handle' => $spec->handle,
+					'src' => $spec->src,
+					'ver' => $spec->ver
+				);
+			}
+		}
+		if ( ! empty( $imports ) ) {
+			$blocks[ $block_name ] = $imports;
+		}
+	}
+
+	return $blocks;
+}
+
+function emit_importmap() {
+	wp_register_script( 'wp-importmap', '');
+	wp_add_inline_script( 'wp-importmap', 'wp.importmap = ' . wp_json_encode( get_block_importmap() ) . ';' );
+  wp_enqueue_script('wp-importmap');
+}
+
+add_action( 'enqueue_block_editor_assets', 'emit_importmap' );

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

@@ -116,20 +116,19 @@ function createBlockCompleter() {
 		allowContext( before, after ) {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
-		getOptionCompletion( inserterItem ) {
+		async getOptionCompletion( inserterItem ) {
 			const {
 				name,
 				initialAttributes,
 				innerBlocks,
 				syncStatus,
 				content,
 			} = inserterItem;
-
 			return {
 				action: 'replace',
 				value:
 					syncStatus === 'unsynced'
-						? parse( content, {
+						? await parse( content, {
 								__unstableSkipMigrationLogs: true,
 						  } )
 						: createBlock(

packages/block-editor/src/components/block-actions/index.js

@@ -103,15 +103,18 @@ export default function BlockActions( {
 			selectBlock( clientIds[ 0 ] );
 			setBlockMovingClientId( clientIds[ 0 ] );
 		},
-		onGroup() {
+		async onGroup() {
 			if ( ! blocks.length ) {
 				return;
 			}
 
 			const groupingBlockName = getGroupingBlockName();
 
 			// Activate the `transform` on `core/group` which does the conversion.
-			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			const newBlocks = await switchToBlockType(
+				blocks,
+				groupingBlockName
+			);
 
 			if ( ! newBlocks ) {
 				return;

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

@@ -357,7 +357,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				) {
 					removeBlock( _clientId );
 				} else {
-					registry.batch( () => {
+					registry.batch( async () => {
 						if (
 							canInsertBlockType(
 								getBlockName( firstClientId ),
@@ -371,7 +371,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getBlockIndex( _clientId )
 							);
 						} else {
-							const replacement = switchToBlockType(
+							const replacement = await switchToBlockType(
 								getBlock( firstClientId ),
 								getDefaultBlockName()
 							);

packages/block-editor/src/components/block-list/block.native.js

@@ -468,7 +468,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				) {
 					removeBlock( _clientId );
 				} else {
-					registry.batch( () => {
+					registry.batch( async () => {
 						if (
 							canInsertBlockType(
 								getBlockName( firstClientId ),
@@ -482,7 +482,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getBlockIndex( _clientId )
 							);
 						} else {
-							const replacement = switchToBlockType(
+							const replacement = await switchToBlockType(
 								getBlock( firstClientId ),
 								getDefaultBlockName()
 							);

packages/block-editor/src/components/block-styles/use-styles-for-block.js

@@ -24,20 +24,13 @@ import { store as blockEditorStore } from '../../store';
  */
 function useGenericPreviewBlock( block, type ) {
 	return useMemo( () => {
-		const example = type?.example;
-		const blockName = type?.name;
-
-		if ( example && blockName ) {
-			return getBlockFromExample( blockName, {
-				attributes: example.attributes,
-				innerBlocks: example.innerBlocks,
-			} );
+		if ( type && type.blockName && type.example ) {
+			return getBlockFromExample( type.blockName, type.example );
 		}
-
 		if ( block ) {
 			return cloneBlock( block );
 		}
-	}, [ type?.example ? block?.name : block, type ] );
+	}, [ type, type?.example ? block?.name : block ] );
 }
 
 /**

packages/block-editor/src/components/block-switcher/block-transformations-menu.js

@@ -7,7 +7,7 @@ import {
 	getBlockMenuDefaultClassName,
 	switchToBlockType,
 } from '@wordpress/blocks';
-import { useState, useMemo } from '@wordpress/element';
+import { useEffect, useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -63,6 +63,21 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 	return transformations;
 }
 
+function Preview( { blocks, transformName } ) {
+	const [ switched, setSwitched ] = useState( null );
+	useEffect( () => {
+		switchToBlockType( blocks, transformName ).then( ( result ) =>
+			setSwitched( result )
+		);
+	}, [ blocks, transformName ] );
+
+	if ( ! switched ) {
+		return null;
+	}
+
+	return <PreviewBlockPopover blocks={ blocks } />;
+}
+
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
@@ -91,11 +106,10 @@ const BlockTransformationsMenu = ( {
 		<>
 			<MenuGroup label={ __( 'Transform to' ) } className={ className }>
 				{ hoveredTransformItemName && (
-					<PreviewBlockPopover
-						blocks={ switchToBlockType(
-							blocks,
-							hoveredTransformItemName
-						) }
+					<Preview
+						key={ hoveredTransformItemName }
+						blocks={ blocks }
+						transformName={ hoveredTransformItemName }
 					/>
 				) }
 				{ !! possibleBlockVariationTransformations?.length && (

packages/block-editor/src/components/block-switcher/block-transformations-menu.native.js

@@ -55,10 +55,10 @@ const BlockTransformationsMenu = ( {
 	const getAnchor = () =>
 		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
 
-	function onPickerSelect( value ) {
+	async function onPickerSelect( value ) {
 		replaceBlocks(
 			selectedBlockClientId,
-			switchToBlockType( selectedBlock, value )
+			await switchToBlockType( selectedBlock, value )
 		);
 
 		const selectedItem = pickerOptions().find(