[POC] Pattern blocks as sections

docs/reference-guides/core-blocks.md

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

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 } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -36,7 +36,14 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback( ( pattern, blocks ) => {
 		onInsert(
-			( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+			[
+				createBlock(
+					'core/pattern',
+					{ slug: pattern.name, type: 'section' },
+					blocks
+				),
+			],
+			// ( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
 			pattern.name
 		);
 		createSuccessNotice(

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

@@ -13,6 +13,9 @@
 	"attributes": {
 		"slug": {
 			"type": "string"
+		},
+		"type": {
+			"type": "string"
 		}
 	}
 }

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

@@ -6,6 +6,7 @@ import { useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 
 const PatternEdit = ( { attributes, clientId } ) => {
@@ -17,6 +18,11 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		[ attributes.slug ]
 	);
 
+	const props = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( props );
+
+	const isSection = attributes.type === 'section';
+
 	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -25,7 +31,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	// 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 ( ! isSection && 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,
@@ -36,11 +42,9 @@ const PatternEdit = ( { attributes, clientId } ) => {
 				replaceBlocks( clientId, selectedPattern.blocks );
 			} );
 		}
-	}, [ clientId, selectedPattern?.blocks ] );
-
-	const props = useBlockProps();
+	}, [ clientId, selectedPattern?.blocks, isSection ] );
 
-	return <div { ...props } />;
+	return <div { ...( isSection ? innerBlocksProps : props ) } />;
 };
 
 export default PatternEdit;

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

@@ -4,12 +4,14 @@
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import PatternEdit from './edit';
+import PatternSave from './save';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	edit: PatternEdit,
+	save: PatternSave,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	if ( attributes.type === 'section' ) {
+		return <div { ...innerBlocksProps } />;
+	}
+	return null;
+}