createBlock doesn't need to be sync after all, if block attributes ar…

…e bootstrapped

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

@@ -131,10 +131,10 @@ function createBlockCompleter() {
 						? await parse( content, {
 								__unstableSkipMigrationLogs: true,
 						  } )
-						: await createBlock(
+						: createBlock(
 								name,
 								initialAttributes,
-								await createBlocksFromInnerBlocksTemplate(
+								createBlocksFromInnerBlocksTemplate(
 									innerBlocks
 								)
 						  ),

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

@@ -8,7 +8,7 @@ import {
 	getBlockFromExample,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import { useEffect, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,19 +23,14 @@ import { store as blockEditorStore } from '../../store';
  * @return {WPBlock}          A generic block ready for styles preview.
  */
 function useGenericPreviewBlock( block, type ) {
-	const [ example, setExample ] = useState( null );
-	useEffect( () => {
+	return useMemo( () => {
 		if ( type && type.blockName && type.example ) {
-			getBlockFromExample( type.blockName, type.example ).then(
-				setExample
-			);
+			return getBlockFromExample( type.blockName, type.example );
 		}
 		if ( block ) {
-			setExample( cloneBlock( block ) );
+			return cloneBlock( block );
 		}
 	}, [ type, type?.example ? block?.name : block ] );
-
-	return example;
 }
 
 /**

packages/block-editor/src/components/inserter/hooks/use-block-types-state.js

@@ -46,7 +46,7 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 					? await parse( item.content, {
 							__unstableSkipMigrationLogs: true,
 					  } )
-					: await createBlock(
+					: createBlock(
 							item.name,
 							item.initialAttributes,
 							createBlocksFromInnerBlocksTemplate(

packages/block-editor/src/components/inserter/preview-panel.js

@@ -6,7 +6,7 @@ import {
 	createBlock,
 	getBlockFromExample,
 } from '@wordpress/blocks';
-import { useEffect, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -18,20 +18,19 @@ import BlockPreview from '../block-preview';
 function InserterPreviewPanel( { item } ) {
 	const { name, title, icon, description, initialAttributes, example } = item;
 	const isReusable = isReusableBlock( item );
-	const [ blocks, setBlocks ] = useState( null );
-	useEffect( () => {
+	const blocks = useMemo( () => {
 		if ( example ) {
-			getBlockFromExample( name, {
+			return getBlockFromExample( name, {
 				attributes: {
 					...example.attributes,
 					...initialAttributes,
 				},
 				innerBlocks: example.innerBlocks,
-			} ).then( setBlocks );
-		} else {
-			setBlocks( createBlock( name, initialAttributes ) );
+			} );
 		}
-	}, [ example, name, initialAttributes ] );
+		return createBlock( name, initialAttributes );
+	}, [ name, example, initialAttributes ] );
+
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">

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

@@ -10,7 +10,6 @@ import {
 	getBlockType,
 	getDefaultBlockName,
 	hasBlockSupport,
-	loadBlockType,
 	switchToBlockType,
 	synchronizeBlocksWithTemplate,
 	getBlockSupport,
@@ -1359,14 +1358,13 @@ export function selectionChange(
  */
 export const insertDefaultBlock =
 	( attributes, rootClientId, index ) =>
-	async ( { dispatch } ) => {
+	( { dispatch } ) => {
 		// Abort if there is no default block type (if it has been unregistered).
 		const defaultBlockName = getDefaultBlockName();
 		if ( ! defaultBlockName ) {
 			return;
 		}
 
-		await loadBlockType( defaultBlockName );
 		const block = createBlock( defaultBlockName, attributes );
 
 		return dispatch.insertBlock( block, index, rootClientId );

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -10,16 +10,6 @@ import { name as listItemName } from './block.json';
 import { name as listName } from '../list/block.json';
 import { name as paragraphName } from '../paragraph/block.json';
 
-export function createListItem( listItemAttributes, listAttributes, children ) {
-	return createBlock(
-		listItemName,
-		listItemAttributes,
-		! children?.length
-			? []
-			: [ createBlock( listName, listAttributes, children ) ]
-	);
-}
-
 async function convertBlockToList( block ) {
 	const list = await switchToBlockType( block, listName );
 	if ( list ) {

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createBlock, loadBlockType } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import {
 	InspectorControls,
 	BlockControls,
@@ -113,32 +113,29 @@ function BlockContent( {
 	}
 }
 
-async function getBlockList( parentId, pagesByParentId ) {
+function getBlockList( parentId, pagesByParentId ) {
 	const childPages = pagesByParentId.get( parentId );
 
 	if ( ! childPages?.length ) {
 		return [];
 	}
 
-	return Promise.all(
-		childPages.map( async ( page ) => {
-			const hasChildren = pagesByParentId.has( page.id );
-			const pageProps = {
-				id: page.id,
-				label:
-					// translators: displayed when a page has an empty title.
-					page.title?.rendered?.trim() !== ''
-						? page.title?.rendered
-						: __( '(no title)' ),
-				title: page.title?.rendered,
-				link: page.url,
-				hasChildren,
-			};
-			const children = await getBlockList( page.id, pagesByParentId );
-			await loadBlockType( 'core/page-list-item' );
-			return createBlock( 'core/page-list-item', pageProps, children );
-		} )
-	);
+	return childPages.map( ( page ) => {
+		const hasChildren = pagesByParentId.has( page.id );
+		const pageProps = {
+			id: page.id,
+			label:
+				// translators: displayed when a page has an empty title.
+				page.title?.rendered?.trim() !== ''
+					? page.title?.rendered
+					: __( '(no title)' ),
+			title: page.title?.rendered,
+			link: page.url,
+			hasChildren,
+		};
+		const children = getBlockList( page.id, pagesByParentId );
+		return createBlock( 'core/page-list-item', pageProps, children );
+	} );
 }
 
 export default function PageListEdit( {
@@ -236,10 +233,10 @@ export default function PageListEdit( {
 		[ pagesByParentId ]
 	);
 
-	const [ blockList, setBlockList ] = useState( null );
-	useEffect( () => {
-		getBlockList( parentPageID, pagesByParentId ).then( setBlockList );
-	}, [ pagesByParentId, parentPageID ] );
+	const blockList = useMemo(
+		() => getBlockList( parentPageID, pagesByParentId ),
+		[ parentPageID, pagesByParentId ]
+	);
 
 	const {
 		isNested,

packages/blocks/src/api/factory.js

@@ -589,16 +589,13 @@ export async function switchToBlockType( blocks, name ) {
  *
  * @return {Object} block.
  */
-export const getBlockFromExample = async ( name, example ) => {
+export function getBlockFromExample( name, example ) {
 	let innerBlocks = [];
 	if ( example.innerBlocks ) {
-		innerBlocks = await Promise.all(
-			example.innerBlocks.map( ( innerBlock ) =>
-				getBlockFromExample( innerBlock.name, innerBlock )
-			)
+		innerBlocks = example.innerBlocks.map( ( innerBlock ) =>
+			getBlockFromExample( innerBlock.name, innerBlock )
 		);
 	}
 
-	await loadBlockType( name );
 	return createBlock( name, example.attributes, innerBlocks );
-};
+}

packages/blocks/src/api/index.js

@@ -122,9 +122,7 @@ export {
 	setGroupingBlockName,
 	getGroupingBlockName,
 	getBlockType,
-	loadBlockType,
 	getBlockTypes,
-	loadBlockTypes,
 	getBlockSupport,
 	hasBlockSupport,
 	getBlockVariations,

packages/blocks/src/api/registration.js

@@ -520,6 +520,10 @@ export function getBlockType( name ) {
 	return select( blocksStore ).getBlockType( name );
 }
 
+export function getBootstrappedBlockType( name ) {
+	return select( blocksStore ).getBootstrappedBlockType( name );
+}
+
 export function loadBlockType( name ) {
 	return resolveSelect( blocksStore ).getBlockType( name );
 }

packages/blocks/src/api/utils.js

@@ -16,7 +16,11 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
  * Internal dependencies
  */
 import { BLOCK_ICON_DEFAULT } from './constants';
-import { getBlockType, getDefaultBlockName } from './registration';
+import {
+	getBlockType,
+	getBootstrappedBlockType,
+	getDefaultBlockName,
+} from './registration';
 import { createBlock } from './factory';
 
 extend( [ namesPlugin, a11yPlugin ] );
@@ -45,9 +49,9 @@ export function isUnmodifiedBlock( block ) {
 	}
 
 	const newBlock = isUnmodifiedBlock[ block.name ];
-	const blockType = getBlockType( block.name );
+	const blockType = getBootstrappedBlockType( block.name );
 
-	return Object.keys( blockType?.attributes ?? {} ).every(
+	return Object.keys( blockType.attributes ?? {} ).every(
 		( key ) => newBlock.attributes[ key ] === block.attributes[ key ]
 	);
 }
@@ -253,7 +257,7 @@ export function getAccessibleBlockLabel(
  */
 export function __experimentalSanitizeBlockAttributes( name, attributes ) {
 	// Get the type definition associated with a registered block.
-	const blockType = getBlockType( name );
+	const blockType = getBootstrappedBlockType( name );
 
 	if ( undefined === blockType ) {
 		throw new Error( `Block type '${ name }' is not registered.` );

packages/e2e-tests/specs/performance/post-editor.test.js

@@ -54,10 +54,9 @@ async function loadHtmlIntoTheBlockEditor( html ) {
 }
 
 async function load1000Paragraphs() {
-	await page.evaluate( async () => {
-		const { loadBlockType, createBlock } = window.wp.blocks;
+	await page.evaluate( () => {
+		const { createBlock } = window.wp.blocks;
 		const { dispatch } = window.wp.data;
-		await loadBlockType?.( 'core/paragraph' );
 		const blocks = Array.from( { length: 1000 } ).map( () =>
 			createBlock( 'core/paragraph' )
 		);

packages/edit-site/src/components/global-styles/block-preview-panel.js

@@ -4,26 +4,29 @@
 import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const blockExample = getBlockType( name )?.example;
-	const blockExampleWithVariation = {
-		...blockExample,
-		attributes: {
-			...blockExample?.attributes,
-			className: 'is-style-' + variation,
-		},
-	};
-	const [ blocks, setBlocks ] = useState( null );
-	const example = variation ? blockExampleWithVariation : blockExample;
-	useEffect( () => {
-		getBlockFromExample( name, example ).then( setBlocks );
-	}, [ name, example ] );
+	const blocks = useMemo( () => {
+		const blockExampleWithVariation = {
+			...blockExample,
+			attributes: {
+				...blockExample?.attributes,
+				className: 'is-style-' + variation,
+			},
+		};
+		const example = variation ? blockExampleWithVariation : blockExample;
+		return getBlockFromExample( name, example );
+	}, [ name, blockExample, variation ] );
 	const viewportWidth = blockExample?.viewportWidth || null;
 	const previewHeight = '150px';
 
-	return ! blockExample ? null : (
+	if ( ! blockExample ) {
+		return null;
+	}
+
+	return (
 		<Spacer marginX={ 4 } marginBottom={ 4 }>
 			<div
 				className="edit-site-global-styles__block-preview-panel"

packages/edit-site/src/components/style-book/index.js

@@ -17,7 +17,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	getCategories,
-	getBlockTypes,
+	getBootstrappedBlockTypes,
 	getBlockFromExample,
 	createBlock,
 } from '@wordpress/blocks';
@@ -144,7 +144,7 @@ function getExamples() {
 		],
 	};
 
-	const otherExamples = getBlockTypes()
+	const otherExamples = getBootstrappedBlockTypes()
 		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
 			return (

test/performance/utils.js

@@ -172,10 +172,9 @@ export async function loadBlocksFromHtml( page, filepath ) {
 }
 
 export async function load1000Paragraphs( page ) {
-	await page.evaluate( async () => {
-		const { loadBlockType, createBlock } = window.wp.blocks;
+	await page.evaluate( () => {
+		const { createBlock } = window.wp.blocks;
 		const { dispatch } = window.wp.data;
-		await loadBlockType?.( 'core/paragraph' );
 		const blocks = Array.from( { length: 1000 } ).map( () =>
 			createBlock( 'core/paragraph' )
 		);