Pattern: Try inner blocks syncing for editable content attributes

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

@@ -9,8 +9,9 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
+import { Placeholder, Spinner } from '@wordpress/components';
 
-const PatternEdit = ( { attributes, clientId } ) => {
+function PatternFullEdit( { attributes, clientId } ) {
 	const { slug, syncStatus } = attributes;
 	const { selectedPattern, innerBlocks } = useSelect(
 		( select ) => {
@@ -69,15 +70,68 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		className: slug?.replace( '/', '-' ),
 	} );
 
+	return <div { ...blockProps } />;
+}
+
+function PatternPartialEdit( { attributes: { slug }, clientId } ) {
+	const { designPattern } = useSelect(
+		( select ) => {
+			return {
+				designPattern:
+					select( blockEditorStore ).__experimentalGetParsedPattern(
+						slug
+					),
+				/*innerBlocks:
+					select( blockEditorStore ).getBlock( clientId )
+						?.innerBlocks,*/
+			};
+		},
+		[ slug ]
+	);
+
+	const blockProps = useBlockProps( {
+		className: slug?.replace( '/', '-' ),
+	} );
+	if ( ! designPattern?.blocks?.length ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder>
+					<Spinner />
+				</Placeholder>
+			</div>
+		);
+	}
+
+	return (
+		<PatternInnerBlocks
+			clientId={ clientId }
+			blockProps={ blockProps }
+			template={ designPattern.blocks }
+		/>
+	);
+}
+
+function PatternInnerBlocks( { clientId, blockProps, template } ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: syncStatus === 'partial' ? 'contentOnly' : false,
+		templateLock: 'contentOnly',
 	} );
 
-	if ( syncStatus !== 'partial' ) {
-		return <div { ...blockProps } />;
-	}
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		const blocks = template.map( ( block ) => cloneBlock( block ) );
+		replaceInnerBlocks( clientId, blocks );
+	}, [ clientId, replaceInnerBlocks, template ] );
 
 	return <div { ...innerBlocksProps } />;
-};
+}
 
-export default PatternEdit;
+export default function PatternEdit( props ) {
+	const { syncStatus } = props.attributes;
+
+	return syncStatus === 'partial' ? (
+		<PatternPartialEdit { ...props } />
+	) : (
+		<PatternFullEdit { ...props } />
+	);
+}

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

@@ -5,12 +5,13 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import PatternEditV1 from './v1/edit';
 import PatternEditV2 from './edit';
+import save from './save';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = window?.__experimentalEnablePatternEnhancements
-	? { edit: PatternEditV2 }
+	? { edit: PatternEditV2, save }
 	: { edit: PatternEditV1 };
 
 export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save( { attributes: { syncStatus } } ) {
+	if ( syncStatus !== 'partial' ) {
+		return null;
+	}
+
+	return <InnerBlocks.Content />;
+}