Parsing patterns when idling (performance follow-up for inserting patterns into containers)

lib/block-patterns.php

@@ -62,3 +62,23 @@
 						<!-- /wp:columns -->',
 	)
 );
+
+for ( $i = 0; $i < 1000; $i++ ) {
+	register_block_pattern(
+		'query/small-posts' . $i,
+		array(
+			'title'   => __( 'Small' . $i, 'gutenberg' ),
+			'scope'   => array(
+				'inserter' => true
+			),
+			'content' => '<!-- wp:columns {"verticalAlignment":"center"} -->
+							<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
+							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>
+							<!-- /wp:column -->
+							<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->
+							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>
+							<!-- /wp:column --></div>
+							<!-- /wp:columns -->',
+		)
+	);
+}

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

@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
 import {
 	VisuallyHidden,
 	__unstableComposite as Composite,
@@ -11,16 +9,22 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
+import { store as blockEditorStore } from '../../store';
 
 function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
 	const { content, viewportWidth } = pattern;
-	const blocks = useMemo( () => parse( content ), [ content ] );
+	const blocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetParsedBlocks( content ),
+		[ content ]
+	);
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 

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

@@ -1757,12 +1757,26 @@ export const __experimentalGetAllowedBlocks = createSelector(
 	]
 );
 
+export const __experimentalGetParsedBlocks = createSelector(
+	( state, content ) => {
+		if ( ! content ) {
+			return [];
+		}
+
+		return parse( content );
+	},
+	( state, content ) => [ content ]
+);
+
 const __experimentalGetParsedPatterns = createSelector(
 	( state ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
 		return map( patterns, ( pattern ) => ( {
 			...pattern,
-			contentBlocks: parse( pattern.content ),
+			contentBlocks: __experimentalGetParsedBlocks(
+				state,
+				pattern.content
+			),
 		} ) );
 	},
 	( state ) => [ state.settings.__experimentalBlockPatterns ]

packages/block-editor/src/utils/index.js

@@ -1,3 +1,4 @@
 export { default as transformStyles } from './transform-styles';
 export * from './theme';
 export * from './block-variation-transforms';
+export { usePreParsePatterns as __experimentalPreParsePatterns } from './pre-parse-patterns';

packages/block-editor/src/utils/pre-parse-patterns.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, select } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+
+export function usePreParsePatterns() {
+	const patterns = useSelect(
+		( _select ) =>
+			_select( blockEditorStore ).getSettings()
+				.__experimentalBlockPatterns,
+		[]
+	);
+
+	useEffect( () => {
+		if ( ! patterns?.length ) {
+			return;
+		}
+
+		let handle;
+		let index = -1;
+
+		const callback = () => {
+			index++;
+			if ( index >= patterns.length ) {
+				return;
+			}
+
+			const marker = `[usePreParsePatterns] process ${ index } ${ patterns[ index ]?.title }`;
+			window.console.time( marker );
+			select( blockEditorStore ).__experimentalGetParsedBlocks(
+				patterns[ index ].content,
+				index
+			);
+			window.console.timeEnd( marker );
+
+			handle = window.requestIdleCallback( callback );
+		};
+
+		window.console.time( '[usePreParsePatterns] initiate' );
+		window.console.timeEnd( '[usePreParsePatterns] initiate' );
+
+		handle = window.requestIdleCallback( callback );
+		return () => window.cancelIdleCallback( handle );
+	}, [ patterns ] );
+
+	return null;
+}

packages/edit-post/src/editor.js

@@ -19,6 +19,7 @@ import {
 	SlotFillProvider,
 	__unstableDropZoneContextProvider as DropZoneContextProvider,
 } from '@wordpress/components';
+import { __experimentalPreParsePatterns as usePreParsePatterns } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -82,10 +83,6 @@ function Editor( {
 		const isFSETheme = getEditorSettings().isFSETheme;
 		const isViewable = getPostType( postType )?.viewable ?? false;
 
-		// Prefetch and parse patterns. This ensures patterns are loaded and parsed when
-		// the editor is loaded rather than degrading the performance of the inserter.
-		select( 'core/block-editor' ).__experimentalGetAllowedPatterns();
-
 		return {
 			hasFixedToolbar:
 				isFeatureActive( 'fixedToolbar' ) ||
@@ -170,6 +167,8 @@ function Editor( {
 		return hasThemeStyles ? settings.styles : settings.defaultEditorStyles;
 	}, [ settings, hasThemeStyles ] );
 
+	usePreParsePatterns();
+
 	if ( ! post ) {
 		return null;
 	}

packages/edit-site/src/components/editor/index.js

@@ -10,7 +10,11 @@ import {
 	Button,
 } from '@wordpress/components';
 import { EntityProvider } from '@wordpress/core-data';
-import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+	BlockContextProvider,
+	BlockBreadcrumb,
+	__experimentalPreParsePatterns as usePreParsePatterns,
+} from '@wordpress/block-editor';
 import {
 	FullscreenMode,
 	InterfaceSkeleton,
@@ -67,10 +71,6 @@ function Editor( { initialSettings } ) {
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 
-		// Prefetch and parse patterns. This ensures patterns are loaded and parsed when
-		// the editor is loaded rather than degrading the performance of the inserter.
-		select( 'core/block-editor' ).__experimentalGetAllowedPatterns();
-
 		// The currently selected entity to display. Typically template or template part.
 		return {
 			isInserterOpen: isInserterOpened(),
@@ -151,6 +151,8 @@ function Editor( { initialSettings } ) {
 		}
 	}, [ isNavigationOpen ] );
 
+	usePreParsePatterns();
+
 	// Don't render the Editor until the settings are set and loaded
 	if ( ! settings?.siteUrl ) {
 		return null;