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 ); + } + } } + />
{ ); }; -const CommentsForm = ( { postId, postType } ) => { +const CommentsForm = ( { postId, postType, commentFormTitleActions } ) => { const [ commentStatus, setCommentStatus ] = useEntityProp( 'postType', postType, @@ -124,7 +159,11 @@ const CommentsForm = ( { postId, postType } ) => { } } - return ; + return ( + + ); }; export default CommentsForm; diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php index 644b02ae0f1498..a9658a0dacb687 100644 --- a/packages/block-library/src/post-comments-form/index.php +++ b/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' );