Comments: Fix backward compatibility regressions in comment reply JavaScript.

Adds a `MutationObserver` to `comment-reply.js` to allow for lazy-loaded comments to continue working without the need to re-initialize the comment form.

Props Pento.
Fixes #46260.


Built from https://develop.svn.wordpress.org/trunk@44748


git-svn-id: http://core.svn.wordpress.org/trunk@44580 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/comment-reply.js

@@ -22,6 +22,9 @@ window.addComment = ( function( window ) {
 		postIdFieldId     : 'comment_post_ID'
 	};
 
+	// Cross browser MutationObserver.
+	var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+
 	// Check browser cuts the mustard.
 	var cutsTheMustard = 'querySelector' in document && 'addEventListener' in window;
 
@@ -40,9 +43,15 @@ window.addComment = ( function( window ) {
 	// The respond element.
 	var respondElement;
 
+	// The mutation observer.
+	var observer;
+
 	// Initialise the events.
 	init();
 
+	// Set up a MutationObserver to check for comments loaded late.
+	observeChanges();
+
 	/**
 	 * Add events to links classed .comment-reply-link.
 	 *
@@ -57,7 +66,7 @@ window.addComment = ( function( window ) {
 	 * @param {HTMLElement} context The parent DOM element to search for links.
 	 */
 	function init( context ) {
-		if ( true !== cutsTheMustard ) {
+		if ( ! cutsTheMustard ) {
 			return;
 		}
 
@@ -164,6 +173,44 @@ window.addComment = ( function( window ) {
 		}
 	}
 
+	/**
+	 * Creates a mutation observer to check for newly inserted comments.
+	 *
+	 * @since 5.1.0
+	 */
+	function observeChanges() {
+		if ( ! MutationObserver ) {
+			return;
+		}
+
+		var observerOptions = {
+			childList: true,
+			subTree: true
+		};
+
+		observer = new MutationObserver( handleChanges );
+		observer.observe( document.body, observerOptions );
+	}
+
+	/**
+	 * Handles DOM changes, calling init() if any new nodes are added.
+	 *
+	 * @since 5.1.0
+	 *
+	 * @param {Array} mutationRecords Array of MutationRecord objects.
+	 */
+	function handleChanges( mutationRecords ) {
+		var i = mutationRecords.length;
+
+		while ( i-- ) {
+			// Call init() once if any record in this set adds nodes.
+			if ( mutationRecords[ i ].addedNodes.length ) {
+				init();
+				return;
+			}
+		}
+	}
+
 	/**
 	 * Backward compatible getter of data-* attribute.
 	 *

wp-includes/js/comment-reply.min.js

@@ -1 +1 @@
-window.addComment=function(a){function b(a){if(!0===o&&(j=g(n.cancelReplyId),k=g(n.commentFormId),j)){j.addEventListener("touchstart",d),j.addEventListener("click",d);for(var b,f=c(a),h=0,i=f.length;h<i;h++)b=f[h],b.addEventListener("touchstart",e),b.addEventListener("click",e)}}function c(a){var b,c=n.commentReplyClass;return a&&a.childNodes||(a=m),b=m.getElementsByClassName?a.getElementsByClassName(c):a.querySelectorAll("."+c)}function d(a){var b=this,c=n.temporaryFormId,d=g(c);d&&l&&(g(n.parentIdFieldId).value="0",d.parentNode.replaceChild(l,d),b.style.display="none",a.preventDefault())}function e(b){var c,d=this,e=f(d,"belowelement"),g=f(d,"commentid"),h=f(d,"respondelement"),i=f(d,"postid");c=a.addComment.moveForm(e,g,h,i),!1===c&&b.preventDefault()}function f(a,b){return p?a.dataset[b]:a.getAttribute("data-"+b)}function g(a){return m.getElementById(a)}function h(b,c,d,e){var f=g(b);l=g(d);var h,o,p,q=g(n.parentIdFieldId),r=g(n.postIdFieldId);if(f&&l&&q){i(l),e&&r&&(r.value=e),q.value=c,j.style.display="",f.parentNode.insertBefore(l,f.nextSibling),j.onclick=function(){return!1};try{for(var s=0;s<k.elements.length;s++)if(h=k.elements[s],o=!1,"getComputedStyle"in a?p=a.getComputedStyle(h):m.documentElement.currentStyle&&(p=h.currentStyle),(h.offsetWidth<=0&&h.offsetHeight<=0||"hidden"===p.visibility)&&(o=!0),"hidden"!==h.type&&!h.disabled&&!o){h.focus();break}}catch(t){}return!1}}function i(a){var b=n.temporaryFormId,c=g(b);c||(c=m.createElement("div"),c.id=b,c.style.display="none",a.parentNode.insertBefore(c,a))}var j,k,l,m=a.document,n={commentReplyClass:"comment-reply-link",cancelReplyId:"cancel-comment-reply-link",commentFormId:"commentform",temporaryFormId:"wp-temp-form-div",parentIdFieldId:"comment_parent",postIdFieldId:"comment_post_ID"},o="querySelector"in m&&"addEventListener"in a,p=!!m.body.dataset;return b(),{init:b,moveForm:h}}(window);
+window.addComment=function(a){function b(a){if(s&&(l=i(q.cancelReplyId),m=i(q.commentFormId),l)){l.addEventListener("touchstart",d),l.addEventListener("click",d);for(var b,f=c(a),g=0,h=f.length;g<h;g++)b=f[g],b.addEventListener("touchstart",e),b.addEventListener("click",e)}}function c(a){var b,c=q.commentReplyClass;return a&&a.childNodes||(a=p),b=p.getElementsByClassName?a.getElementsByClassName(c):a.querySelectorAll("."+c)}function d(a){var b=this,c=q.temporaryFormId,d=i(c);d&&n&&(i(q.parentIdFieldId).value="0",d.parentNode.replaceChild(n,d),b.style.display="none",a.preventDefault())}function e(b){var c,d=this,e=h(d,"belowelement"),f=h(d,"commentid"),g=h(d,"respondelement"),i=h(d,"postid");c=a.addComment.moveForm(e,f,g,i),!1===c&&b.preventDefault()}function f(){if(r){var a={childList:!0,subTree:!0};o=new r(g),o.observe(p.body,a)}}function g(a){for(var c=a.length;c--;)if(a[c].addedNodes.length)return void b()}function h(a,b){return t?a.dataset[b]:a.getAttribute("data-"+b)}function i(a){return p.getElementById(a)}function j(b,c,d,e){var f=i(b);n=i(d);var g,h,j,o=i(q.parentIdFieldId),r=i(q.postIdFieldId);if(f&&n&&o){k(n),e&&r&&(r.value=e),o.value=c,l.style.display="",f.parentNode.insertBefore(n,f.nextSibling),l.onclick=function(){return!1};try{for(var s=0;s<m.elements.length;s++)if(g=m.elements[s],h=!1,"getComputedStyle"in a?j=a.getComputedStyle(g):p.documentElement.currentStyle&&(j=g.currentStyle),(g.offsetWidth<=0&&g.offsetHeight<=0||"hidden"===j.visibility)&&(h=!0),"hidden"!==g.type&&!g.disabled&&!h){g.focus();break}}catch(t){}return!1}}function k(a){var b=q.temporaryFormId,c=i(b);c||(c=p.createElement("div"),c.id=b,c.style.display="none",a.parentNode.insertBefore(c,a))}var l,m,n,o,p=a.document,q={commentReplyClass:"comment-reply-link",cancelReplyId:"cancel-comment-reply-link",commentFormId:"commentform",temporaryFormId:"wp-temp-form-div",parentIdFieldId:"comment_parent",postIdFieldId:"comment_post_ID"},r=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,s="querySelector"in p&&"addEventListener"in a,t=!!p.body.dataset;return b(),f(),{init:b,moveForm:j}}(window);

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2-alpha-44747';
+$wp_version = '5.2-alpha-44748';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.