Add layout support to the template part block

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

@@ -19,7 +19,8 @@
 		"color": {
 			"gradients": true,
 			"link": true
-		}
+		},
+		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-template-part-editor"
 }

packages/block-library/src/template-part/edit/index.js

@@ -28,7 +28,7 @@ import { TemplatePartAdvancedControls } from './advanced-controls';
 import { getTagBasedOnArea } from './get-tag-based-on-area';
 
 export default function TemplatePartEdit( {
-	attributes: { slug, theme, tagName },
+	attributes: { slug, theme, tagName, layout = {} },
 	setAttributes,
 	clientId,
 } ) {
@@ -152,6 +152,7 @@ export default function TemplatePartEdit( {
 					<TemplatePartInnerBlocks
 						postId={ templatePartId }
 						hasInnerBlocks={ innerBlocks.length > 0 }
+						layout={ layout }
 					/>
 				) }
 				{ ! isPlaceholder && ! isResolved && <Spinner /> }

packages/block-library/src/template-part/edit/inner-blocks.js

@@ -5,12 +5,27 @@ import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	InnerBlocks,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	__experimentalUseEditorFeature as useEditorFeature,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 export default function TemplatePartInnerBlocks( {
 	postId: id,
 	hasInnerBlocks,
+	layout,
 } ) {
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings()?.supportsLayout;
+	}, [] );
+	const defaultLayout = useEditorFeature( 'layout' ) || {};
+	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const { contentSize, wideSize } = usedLayout;
+	const alignments =
+		contentSize || wideSize
+			? [ 'wide', 'full' ]
+			: [ 'left', 'center', 'right' ];
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_template_part',
@@ -25,6 +40,11 @@ export default function TemplatePartInnerBlocks( {
 			renderAppender: hasInnerBlocks
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
+			__experimentalLayout: {
+				type: 'default',
+				// Find a way to inject this in the support flag code (hooks).
+				alignments: themeSupportsLayout ? alignments : undefined,
+			},
 		}
 	);
 	return <div { ...innerBlocksProps } />;