Pattern block: Update block to retain wrapper

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:** forcedAlignment, layout, slug, templateLock
 
 ## 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-editor/src/components/inserter/hooks/use-patterns-state.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
+import { createBlock, cloneBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -35,10 +35,25 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	);
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback( ( pattern, blocks ) => {
-		onInsert(
-			( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
-			pattern.name
-		);
+		if ( window?.__experimentalEnablePatternEnhancements ) {
+			onInsert(
+				blocks
+					? [
+							createBlock(
+								'core/pattern',
+								{ slug: pattern.name },
+								blocks.map( ( block ) => cloneBlock( block ) )
+							),
+					  ]
+					: [],
+				pattern.name
+			);
+		} else {
+			onInsert(
+				( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				pattern.name
+			);
+		}
 		createSuccessNotice(
 			sprintf(
 				/* translators: %s: block pattern title. */

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"
+			}
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "contentOnly", false ],
+			"default": "contentOnly"
 		}
 	}
 }

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

@@ -1,46 +1,118 @@
 /**
  * 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 { inheritedAlignment, slug, templateLock } = 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,
+	] );
+
+	useEffect( () => {
+		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,
+	] );
 
-	return <div { ...props } />;
+	const blockProps = useBlockProps( {
+		className: inheritedAlignment && `align${ inheritedAlignment }`,
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		templateLock: templateLock === 'contentOnly' ? 'contentOnly' : false,
+	} );
+
+	const handleSync = () => {
+		if ( templateLock === false ) {
+			setAttributes( { templateLock: 'contentOnly' } );
+		} else {
+			setAttributes( { templateLock: false } );
+		}
+	};
+
+	return (
+		<>
+			<div { ...innerBlocksProps } />
+			<BlockControls group="other">
+				<ToolbarButton onClick={ handleSync }>
+					{ templateLock === false
+						? __( 'Edit content only' )
+						: __( 'Edit all' ) }
+				</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,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save( {
+	attributes: { inheritedAlignment },
+	innerBlocks,
+} ) {
+	if ( innerBlocks?.length === 0 ) {
+		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": []
 	}