Add support "HTML Element" to Site Tagline (WordPress#59654)

* add tagName to attributes * update fixture * use HeadingLevelDropdown * update site-tagline * fix json * Update packages/block-library/src/site-tagline/index.php Co-authored-by: Aki Hamano <[email protected]> --------- Co-authored-by: Aki Hamano <[email protected]>
carstingaxion · Mar 27, 2024 · 3b84a29 · 3b84a29
1 parent f48d231
commit 3b84a29
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -847,7 +847,7 @@ Describe in a few words what the site is about. The tagline can be used in searc
 -	**Name:** core/site-tagline
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Attributes:** level, textAlign
 
 ## Site Title
 

diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json
@@ -10,6 +10,10 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"level": {
+			"type": "number",
+			"default": 0
 		}
 	},
 	"example": {},

diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js
@@ -12,17 +12,20 @@ import {
 	AlignmentControl,
 	useBlockProps,
 	BlockControls,
+	HeadingLevelDropdown,
 	RichText,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
+const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
+
 export default function SiteTaglineEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { textAlign } = attributes;
+	const { textAlign, level } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -38,6 +41,7 @@ export default function SiteTaglineEdit( {
 		};
 	}, [] );
 
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	function setTagline( newTagline ) {
@@ -58,7 +62,7 @@ export default function SiteTaglineEdit( {
 			onChange={ setTagline }
 			aria-label={ __( 'Site tagline text' ) }
 			placeholder={ __( 'Write site tagline…' ) }
-			tagName="p"
+			tagName={ TagName }
 			value={ tagline }
 			disableLineBreaks
 			__unstableOnSplitAtEnd={ () =>
@@ -67,11 +71,20 @@ export default function SiteTaglineEdit( {
 			{ ...blockProps }
 		/>
 	) : (
-		<p { ...blockProps }>{ tagline || __( 'Site Tagline placeholder' ) }</p>
+		<TagName { ...blockProps }>
+			{ tagline || __( 'Site Tagline placeholder' ) }
+		</TagName>
 	);
 	return (
 		<>
 			<BlockControls group="block">
+				<HeadingLevelDropdown
+					options={ HEADING_LEVELS }
+					value={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
 				<AlignmentControl
 					onChange={ ( newAlign ) =>
 						setAttributes( { textAlign: newAlign } )

diff --git a/packages/block-library/src/site-tagline/index.php b/packages/block-library/src/site-tagline/index.php
@@ -19,11 +19,18 @@ function render_block_core_site_tagline( $attributes ) {
 	if ( ! $site_tagline ) {
 		return;
 	}
+
+	$tag_name           = 'p';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
+	if ( isset( $attributes['level'] ) && 0 !== $attributes['level'] ) {
+		$tag_name = 'h' . (int) $attributes['level'];
+	}
+
 	return sprintf(
-		'<p %1$s>%2$s</p>',
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
 		$wrapper_attributes,
 		$site_tagline
 	);
@@ -42,4 +49,5 @@ function register_block_core_site_tagline() {
 		)
 	);
 }
+
 add_action( 'init', 'register_block_core_site_tagline' );
diff --git a/test/integration/fixtures/blocks/core__site-tagline.json b/test/integration/fixtures/blocks/core__site-tagline.json
@@ -2,7 +2,9 @@
 	{
 		"name": "core/site-tagline",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"level": 0
+		},
 		"innerBlocks": []
 	}
 ]