diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index 22f17ae860242..02d68203d7eb3 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/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 = ( diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 6958a6184617a..89731c09376b0 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/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. diff --git a/packages/block-editor/src/utils/pre-parse-patterns.js b/packages/block-editor/src/utils/pre-parse-patterns.js index c5e1d5ad41ac5..c18215ee8e63f 100644 --- a/packages/block-editor/src/utils/pre-parse-patterns.js +++ b/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; } 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();