Pattern: Try inner blocks syncing for editable content attributes

WordPress · May 24, 2023 · 01a0772 · 01a0772
1 parent b9df4b1
commit 01a0772
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 8 deletions.
diff --git a/lib/experimental/pattern.php b/lib/experimental/pattern.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Temporary compatibility shims for pattern APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+register_block_pattern(
+	'gutenberg/get-in-touch',
+	array(
+		'title'      => esc_html__( 'Get In Touch', 'default' ),
+		'categories' => array( 'call-to-action' ),
+		'content'    => implode(
+			'',
+			array(
+				'<!-- wp:paragraph {"fontSize":"huge"} -->',
+				'<p class="has-huge-font-size">' . esc_html__( 'Get In Touch', 'default' ) . '</p>',
+				'<!-- /wp:paragraph -->',
+				'<!-- wp:columns -->',
+				'<div class="wp-block-columns"><!-- wp:column -->',
+				'<div class="wp-block-column"><!-- wp:paragraph -->',
+				'<p>' . esc_html__( '20 Cooper Avenue', 'default' ) . '<br>' . esc_html__( 'New York, New York 10023', 'default' ) . '</p>',
+				'<!-- /wp:paragraph --></div>',
+				'<!-- /wp:column -->',
+				'<!-- wp:column -->',
+				'<div class="wp-block-column"><!-- wp:paragraph -->',
+				'<p>' . esc_html__( '(555) 555-5555', 'default' ) . '<br><a href="mailto:example@example.com">' . esc_html__( 'example@example.com', 'default' ) . '</a></p>',
+				'<!-- /wp:paragraph --></div>',
+				'<!-- /wp:column --></div>',
+				'<!-- /wp:columns -->',
+				'<!-- wp:buttons -->',
+				'<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"dark-gray"} -->',
+				'<div class="wp-block-button"><a class="wp-block-button__link has-dark-gray-background-color has-background">' . esc_html__( 'Contact Us', 'default' ) . '</a></div>',
+				'<!-- /wp:button --></div>',
+				'<!-- /wp:buttons -->',
+			)
+		),
+	)
+);
diff --git a/packages/block-library/src/pattern/edit.js b/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 } />
+	);
+}
diff --git a/packages/block-library/src/pattern/index.js b/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 } );
diff --git a/packages/block-library/src/pattern/save.js b/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 />;
+}