WORDPRESS COMMENT REPLY MODULE

This is a vanilla ES6/ECMA2015 rewrite of the WordPress core comment-reply.js script for threaded comments. It is designed for use in themes developed with a build process that already handles transpiling, polyfilling, module bundling, etc. There are no dependencies and jQuery is not required but you'll need to customize your markup and initialize the script on your own. Functionally it accomplishes the same thing as the original: once activated, the script listens for clicks on the reply button and moves the comment form into the appropriate location in the DOM while updating form data behind the scenes.

Documentation is not yet complete but the source is easy to read; it's not even 150 lines of code. For reference you can see this script in action here.

Note: this module is not for WordPress beginners. If you're not already comfortable with the jargon you've encountered thus far I strongly suggest looking elsewhere. This is very specifically intended for theme developers, not end users.

Installation

npm install --save-dev wp-comment-reply-module

Additionally you may need to polyfill Element.closest() (see browser support; reference here). I recommend npm install --save-dev element-closest (GitHub, npm).

Usage

Import the module and activate with options, which are all identifiers to help the script recognize your markup. Depending on your module bundling configuration you may need to whitelist the path so the module is properly transpiled. Some CSS will also be necessary to hide the cancel button.

import commentReply from 'wp-comment-reply-module';`

commentReply({ [options] });

Each reply button should be provisioned with the necessary data (commentId, parentId, and postId) in a JSON-encoded data attribute (data-reply by default). An example in Twig:

<button class="comment-reply" data-reply="{{ { commentId: comment.id, parentId: comment.comment_parent, postId: post.id } | json_encode | e }}">

If you're still writing spaghetti WordPress code you can JSON encode an array of the required data and insert it into the required data attribute.

License

Licensed under the GPL. Please feel free to improve on this script and use it at your own risk in your projects.