[WIP] Initial attempt to leave a pattern block wrapped around a pattern

docs/reference-guides/core-blocks.md

@@ -482,8 +482,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:** forcedAlignment, layout, slug, syncStatus
 
 ## Post Author
 

lib/experimental/editor-settings.php

@@ -98,6 +98,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

@@ -113,6 +113,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,29 @@
 	"category": "theme",
 	"description": "Show a block pattern.",
 	"supports": {
-		"html": false,
-		"inserter": false
+		"__experimentalLayout": {
+			"allowEditing": false
+		}
 	},
 	"textdomain": "default",
 	"attributes": {
 		"slug": {
 			"type": "string"
+		},
+		"forcedAlignment": {
+			"type": "string",
+			"default": "full"
+		},
+		"layout": {
+			"type": "object",
+			"default": {
+				"type": "constrained"
+			}
+		},
+		"syncStatus": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "synced", "unsynced" ],
+			"default": "synced"
 		}
 	}
 }

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

@@ -1,46 +1,95 @@
 /**
  * WordPress dependencies
  */
+import { cloneBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	useBlockProps,
+	useInnerBlocksProps,
+	BlockControls,
 } from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
-const PatternEdit = ( { attributes, clientId } ) => {
-	const selectedPattern = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__experimentalGetParsedPattern(
-				attributes.slug
-			),
-		[ attributes.slug ]
+const PatternEdit = ( { attributes, clientId, setAttributes } ) => {
+	const { forcedAlignment, 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 } =
+	const { 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();
-				replaceBlocks( clientId, selectedPattern.blocks );
+				replaceInnerBlocks(
+					clientId,
+					selectedPattern.blocks.map( ( block ) =>
+						cloneBlock( block )
+					)
+				);
 			} );
 		}
-	}, [ clientId, selectedPattern?.blocks ] );
+	}, [
+		clientId,
+		selectedPattern?.blocks,
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		innerBlocks,
+	] );
+
+	const blockProps = useBlockProps( {
+		className: forcedAlignment && `align${ forcedAlignment }`,
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {} );
 
-	const props = useBlockProps();
+	const handleSync = () => {
+		if ( syncStatus === 'synced' ) {
+			setAttributes( { syncStatus: 'unsynced' } );
+		} else {
+			setAttributes( { syncStatus: 'synced' } );
+			replaceInnerBlocks(
+				clientId,
+				selectedPattern.blocks.map( ( block ) => cloneBlock( block ) )
+			);
+		}
+	};
 
-	return <div { ...props } />;
+	return (
+		<>
+			<div { ...innerBlocksProps } data-pattern-slug={ slug } />
+			<BlockControls group="other">
+				<ToolbarButton onClick={ handleSync }>
+					{ syncStatus === 'unsynced'
+						? __( 'Sync' )
+						: __( 'Desync' ) }
+				</ToolbarButton>
+			</BlockControls>
+		</>
+	);
 };
 
 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,30 @@ 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 '';
 	}
 
+	$wrapper = '<div class="align' . $attributes['forcedAlignment'] . '" 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,14 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	if ( attributes.syncStatus === 'synced' ) {
+		return null;
+	}
+
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	return <>{ innerBlocksProps.children }</>;
+}

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": []
 	}