Pattern block: Try adding Pattern Part block

lib/blocks.php

@@ -32,6 +32,7 @@ function gutenberg_reregister_core_block_types() {
 				'more',
 				'nextpage',
 				'paragraph',
+				'pattern-part',
 				'preformatted',
 				'pullquote',
 				'quote',

packages/block-library/src/index.js

@@ -67,6 +67,7 @@ import * as navigationLink from './navigation-link';
 import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
+import * as patternPart from './pattern-part';
 import * as pageList from './page-list';
 import * as pageListItem from './page-list-item';
 import * as paragraph from './paragraph';
@@ -160,6 +161,7 @@ const getAllBlocks = () => {
 		pageList,
 		pageListItem,
 		pattern,
+		patternPart,
 		preformatted,
 		pullquote,
 		reusableBlock,

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

@@ -0,0 +1,19 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/pattern-part",
+	"title": "Pattern part",
+	"category": "text",
+	"description": "A wrapper for a pattern's inner blocks",
+	"keywords": [ "bob" ],
+	"textdomain": "default",
+	"attributes": {
+		"slug": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"inserter": false
+	}
+}

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

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+export default function Edit() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
+	console.log( 'innerBlocksProps', innerBlocksProps.children );
+	return <div { ...innerBlocksProps }></div>;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+const settings = {
+	edit,
+	save,
+};
+
+export { settings };
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/pattern-part/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

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

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

packages/block-library/src/pattern-part/style.scss

@@ -0,0 +1,3 @@
+.wp-block-pattern-part {
+	display: contents;
+}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { cloneBlock } from '@wordpress/blocks';
+import { cloneBlock, createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import {
@@ -35,6 +35,24 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	// Run this effect when the component loads.
 	// This adds the Pattern's contents to the post.
 	useEffect( () => {
+		function clonePatternBlock( block ) {
+			let newInnerBlocks = [];
+			if ( block.innerBlocks.length > 0 ) {
+				newInnerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+					let nestedInnerBlocks = [];
+					if ( innerBlock.innerBlocks.length > 0 ) {
+						nestedInnerBlocks =
+							innerBlock.innerBlocks.map( clonePatternBlock );
+					}
+					return createBlock( 'core/pattern-part', {}, [
+						cloneBlock( innerBlock, {}, nestedInnerBlocks ),
+					] );
+				} );
+			}
+			return createBlock( 'core/pattern-part', {}, [
+				cloneBlock( block, {}, newInnerBlocks ),
+			] );
+		}
 		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.
@@ -44,9 +62,8 @@ const PatternEdit = ( { attributes, clientId } ) => {
 			window.queueMicrotask( () => {
 				// Clone blocks from the pattern before insertion to ensure they receive
 				// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.
-				const clonedBlocks = selectedPattern.blocks.map( ( block ) =>
-					cloneBlock( block )
-				);
+				const clonedBlocks =
+					selectedPattern.blocks.map( clonePatternBlock );
 				__unstableMarkNextChangeAsNotPersistent();
 				if ( syncStatus === 'partial' ) {
 					replaceInnerBlocks( clientId, clonedBlocks );
@@ -70,7 +87,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: syncStatus === 'partial' ? 'contentOnly' : false,
+		templateLock: syncStatus === 'partial' ? false : false,
 	} );
 
 	if ( syncStatus !== 'partial' ) {

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

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

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

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

packages/block-library/src/style.scss

@@ -27,6 +27,7 @@
 @import "./navigation-link/style.scss";
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
+@import "./pattern-part/style.scss";
 @import "./post-author/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-date/style.scss";