Pattern block: Add experimental flag and syncStatus attrib to allow testing of partial syncing

docs/reference-guides/core-blocks.md

@@ -464,8 +464,8 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
 
 -	**Name:** core/pattern
 -	**Category:** theme
--	**Supports:** ~~html~~, ~~inserter~~
--	**Attributes:** slug
+-	**Supports:** 
+-	**Attributes:** inheritedAlignment, layout, slug, syncStatus
 
 ## Post Author
 

lib/experimental/editor-settings.php

@@ -101,6 +101,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-theme-previews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableThemePreviews = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-pattern-enhancements', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnablePatternEnhancements = true', 'before' );
+	}
 
 }
 

lib/experiments-page.php

@@ -125,6 +125,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-pattern-enhancements',
+		__( 'Pattern enhancements', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test the Pattern block enhancements', 'gutenberg' ),
+			'id'    => 'gutenberg-pattern-enhancements',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-library/src/pattern/block.json

@@ -6,13 +6,27 @@
 	"category": "theme",
 	"description": "Show a block pattern.",
 	"supports": {
-		"html": false,
-		"inserter": false
+		"__experimentalLayout": {
+			"allowEditing": false
+		}
 	},
 	"textdomain": "default",
 	"attributes": {
 		"slug": {
 			"type": "string"
+		},
+		"inheritedAlignment": {
+			"type": "string"
+		},
+		"layout": {
+			"type": "object",
+			"default": {
+				"type": "constrained"
+			}
+		},
+		"syncStatus": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "full", "partial" ]
 		}
 	}
 }

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

@@ -1,46 +1,121 @@
 /**
  * WordPress dependencies
  */
+import { cloneBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 
-const PatternEdit = ( { attributes, clientId } ) => {
-	const selectedPattern = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__experimentalGetParsedPattern(
-				attributes.slug
-			),
-		[ attributes.slug ]
+const PatternEdit = ( { attributes, clientId, setAttributes } ) => {
+	const { inheritedAlignment, slug, syncStatus } = attributes;
+	const { selectedPattern, innerBlocks } = useSelect(
+		( select ) => {
+			return {
+				selectedPattern:
+					select( blockEditorStore ).__experimentalGetParsedPattern(
+						slug
+					),
+				innerBlocks:
+					select( blockEditorStore ).getBlock( clientId )
+						?.innerBlocks,
+			};
+		},
+		[ slug, clientId ]
 	);
-
-	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const {
+		replaceBlocks,
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 
 	// Run this effect when the component loads.
 	// This adds the Pattern's contents to the post.
-	// This change won't be saved.
-	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
-		if ( selectedPattern?.blocks ) {
+		if ( selectedPattern?.blocks && ! innerBlocks?.length ) {
 			// 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();
+				if ( syncStatus === 'partial' ) {
+					replaceInnerBlocks(
+						clientId,
+						selectedPattern.blocks.map( ( block ) =>
+							cloneBlock( block )
+						)
+					);
+					return;
+				}
 				replaceBlocks( clientId, selectedPattern.blocks );
 			} );
 		}
-	}, [ clientId, selectedPattern?.blocks ] );
+	}, [
+		clientId,
+		selectedPattern?.blocks,
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		innerBlocks,
+		syncStatus,
+		replaceBlocks,
+	] );
+
+	useEffect( () => {
+		if ( syncStatus !== 'partial' ) {
+			return;
+		}
+		const alignments = [ 'wide', 'full' ];
+		const blocks = innerBlocks;
+		if ( ! blocks || blocks.length === 0 ) {
+			return;
+		}
+		// Determine the widest setting of all the contained blocks.
+		const widestAlignment = blocks.reduce( ( accumulator, block ) => {
+			const { align } = block.attributes;
+			return alignments.indexOf( align ) >
+				alignments.indexOf( accumulator )
+				? align
+				: accumulator;
+		}, undefined );
 
-	const props = useBlockProps();
+		// Set the attribute of the Pattern block to match the widest
+		// alignment.
+		setAttributes( {
+			inheritedAlignment: widestAlignment ?? '',
+		} );
+	}, [
+		innerBlocks,
+		selectedPattern?.blocks,
+		setAttributes,
+		inheritedAlignment,
+		syncStatus,
+	] );
 
-	return <div { ...props } />;
+	const blockProps = useBlockProps( {
+		className:
+			syncStatus === 'partial' &&
+			inheritedAlignment &&
+			`align${ inheritedAlignment }`,
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		templateLock: syncStatus === 'partial' ? 'contentOnly' : false,
+	} );
+
+	if ( syncStatus !== 'partial' ) {
+		return <div { ...blockProps } />;
+	}
+
+	return (
+		<>
+			<div { ...innerBlocksProps } />
+		</>
+	);
 };
 
 export default PatternEdit;

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

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

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

@@ -22,23 +22,31 @@ function register_block_core_pattern() {
 /**
  * Renders the `core/pattern` block on the server.
  *
- * @param array $attributes Block attributes.
+ * @param array  $attributes Block attributes.
+ * @param string $content    The block rendered content.
  *
  * @return string Returns the output of the pattern.
  */
-function render_block_core_pattern( $attributes ) {
+function render_block_core_pattern( $attributes, $content ) {
 	if ( empty( $attributes['slug'] ) ) {
 		return '';
 	}
 
+	$align_class = isset($attributes['inheritedAlignment']) ? 'class="align' . $attributes['inheritedAlignment'] . '"' : '';
+	$wrapper = '<div '. $align_class . ' data-pattern-slug="' . $attributes['slug'] . '">%s</div>';
+
+	if ( isset( $attributes['syncStatus'] ) && 'unsynced' === $attributes['syncStatus'] ) {
+		return sprintf( $wrapper, $content );
+	}
+
 	$slug     = $attributes['slug'];
 	$registry = WP_Block_Patterns_Registry::get_instance();
 	if ( ! $registry->is_registered( $slug ) ) {
 		return '';
 	}
 
 	$pattern = $registry->get_registered( $slug );
-	return do_blocks( $pattern['content'] );
+	return sprintf( $wrapper, do_blocks( $pattern['content'] ) );
 }
 
 add_action( 'init', 'register_block_core_pattern' );

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save( {
+	attributes: { inheritedAlignment, syncStatus },
+	innerBlocks,
+} ) {
+	if ( innerBlocks?.length === 0 || syncStatus !== 'partial' ) {
+		return;
+	}
+	const blockProps = useBlockProps.save( {
+		className: inheritedAlignment && `align${ inheritedAlignment }`,
+	} );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	return <div { ...innerBlocksProps }>{ innerBlocksProps.children }</div>;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+const PatternEdit = ( { attributes, clientId } ) => {
+	const selectedPattern = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetParsedPattern(
+				attributes.slug
+			),
+		[ attributes.slug ]
+	);
+
+	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// Run this effect when the component loads.
+	// This adds the Pattern's contents to the post.
+	// This change won't be saved.
+	// It will continue to pull from the pattern file unless changes are made to its respective template part.
+	useEffect( () => {
+		if ( 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 );
+			} );
+		}
+	}, [
+		clientId,
+		selectedPattern?.blocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlocks,
+	] );
+
+	const props = useBlockProps();
+
+	return <div { ...props } />;
+};
+
+export default PatternEdit;

test/integration/fixtures/blocks/core__pattern.json

@@ -3,7 +3,12 @@
 		"name": "core/pattern",
 		"isValid": true,
 		"attributes": {
-			"slug": "core/text-two-columns"
+			"forcedAlignment": "full",
+			"layout": {
+				"type": "constrained"
+			},
+			"slug": "core/text-two-columns",
+			"syncStatus": "synced"
 		},
 		"innerBlocks": []
 	}