Add group block attributes to template part

WordPress · Sep 3, 2020 · 7535c10 · 7535c10
1 parent b575047
commit 7535c10
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -5,7 +5,8 @@
         "isValid": true,
         "attributes": {
             "slug": "header",
-            "theme": "twentytwenty"
+            "theme": "twentytwenty",
+            "tagName": "div"
         },
         "innerBlocks": [],
         "originalContent": ""