From 551fa593331f67ea2636f2bf35d27b72f664f953 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Sat, 1 Apr 2023 15:13:24 +0800
Subject: [PATCH] WIP

---
 docs/reference-guides/core-blocks.md               |  2 +-
 .../inserter/hooks/use-patterns-state.js           | 11 +++++++++--
 packages/block-library/src/pattern/block.json      |  3 +++
 packages/block-library/src/pattern/edit.js         | 14 +++++++++-----
 packages/block-library/src/pattern/index.js        |  2 ++
 packages/block-library/src/pattern/save.js         | 13 +++++++++++++
 6 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 packages/block-library/src/pattern/save.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 8cce54d8aa2faf..b25b378e9196ab 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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
 
diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
index ca287b95c43b9b..11ea5c6a43d7af 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
+++ b/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(
diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json
index da023142403c87..9c252241f6f2f2 100644
--- a/packages/block-library/src/pattern/block.json
+++ b/packages/block-library/src/pattern/block.json
@@ -13,6 +13,9 @@
 	"attributes": {
 		"slug": {
 			"type": "string"
+		},
+		"type": {
+			"type": "string"
 		}
 	}
 }
diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js
index be0b778eb4ae19..c0cf106ebd1051 100644
--- a/packages/block-library/src/pattern/edit.js
+++ b/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;
diff --git a/packages/block-library/src/pattern/index.js b/packages/block-library/src/pattern/index.js
index e4af712da8bb29..4a7f933d5052d5 100644
--- a/packages/block-library/src/pattern/index.js
+++ b/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 } );
diff --git a/packages/block-library/src/pattern/save.js b/packages/block-library/src/pattern/save.js
new file mode 100644
index 00000000000000..cd9170b8515f3e
--- /dev/null
+++ b/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;
+}