Changeset 47506

Timestamp:

03/25/2020 04:53:06 AM (5 years ago)

Author:

noisysocks

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/lib/comment-reply.js (modified) (9 diffs)
• wp-includes/comment-template.php (modified) (1 diff)

trunk/src/js/_enqueues/lib/comment-reply.js

@@ -15 +15 @@
     // 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'
     };
 
@@ -172 +173 @@
 
         // 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();
     }
@@ -185 +192 @@
      */
     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;
 
@@ -204 +214 @@
          * 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();
@@ -293 +303 @@
      * @param {String} respondId  HTML ID of 'respond' element.
      * @param {String} postId     Database ID of the post.
-     */
-    function moveForm( addBelowId, commentId, respondId, postId ) {
+     * @param {String} replyTo    Form heading content.
+     */
+    function moveForm( addBelowId, commentId, respondId, postId, replyTo ) {
         // Get elements based on their IDs.
         var addBelowElement = getElementById( addBelowId );
@@ -304 +315 @@
         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;
         }
 
@@ -320 +338 @@
         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
@@ -388 +408 @@
         var temporaryFormId  = config.temporaryFormId;
         var temporaryElement = getElementById( temporaryFormId );
+        var replyElement = getElementById( config.commentReplyTitleId );
+        var initialHeadingText = ( 'undefined' !== typeof replyElement ) ? replyElement.firstChild.textContent : '';
 
         if ( temporaryElement ) {
@@ -397 +419 @@
         temporaryElement.id = temporaryFormId;
         temporaryElement.style.display = 'none';
+        temporaryElement.textContent = initialHeadingText;
         respondElement.parentNode.insertBefore( temporaryElement, respondElement );
     }

trunk/src/wp-includes/comment-template.php

@@ -1704 +1704 @@
             'belowelement'   => $args['add_below'] . '-' . $comment->comment_ID,
             'respondelement' => $args['respond_id'],
+            'replyto'        => sprintf( $args['reply_to_text'], $comment->comment_author ),
         );