From 251fd685dd932200087ad04fa49c598ef9657cda Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 25 Mar 2020 04:53:06 +0000 Subject: [PATCH] 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 --- src/js/_enqueues/lib/comment-reply.js | 47 ++++++++++++++++++++------- src/wp-includes/comment-template.php | 1 + 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/src/js/_enqueues/lib/comment-reply.js b/src/js/_enqueues/lib/comment-reply.js index 1ba9498f11..f1b6c6599e 100644 --- a/src/js/_enqueues/lib/comment-reply.js +++ b/src/js/_enqueues/lib/comment-reply.js @@ -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 ); } diff --git a/src/wp-includes/comment-template.php b/src/wp-includes/comment-template.php index 9d20c6bbd2..2048dccdfa 100644 --- a/src/wp-includes/comment-template.php +++ b/src/wp-includes/comment-template.php @@ -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 = '';