Try nested patterns previews with block editor setting

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

@@ -32,11 +32,10 @@ export function BlockPreview( {
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
-	const settings = useMemo( () => {
-		const _settings = { ...originalSettings };
-		_settings.__experimentalBlockPatterns = [];
-		return _settings;
-	}, [ originalSettings ] );
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
@@ -94,12 +93,12 @@ export function useBlockPreview( {
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
-	const disabledRef = useDisabled();
-	const ref = useMergeRefs( [ props.ref, disabledRef ] );
 	const settings = useMemo(
-		() => ( { ...originalSettings, __experimentalBlockPatterns: [] } ),
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
 		[ originalSettings ]
 	);
+	const disabledRef = useDisabled();
+	const ref = useMergeRefs( [ props.ref, disabledRef ] );
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 
 	const children = (

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

@@ -161,6 +161,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__unstableGalleryWithImageBlocks: false,
+	__unstableIsPreviewMode: false,
 
 	generateAnchors: false,
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.

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

@@ -28,14 +28,19 @@ const cancelIdleCallback = ( () => {
 } )();
 
 export function usePreParsePatterns() {
-	const patterns = useSelect(
-		( _select ) =>
-			_select( blockEditorStore ).getSettings()
-				.__experimentalBlockPatterns,
-		[]
-	);
+	const { patterns, isPreviewMode } = useSelect( ( _select ) => {
+		const { __experimentalBlockPatterns, __unstableIsPreviewMode } =
+			_select( blockEditorStore ).getSettings();
+		return {
+			patterns: __experimentalBlockPatterns,
+			isPreviewMode: __unstableIsPreviewMode,
+		};
+	}, [] );
 
 	useEffect( () => {
+		if ( isPreviewMode ) {
+			return;
+		}
 		if ( ! patterns?.length ) {
 			return;
 		}
@@ -58,7 +63,7 @@ export function usePreParsePatterns() {
 
 		handle = requestIdleCallback( callback );
 		return () => cancelIdleCallback( handle );
-	}, [ patterns ] );
+	}, [ patterns, isPreviewMode ] );
 
 	return null;
 }

packages/block-library/src/pattern/edit.js

@@ -26,10 +26,17 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
 		if ( selectedPattern?.blocks ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceBlocks( clientId, selectedPattern.blocks );
+			// We batch updates to block list settings to avoid triggering cascading renders
+			// for each container block included in a tree and optimize initial render.
+			// Since the above uses microtasks, we need to use a microtask here as well,
+			// because nested pattern blocks cannot be inserted if the parent block supports
+			// inner blocks but doesn't have blockSettings in the state.
+			window.queueMicrotask( () => {
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceBlocks( clientId, selectedPattern.blocks );
+			} );
 		}
-	}, [ selectedPattern?.blocks ] );
+	}, [ clientId, selectedPattern?.blocks ] );
 
 	const props = useBlockProps();