diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index b091f9d143b7ad..b829f86c20908d 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index ff157beb5ced9c..300fe60d37937a 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -9,6 +9,9 @@
"attributes": {
"textAlign": {
"type": "string"
+ },
+ "commentFormTitle": {
+ "type": "string"
}
},
"usesContext": [ "postId", "postType" ],
diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index b63c798a2458af..98a9981620f5f5 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/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( {
/>
-
+
{ __( 'Comments form disabled in editor.' ) }
diff --git a/packages/block-library/src/post-comments-form/editor.scss b/packages/block-library/src/post-comments-form/editor.scss
index 6c62dfd2568385..107f407fabb5cc 100644
--- a/packages/block-library/src/post-comments-form/editor.scss
+++ b/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;
}
diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
index 10483e145f709b..a08125994baa72 100644
--- a/packages/block-library/src/post-comments-form/form.js
+++ b/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 (
-
{ __( 'Leave a Reply' ) }
+ {
+ if ( commentFormTitleActions.setTitle !== null ) {
+ commentFormTitleActions.setTitle( text );
+ }
+ } }
+ />