From 7535c1025813e5a0ff113f67ba0aca4bee8c967f Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Wed, 2 Sep 2020 16:03:18 -0700
Subject: [PATCH] Add group block attributes to template part

---
 .../src/template-part/block.json              | 11 ++++++++++-
 .../src/template-part/edit/index.js           | 19 ++++++++++++++-----
 .../src/template-part/edit/inner-blocks.js    |  1 +
 .../block-library/src/template-part/index.php |  3 ++-
 .../fixtures/blocks/core__template-part.json  |  3 ++-
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json
index bb5146843f7b7..839fe03f0759c 100644
--- a/packages/block-library/src/template-part/block.json
+++ b/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
+		}
 	}
 }
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 891bd30b53b70..64aaeaac2f9d1 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/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;
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 789efb2e24689..fa26416f125d3 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/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 }
 		/>
 	);
diff --git a/packages/block-library/src/template-part/index.php b/packages/block-library/src/template-part/index.php
index 862a7de3c8541..29e3668170f2f 100644
--- a/packages/block-library/src/template-part/index.php
+++ b/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>";
 }
 
 /**
diff --git a/packages/e2e-tests/fixtures/blocks/core__template-part.json b/packages/e2e-tests/fixtures/blocks/core__template-part.json
index c8a1b7373a6a6..d69e90cef7264 100644
--- a/packages/e2e-tests/fixtures/blocks/core__template-part.json
+++ b/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": ""