Lazy load block edit functions

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

@@ -121,6 +121,7 @@ function createBlockCompleter() {
 				name,
 				initialAttributes,
 				innerBlocks,
+				template,
 				syncStatus,
 				content,
 			} = inserterItem;
@@ -136,7 +137,7 @@ function createBlockCompleter() {
 								name,
 								initialAttributes,
 								createBlocksFromInnerBlocksTemplate(
-									innerBlocks
+									innerBlocks || template
 								)
 						  ),
 			};

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

@@ -11,13 +11,18 @@ import {
 	getBlockDefaultClassName,
 	hasBlockSupport,
 	getBlockType,
+	getBlockEdit,
 } from '@wordpress/blocks';
-import { useContext, useMemo } from '@wordpress/element';
+import { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data';
+import { useContext, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockContext from '../block-context';
+import RichText from '../rich-text';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Default value used for blocks which do not define their own context needs,
@@ -29,20 +34,93 @@ import BlockContext from '../block-context';
  */
 const DEFAULT_BLOCK_CONTEXT = {};
 
+function useSelectedChildBlock( clientId ) {
+	return useSelect(
+		( select ) => {
+			const {
+				getSelectionStart,
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				getBlockAttributes,
+				getBlockName,
+			} = select( blockEditorStore );
+
+			const isSelected =
+				isBlockSelected( clientId ) ||
+				hasSelectedInnerBlock( clientId, true );
+
+			if ( ! isSelected ) {
+				return {
+					selClientId: null,
+					selBlockName: null,
+					selContent: undefined,
+				};
+			}
+
+			const sClientId = getSelectionStart().clientId;
+			return {
+				selClientId: sClientId,
+				selBlockName: getBlockName( sClientId ),
+				selContent: getBlockAttributes( sClientId ).content,
+			};
+		},
+		[ clientId ]
+	);
+}
+function FallbackRichEdit( { clientId } ) {
+	const ref = useRef();
+	const { selClientId, selBlockName, selContent } =
+		useSelectedChildBlock( clientId );
+	const { updateBlockAttributes, replaceEdit } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	if ( ! selClientId ) {
+		return null;
+	}
+
+	const onChange = ( value ) =>
+		updateBlockAttributes( [ selClientId ], { content: value } );
+
+	const onReplace = ( blocks, indexToSelect, initialPos ) =>
+		replaceEdit( selClientId, blocks, indexToSelect, initialPos );
+
+	return (
+		<div className="block-placeholder">
+			<RichText
+				ref={ ref }
+				identifier="content"
+				clientId={ selClientId }
+				blockName={ selBlockName }
+				value={ selContent }
+				onChange={ onChange }
+				onReplace={ onReplace }
+				__unstableAllowPrefixTransformations={
+					selBlockName === 'core/paragraph'
+				}
+			/>
+		</div>
+	);
+}
+
+function FallbackEdit( { clientId } ) {
+	return (
+		<AsyncModeProvider value={ false }>
+			<FallbackRichEdit clientId={ clientId } />
+		</AsyncModeProvider>
+	);
+}
+
 const Edit = ( props ) => {
 	const { name } = props;
 	const blockType = getBlockType( name );
 
-	if ( ! blockType ) {
+	const Component = getBlockEdit( blockType );
+	if ( ! Component ) {
 		return null;
 	}
 
-	// `edit` and `save` are functions or components describing the markup
-	// with which a block is displayed. If `blockType` is valid, assign
-	// them preferentially as the render value for the block.
-	const Component = blockType.edit || blockType.save;
-
-	return <Component { ...props } />;
+	return <Component FallbackEdit={ FallbackEdit } { ...props } />;
 };
 
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { withFilters } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, getBlockEdit } from '@wordpress/blocks';
 import { useContext, useMemo } from '@wordpress/element';
 
 /**
@@ -37,12 +37,11 @@ export const Edit = ( props ) => {
 			: DEFAULT_BLOCK_CONTEXT;
 	}, [ blockType, blockContext ] );
 
-	if ( ! blockType ) {
+	const Component = getBlockEdit( blockType );
+	if ( ! Component ) {
 		return null;
 	}
 
-	const Component = blockType.edit;
-
 	return <Component { ...props } context={ context } />;
 };