Template part: attribute feature parity with group block

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

@@ -10,10 +10,19 @@
 		},
 		"theme": {
 			"type": "string"
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
 		}
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"lightBlockWrapper": true,
+		"__experimentalColor": {
+			"gradients": true,
+			"linkColor": true
+		}
 	}
 }

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

@@ -3,7 +3,10 @@
  */
 import { useRef, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockControls } from '@wordpress/block-editor';
+import {
+	BlockControls,
+	__experimentalBlock as Block,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,7 +17,7 @@ import TemplatePartInnerBlocks from './inner-blocks';
 import TemplatePartPlaceholder from './placeholder';
 
 export default function TemplatePartEdit( {
-	attributes: { postId: _postId, slug, theme },
+	attributes: { postId: _postId, slug, theme, tagName },
 	setAttributes,
 	clientId,
 } ) {
@@ -57,10 +60,12 @@ export default function TemplatePartEdit( {
 		}
 	}, [ innerBlocks ] );
 
+	const BlockWrapper = Block[ tagName ];
+
 	if ( postId ) {
 		// Part of a template file, post ID already resolved.
 		return (
-			<>
+			<BlockWrapper>
 				<BlockControls>
 					<TemplatePartNamePanel
 						postId={ postId }
@@ -71,12 +76,16 @@ export default function TemplatePartEdit( {
 					postId={ postId }
 					hasInnerBlocks={ innerBlocks.length > 0 }
 				/>
-			</>
+			</BlockWrapper>
 		);
 	}
 	if ( ! initialSlug.current && ! initialTheme.current ) {
 		// Fresh new block.
-		return <TemplatePartPlaceholder setAttributes={ setAttributes } />;
+		return (
+			<BlockWrapper>
+				<TemplatePartPlaceholder setAttributes={ setAttributes } />
+			</BlockWrapper>
+		);
 	}
 	// Part of a template file, post ID not resolved yet.
 	return null;

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

@@ -19,6 +19,7 @@ export default function TemplatePartInnerBlocks( {
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }
+			__experimentalTagName="div"
 			renderAppender={ hasInnerBlocks ? undefined : renderAppender }
 		/>
 	);

packages/block-library/src/template-part/index.php

@@ -63,7 +63,8 @@ function render_block_core_template_part( $attributes ) {
 	}
 	$content = do_shortcode( $content );
 
-	return '<div>' . str_replace( ']]>', ']]&gt;', $content ) . '</div>';
+	$html_tag = esc_attr( $attributes['tagName'] );
+	return "<$html_tag>" . str_replace( ']]>', ']]&gt;', $content ) . "</$html_tag>";
 }
 
 /**

packages/block-library/src/template-part/theme.scss

@@ -0,0 +1,10 @@
+// Same as the group block styles.
+.wp-block-template-part {
+	&.has-background {
+		// Matches paragraph Block padding
+		// Todo: normalise with variables
+		padding: 20px 30px;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}

packages/block-library/src/theme.scss

@@ -16,6 +16,7 @@
 @import "./separator/theme.scss";
 @import "./table/theme.scss";
 @import "./video/theme.scss";
+@import "./template-part/theme.scss";
 
 // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
 #end-resizable-editor-section {

packages/e2e-tests/fixtures/blocks/core__template-part.json

@@ -5,7 +5,8 @@
         "isValid": true,
         "attributes": {
             "slug": "header",
-            "theme": "twentytwenty"
+            "theme": "twentytwenty",
+            "tagName": "div"
         },
         "innerBlocks": [],
         "originalContent": ""

packages/e2e-tests/specs/experiments/multi-entity-editing.test.js

@@ -27,7 +27,7 @@ const visitSiteEditor = async () => {
 	await visitAdminPage( 'admin.php', query );
 	// Waits for the template part to load...
 	await page.waitForSelector(
-		'.wp-block[data-type="core/template-part"] .block-editor-inner-blocks'
+		'.wp-block[data-type="core/template-part"] .block-editor-block-list__layout'
 	);
 };
 
@@ -59,8 +59,8 @@ const createTemplatePart = async (
 	await createNewButton.click();
 	await page.waitForSelector(
 		isNested
-			? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"] .block-editor-inner-blocks'
-			: '.wp-block[data-type="core/template-part"] .block-editor-inner-blocks'
+			? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"] .block-editor-block-list__layout'
+			: '.wp-block[data-type="core/template-part"] .block-editor-block-list__layout'
 	);
 	await page.focus( '.wp-block-template-part__name-panel input' );
 	await page.keyboard.type( templatePartName );

packages/e2e-tests/specs/experiments/multi-entity-saving.test.js

@@ -21,7 +21,7 @@ describe( 'Multi-entity save flow', () => {
 	const checkboxInputSelector = '.components-checkbox-control__input';
 	const entitiesSaveSelector = '.editor-entities-saved-states__save-button';
 	const templatePartSelector = '*[data-type="core/template-part"]';
-	const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`;
+	const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-block-list__layout`;
 	const savePanelSelector = '.entities-saved-states__panel';
 	const closePanelButtonSelector = 'button[aria-label="Close panel"]';
 	const createNewButtonSelector =

packages/e2e-tests/specs/experiments/template-part.test.js

@@ -88,7 +88,7 @@ describe( 'Template Part', () => {
 			'.editor-entities-saved-states__save-button';
 		const savePostSelector = '.editor-post-publish-button__button';
 		const templatePartSelector = '*[data-type="core/template-part"]';
-		const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`;
+		const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-block-list__layout`;
 		const testContentSelector = `//p[contains(., "${ testContent }")]`;
 		const createNewButtonSelector =
 			'//button[contains(text(), "New template part")]';