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

…e bootstrapped
WordPress · Aug 17, 2023 · 4a22a8f · 4a22a8f
1 parent b6057a4
commit 4a22a8f
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 61 deletions.
diff --git a/packages/block-editor/src/autocompleters/block.js b/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
 								)
 						  ),

diff --git a/packages/block-editor/src/components/block-styles/use-styles-for-block.js b/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;
 }
 
 /**

diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/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(

diff --git a/packages/block-editor/src/store/actions.js b/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 );

diff --git a/packages/block-library/src/page-list/edit.js b/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,

diff --git a/packages/blocks/src/api/factory.js b/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 );
-};
+}
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
@@ -122,9 +122,7 @@ export {
 	setGroupingBlockName,
 	getGroupingBlockName,
 	getBlockType,
-	loadBlockType,
 	getBlockTypes,
-	loadBlockTypes,
 	getBlockSupport,
 	hasBlockSupport,
 	getBlockVariations,

diff --git a/packages/blocks/src/api/registration.js b/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 );
 }

diff --git a/packages/blocks/src/api/utils.js b/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.` );

diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/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' )
 		);

diff --git a/packages/edit-site/src/components/style-book/index.js b/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 (

diff --git a/test/performance/utils.js b/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' )
 		);