Post Comments Form: Add heading level control

docs/reference-guides/core-blocks.md

@@ -501,7 +501,7 @@ Display a post's comments form. ([Source](https://github.com/WordPress/gutenberg
 -	**Name:** core/post-comments-form
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Attributes:** headingLevel, textAlign
 
 ## Post Comments Link
 

packages/block-library/src/post-comments-form/block.json

@@ -7,6 +7,10 @@
 	"description": "Display a post's comments form.",
 	"textdomain": "default",
 	"attributes": {
+		"headingLevel": {
+			"type": "number",
+			"default": 3
+		},
 		"textAlign": {
 			"type": "string"
 		}

packages/block-library/src/post-comments-form/edit.js

@@ -16,13 +16,14 @@ import {
  * Internal dependencies
  */
 import CommentsForm from './form';
+import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
 export default function PostCommentsFormEdit( {
 	attributes,
 	context,
 	setAttributes,
 } ) {
-	const { textAlign } = attributes;
+	const { textAlign, headingLevel } = attributes;
 	const { postId, postType } = context;
 
 	const blockProps = useBlockProps( {
@@ -40,9 +41,19 @@ export default function PostCommentsFormEdit( {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
+				<HeadingLevelDropdown
+					selectedLevel={ headingLevel }
+					onChange={ ( newHeadingLevel ) =>
+						setAttributes( { headingLevel: newHeadingLevel } )
+					}
+				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				<CommentsForm postId={ postId } postType={ postType } />
+				<CommentsForm
+					headingLevel={ headingLevel }
+					postId={ postId }
+					postType={ postType }
+				/>
 			</div>
 		</>
 	);

packages/block-library/src/post-comments-form/form.js

@@ -17,13 +17,17 @@ import { useDisabled, useInstanceId } from '@wordpress/compose';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
-const CommentsFormPlaceholder = () => {
+const CommentsFormPlaceholder = ( { headingLevel } ) => {
+	const HeadingTagName = 'h' + headingLevel;
+
 	const disabledFormRef = useDisabled();
 	const instanceId = useInstanceId( CommentsFormPlaceholder );
 
 	return (
 		<div className="comment-respond">
-			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
+			<HeadingTagName className="comment-reply-title">
+				{ __( 'Leave a Reply' ) }
+			</HeadingTagName>
 			<form noValidate className="comment-form" ref={ disabledFormRef }>
 				<p>
 					<label htmlFor={ `comment-${ instanceId }` }>
@@ -53,7 +57,7 @@ const CommentsFormPlaceholder = () => {
 	);
 };
 
-const CommentsForm = ( { postId, postType } ) => {
+const CommentsForm = ( { headingLevel, postId, postType } ) => {
 	const [ commentStatus, setCommentStatus ] = useEntityProp(
 		'postType',
 		postType,
@@ -119,7 +123,7 @@ const CommentsForm = ( { postId, postType } ) => {
 		}
 	}
 
-	return <CommentsFormPlaceholder />;
+	return <CommentsFormPlaceholder headingLevel={ headingLevel } />;
 };
 
 export default CommentsForm;

packages/block-library/src/post-comments-form/index.php

@@ -27,12 +27,22 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 		$classes .= ' has-text-align-' . $attributes['textAlign'];
 	}
 
+	$heading = 'h3';
+	if ( isset( $attributes['headingLevel'] ) ) {
+		$heading = 'h' . $attributes['headingLevel'];
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
 	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
 
 	ob_start();
-	comment_form( array(), $block->context['postId'] );
+	comment_form(
+		array(
+			'title_reply_before' => '<' . $heading . ' id="reply-title" class="comment-reply-title">',
+			'title_reply_after'  => "</$heading>",
+		)
+	);
 	$form = ob_get_clean();
 
 	remove_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );

test/integration/fixtures/blocks/core__comments.json

@@ -138,7 +138,9 @@
 			{
 				"name": "core/post-comments-form",
 				"isValid": true,
-				"attributes": {},
+				"attributes": {
+					"headingLevel": 3
+				},
 				"innerBlocks": []
 			}
 		]

test/integration/fixtures/blocks/core__comments__deprecated-1.json

@@ -138,7 +138,9 @@
 			{
 				"name": "core/post-comments-form",
 				"isValid": true,
-				"attributes": {},
+				"attributes": {
+					"headingLevel": 3
+				},
 				"innerBlocks": []
 			}
 		]

test/integration/fixtures/blocks/core__post-comments-form.json

@@ -2,7 +2,9 @@
 	{
 		"name": "core/post-comments-form",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"headingLevel": 3
+		},
 		"innerBlocks": []
 	}
 ]