From 5e9010cd47b2feaf137814a47dc02fc0bc214387 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 7 Oct 2022 12:52:17 +0300
Subject: [PATCH] Try nested patterns previews

---
 .../src/components/block-preview/index.js     | 41 ++++++++++++-------
 packages/block-editor/src/store/selectors.js  |  5 +++
 packages/block-library/src/pattern/edit.js    | 13 ++++--
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 22f17ae860242..14776fa89c384 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -28,15 +28,21 @@ export function BlockPreview( {
 	__experimentalOnClick,
 	__experimentalMinHeight,
 } ) {
-	const originalSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
+	const { originalSettings, patterns } = useSelect( ( select ) => {
+		const { getSettings, __experimentalGetAllowedPatterns } =
+			select( blockEditorStore );
+		return {
+			originalSettings: getSettings(),
+			patterns: __experimentalGetAllowedPatterns(),
+		};
+	}, [] );
+	const settings = useMemo(
+		() => ( {
+			...originalSettings,
+			__experimentalBlockPatterns: patterns,
+		} ),
+		[ originalSettings, patterns ]
 	);
-	const settings = useMemo( () => {
-		const _settings = { ...originalSettings };
-		_settings.__experimentalBlockPatterns = [];
-		return _settings;
-	}, [ originalSettings ] );
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
@@ -90,15 +96,22 @@ export function useBlockPreview( {
 	props = {},
 	__experimentalLayout,
 } ) {
-	const originalSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
 	const disabledRef = useDisabled();
 	const ref = useMergeRefs( [ props.ref, disabledRef ] );
+	const { originalSettings, patterns } = useSelect( ( select ) => {
+		const { getSettings, __experimentalGetAllowedPatterns } =
+			select( blockEditorStore );
+		return {
+			originalSettings: getSettings(),
+			patterns: __experimentalGetAllowedPatterns(),
+		};
+	}, [] );
 	const settings = useMemo(
-		() => ( { ...originalSettings, __experimentalBlockPatterns: [] } ),
-		[ originalSettings ]
+		() => ( {
+			...originalSettings,
+			__experimentalBlockPatterns: patterns,
+		} ),
+		[ originalSettings, patterns ]
 	);
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 837cee4427708..fc55012aba096 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2249,6 +2249,11 @@ export const __experimentalGetParsedPattern = createSelector(
 		if ( ! pattern ) {
 			return null;
 		}
+		// In previews we pass the already passed patterns
+		// to avoid parsing again.
+		if ( pattern.blocks ) {
+			return { ...pattern };
+		}
 		return {
 			...pattern,
 			blocks: parse( pattern.content, {
diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js
index a9ebee6266b6b..be0b778eb4ae1 100644
--- a/packages/block-library/src/pattern/edit.js
+++ b/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();