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 = '';