Add: Feature to modify the comment form title

docs/reference-guides/core-blocks.md

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

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

@@ -9,6 +9,9 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"commentFormTitle": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

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

@@ -25,12 +25,19 @@ export default function PostCommentsFormEdit( {
 	context,
 	setAttributes,
 } ) {
-	const { textAlign } = attributes;
+	const { textAlign, commentFormTitle } = attributes;
 	const { postId, postType } = context;
 
 	const instanceId = useInstanceId( PostCommentsFormEdit );
 	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );
 
+	const commentFormTitleActions = {
+		title: commentFormTitle,
+		setTitle: ( nextTitle ) => {
+			setAttributes( { commentFormTitle: nextTitle } );
+		},
+	};
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -49,7 +56,11 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				<CommentsForm postId={ postId } postType={ postType } />
+				<CommentsForm
+					postId={ postId }
+					postType={ postType }
+					commentFormTitleActions={ commentFormTitleActions }
+				/>
 				<VisuallyHidden id={ instanceIdDesc }>
 					{ __( 'Comments form disabled in editor.' ) }
 				</VisuallyHidden>

packages/block-library/src/post-comments-form/editor.scss

@@ -1,6 +1,16 @@
 .wp-block-post-comments-form * {
 	pointer-events: none;
 
+	.comment-reply-title {
+		pointer-events: visible;
+		cursor: text;
+
+		&.disabled {
+			pointer-events: none;
+			cursor: default;
+		}
+	}
+
 	&.block-editor-warning * {
 		pointer-events: auto;
 	}

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

@@ -11,18 +11,53 @@ import {
 	Warning,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
+	RichText,
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
-const CommentsFormPlaceholder = () => {
+const CommentsFormPlaceholder = ( { commentFormTitleActions } ) => {
 	const instanceId = useInstanceId( CommentsFormPlaceholder );
 
+	let isCommentFormTitleActionsEmpty = false;
+
+	if ( ! commentFormTitleActions ) {
+		isCommentFormTitleActionsEmpty = true;
+
+		commentFormTitleActions = {
+			title: __( 'Leave a reply' ),
+			setTitle: null,
+		};
+	} else if (
+		null === commentFormTitleActions.title ||
+		undefined === commentFormTitleActions.title
+	) {
+		commentFormTitleActions.title = '';
+	} else if (
+		null === commentFormTitleActions.setTitle ||
+		undefined === commentFormTitleActions.setTitle
+	) {
+		commentFormTitleActions.setTitle = null;
+	}
+
 	return (
 		<div className="comment-respond">
-			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
+			<RichText
+				tagName="h3"
+				className={
+					'comment-reply-title' +
+					( isCommentFormTitleActionsEmpty ? ' disabled' : '' )
+				}
+				placeholder={ __( 'Leave a reply' ) }
+				value={ commentFormTitleActions.title }
+				onChange={ ( text ) => {
+					if ( commentFormTitleActions.setTitle !== null ) {
+						commentFormTitleActions.setTitle( text );
+					}
+				} }
+			/>
 			<form
 				noValidate
 				className="comment-form"
@@ -58,7 +93,7 @@ const CommentsFormPlaceholder = () => {
 	);
 };
 
-const CommentsForm = ( { postId, postType } ) => {
+const CommentsForm = ( { postId, postType, commentFormTitleActions } ) => {
 	const [ commentStatus, setCommentStatus ] = useEntityProp(
 		'postType',
 		postType,
@@ -124,7 +159,11 @@ const CommentsForm = ( { postId, postType } ) => {
 		}
 	}
 
-	return <CommentsFormPlaceholder />;
+	return (
+		<CommentsFormPlaceholder
+			commentFormTitleActions={ commentFormTitleActions }
+		/>
+	);
 };
 
 export default CommentsForm;

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

@@ -34,7 +34,11 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
 
 	ob_start();
-	comment_form( array(), $block->context['postId'] );
+	$args = array();
+	if ( ! empty( $attributes['commentFormTitle'] ) ) {
+		$args['title_reply'] = $attributes['commentFormTitle'];
+	}
+	comment_form( $args, $block->context['postId'] );
 	$form = ob_get_clean();
 
 	remove_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );