sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Comments: Fix title not updating when replying to a comment 

When replying to an existing comment, the comment form is moved to below the
existing comment with JS, but the form heading was not being updated. This
fixes the issue by introducing a new data-attribute to the reply link with the
correct heading string, and applying that string to the heading when the form
is moved.

Props isabel_brison, azaozz, peterwilsoncc.
Fixes #38009.


git-svn-id: https://develop.svn.wordpress.org/trunk@47506 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Robert Anderson 2020-03-25 04:53:06 +00:00
parent 36d112d1c8
commit 251fd685dd
2 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/js/_enqueues/lib/comment-reply.js
View File

@ -14,12 +14,13 @@ window.addComment = ( function( window ) {
// Settings.
var config = {
commentReplyClass : 'comment-reply-link',
cancelReplyId : 'cancel-comment-reply-link',
commentFormId : 'commentform',
temporaryFormId : 'wp-temp-form-div',
parentIdFieldId : 'comment_parent',
postIdFieldId : 'comment_post_ID'
commentReplyClass : 'comment-reply-link',
commentReplyTitleId : 'reply-title',
cancelReplyId : 'cancel-comment-reply-link',
commentFormId : 'commentform',
temporaryFormId : 'wp-temp-form-div',
parentIdFieldId : 'comment_parent',
postIdFieldId : 'comment_post_ID'
};
// Cross browser MutationObserver.
@ -171,8 +172,14 @@ window.addComment = ( function( window ) {
getElementById( config.parentIdFieldId ).value = '0';
// Move the respond form back in place of the temporary element.
temporaryElement.parentNode.replaceChild( respondElement ,temporaryElement );
var headingText = temporaryElement.textContent;
temporaryElement.parentNode.replaceChild( respondElement, temporaryElement );
cancelLink.style.display = 'none';
var replyHeadingElement = getElementById( config.commentReplyTitleId );
var replyHeadingTextNode = replyHeadingElement && replyHeadingElement.firstChild;
if ( replyHeadingTextNode && replyHeadingTextNode.nodeType === Node.TEXT_NODE && headingText ) {
replyHeadingTextNode.textContent = headingText;
}
event.preventDefault();
}
@ -184,11 +191,14 @@ window.addComment = ( function( window ) {
* @param {Event} event The calling event.
*/
function clickEvent( event ) {
var replyNode = getElementById( config.commentReplyTitleId );
var defaultReplyHeading = replyNode && replyNode.firstChild.textContent;
var replyLink = this,
commId = getDataAttribute( replyLink, 'belowelement'),
parentId = getDataAttribute( replyLink, 'commentid' ),
respondId = getDataAttribute( replyLink, 'respondelement'),
postId = getDataAttribute( replyLink, 'postid'),
respondId = getDataAttribute( replyLink, 'respondelement' ),
postId = getDataAttribute( replyLink, 'postid' ),
replyTo = getDataAttribute( replyLink, 'replyto' ) || defaultReplyHeading,
follow;
if ( ! commId || ! parentId || ! respondId || ! postId ) {
@ -203,7 +213,7 @@ window.addComment = ( function( window ) {
* Third party comments systems can hook into this function via the global scope,
* therefore the click event needs to reference the global scope.
*/
follow = window.addComment.moveForm(commId, parentId, respondId, postId);
follow = window.addComment.moveForm( commId, parentId, respondId, postId, replyTo );
if ( false === follow ) {
event.preventDefault();
}
@ -292,8 +302,9 @@ window.addComment = ( function( window ) {
* @param {String} commentId Database ID of comment being replied to.
* @param {String} respondId HTML ID of 'respond' element.
* @param {String} postId Database ID of the post.
* @param {String} replyTo Form heading content.
*/
function moveForm( addBelowId, commentId, respondId, postId ) {
function moveForm( addBelowId, commentId, respondId, postId, replyTo ) {
// Get elements based on their IDs.
var addBelowElement = getElementById( addBelowId );
respondElement = getElementById( respondId );
@ -303,11 +314,18 @@ window.addComment = ( function( window ) {
var postIdField = getElementById( config.postIdFieldId );
var element, cssHidden, style;
var replyHeading = getElementById( config.commentReplyTitleId );
var replyHeadingTextNode = replyHeading && replyHeading.firstChild;
if ( ! addBelowElement || ! respondElement || ! parentIdField ) {
// Missing key elements, fail.
return;
}
if ( 'undefined' === typeof replyTo ) {
replyTo = replyHeadingTextNode && replyHeadingTextNode.textContent;
}
addPlaceHolder( respondElement );
// Set the value of the post.
@ -319,7 +337,9 @@ window.addComment = ( function( window ) {
cancelElement.style.display = '';
addBelowElement.parentNode.insertBefore( respondElement, addBelowElement.nextSibling );
if ( replyHeadingTextNode.nodeType === Node.TEXT_NODE ) {
replyHeadingTextNode.textContent = replyTo;
}
/*
* This is for backward compatibility with third party commenting systems
* hooking into the event using older techniques.
@ -387,6 +407,8 @@ window.addComment = ( function( window ) {
function addPlaceHolder( respondElement ) {
var temporaryFormId = config.temporaryFormId;
var temporaryElement = getElementById( temporaryFormId );
var replyElement = getElementById( config.commentReplyTitleId );
var initialHeadingText = ( 'undefined' !== typeof replyElement ) ? replyElement.firstChild.textContent : '';
if ( temporaryElement ) {
// The element already exists, no need to recreate.
@ -396,6 +418,7 @@ window.addComment = ( function( window ) {
temporaryElement = document.createElement( 'div' );
temporaryElement.id = temporaryFormId;
temporaryElement.style.display = 'none';
temporaryElement.textContent = initialHeadingText;
respondElement.parentNode.insertBefore( temporaryElement, respondElement );
}

1
src/wp-includes/comment-template.php
View File

@ -1703,6 +1703,7 @@ function get_comment_reply_link( $args = array(), $comment = null, $post = null
'postid' => $post->ID,
'belowelement' => $args['add_below'] . '-' . $comment->comment_ID,
'respondelement' => $args['respond_id'],
'replyto' => sprintf( $args['reply_to_text'], $comment->comment_author ),
);
$data_attribute_string = '';