WordPress comments package

🗣 Feature Discussions Released
1

OPENING POST

— npm package

Description

Right now, if people want to show their WP comments they have to fetch the data themselves and build the logic, or use external services like Disqus. We could build a package to do this so users can use WordPress default comment system.

User Stories

As a Frontity user
I want to be able to access my WordPress comments in the state
so that I can consume them however I want

As a Frontity user
I want to be able to call an action to post a new comment
so that I can integrate it in my Comments forms

As a Frontity user
I want to have a component to show my comments
so that I just have to adapt some styles and not build my own logic

As a Frontity user
I want to have a component with a form to submit new comments
so that I just have to adapt some styles and not build my own logic

As a Frontity user
I want to be able to break comments into pages, selecting the number of top level comments
so that I don’t have to load all comments from the beginning

As a Frontity user
I want to be able to order my comments from older to newer or newer to older
so that I can select depending on each specific case

Possible solution

As @luisherranz suggested, the comments fetch could be handled by wp-source via actions.source.fetch("@comments/1232"), while we could work on a package to expose:

  • Comments : a component that shows both the comments and the form to create a new one.
  • CommentForm a component to create a new comment.
  • actions.comments.create(...) : an action for those themes that want to create the form themselves, but don’t want to implement the logic.

Apart from that, we need to investigate a way to pass down styles to an external component:

This could works, although we aren’t 100% sure:

const commentsStyles = css`
  margin: 0;

  .commentItem {
    color: red;
  }
`;

const Post = ({ ... }) => {
  return (
    <>
      ...
      <Comments className={commentsStyles} />
    </>
  );
}

SUMMARY

:warning: Please, bear in mind that this section wasn’t part of the opening post. It has been added afterwards and its purpose is to keep a quick summary with the most relevant information about this FD at the top of the thread.

Relevant information

2

Btw, we started a Pull Request some time ago and discussed about some aspects there. Let’s continue the conversation here from now.

3

@luisherranz I like the approach you suggested. I guess both components, the comments and the form, would be minimal and theme developers just have to style them right? Could they even use a processor if they want to modify the logic of the components?

4

Not really, no, because that’s only for HTML :sweat_smile:

They should be able to subscribe or even overwrite actions.comments.submit if they want.

5

Hi, have you implemented this package? I tested this method of showing comments but it’s probably only for displaying and no option for posting a new comment. So it’s useless if we can’t add new comments posting method. For this I know we may need to config our WP for accepting post requests too.
I don’t want to use Disqus. So any guide for a noob?

6

We haven’t implemented this yet. It’s one of our top priorities so I guess we’ll work on it during the coming weeks. Anyway, you may want to take a look at WP REST API Handbook, as you said, you can add new comments using POST - > https://developer.wordpress.org/rest-api/reference/comments/#create-a-comment.

You can also take a look at this guide, the implementation should be pretty similar. Let us know if you finally try it :slightly_smiling_face:

7

Actually it’s a bit different scenario in my case as I’m using wordpress.com not .org so authentication etc is a bit different. Also I don’t posses any good skills in things like oauth etc. wordpress.com docs are not making sense to me – maybe they’re for experts. However with localhost I used JWT authentication plugin. I test it sort of working but after dumping off I tried with .com and solution not found.

8

Can you tell me that is frontity has any method of API authorization? Like can I switch frontity to use authenticated API and provide it with username and p/w of admin. I found when we enable a authentication plugin frontity stops grabbing data from public endpoints too

11

Hi inamkbmail :wave:, I think I can answer you.

In an old version of the framework we were using a call to /wp-comments-post.php in the WP site, actually the same call that a page served from WP would do to post a comment. That way you don’t have to deal with neither REST API calls nor authentication at all.

If I remember correctly, you have to send a POST request to yourwpsite.com/wp-comments-post.php along with the comment info as a form data object (you can create a <form> for that):

const CommentForm = ({ postId, parentId, wpUrl }) => {
  return (
    <form
      id="commentform"
      method="post"
      action={`${wpUrl}/wp-comments-post.php`}
    >
      <label htmlFor="comment">comment</label>
      <textarea id="comment" name="comment" />
      <label htmlFor="author">author</label>
      <input id="author" name="author" type="text" />
      <label htmlFor="email">email</label>
      <input id="email" name="email" type="email" />
      <label htmlFor="url">Website</label>
      <input id="url" name="url" type="url" />
      <input
        type="hidden"
        name="comment_post_ID"
        id="comment_post_ID"
        value={postId}
      />
      <input
        type="hidden"
        name="comment_parent"
        id="comment_parent"
        value={parentId}
      />
      <button type="submit">Send comment</button>
    </form>
  );
};

Frontity hasn’t got that feature yet but I guess we have that in the roadmap. I’ll confirm it later.

12

Thanks for the answer. For testing I created a form on codepen link here. Actually wordpress is refusing to accept commented posted from outside even I have disabled all of the required things like author login requirements etc for sort of anonymous behavior

13

Maybe the access to wp-comments-post.php is disabled in WP.com?

What happens if you try to do a POST request with something like Postman?

14

Yes maybe. Same error with Postman too.
It looks like wp.com anti-spam system is blocking this thing. They’re using a strictest form of anti-spam.

15

Ok, thanks @inamkbmail.

I guess that means we can’t support WP.com comments with the same, non-authenticated approach. Maybe we need two separate packages, wp-org-comments and, in the future, wp-com-comments.

What do you think @david?

16

What I feel is maybe no, we don’t need separate package. We’d follow a better approach. Because all wp user use some sort of security plugins they may interfere and there will be a lot of issues as number of people increase.
Why not make package which follow this method https://developer.wordpress.com/docs/api/1.1/post/sites/%24site/posts/%24post_ID/replies/new/ and find a wp.org plugin or make a new one which simply enable oauth authentication similar to wp.com?

17

Thanks for the info. It seems like that endpoint still requires authentication, doesn’t it?

It seems like the problem with wp-comments-post.php in WP.com is not the file itself, but Akismet.

I was able to generate a new comment in a WP.com site without authenticating, with this payload:
https://luisherranz.wordpress.com/2017/10/02/first-blog-post/

highlander_comment_nonce: 563aafcdd9
_wp_http_referer: /2017/10/02/first-blog-post/
hc_post_as: guest
comment: Test
email: some@email.com
author: SomeAuthor
comment_post_ID: 4
comment_parent: 0
akismet_comment_nonce: 74d8025d64
genseq: 1586330353
ak_js: 1586330472903

highlander_comment_nonce and akismet_comment_nonce are available in the HTML, we could do a fetch and extract those.

But ak_js is not. My guess is that that number is generated using JavaScript and if you don’t send it, the request will fail.

We would have to study if it’s possible to create comments from an external service when Akismet is activated. @David and @inamkbmail, could you please take a look at that and report what you find?

18

For what I see in the code of the old package:

we didn’t even use nonces.

How is that possible? Do you remember, @david?

20

Maybe a good news but if you simply change value of

ak_js: 1586330472903

to something random like

ak_js: 5325

comment get posted…
I just commented on your web with ak_js value 123456 and it worked

Your this statement is not standing correct.

21

Actually I tried changing values of each to 123456 and comment got submitted but when I altered value of highlander_comment_nonce it brought up the same error like 'comment couldn’t be posted`. If

and we can get that nonce then we’re close to the solution.

Sorry I sent a few comments on your web please remove them from moderation awaiting list.

22

Maybe it depends on the type of WordPress you are using (.org or .com) and / or the plugins you have installed.

I did a quick test on a local instance of WordPress and this is the only information that was sent (there aren’t headers related to nonce either):

comment: Hello World!
author: SomeAuthor
email: some@email.com
url: https://frontity.org
submit: Post Comment
comment_post_ID: 2003
comment_parent: 0
23

On the contrary, thanks for testing it out :slight_smile:

I think we need to understand better how Akismet works because it is activated by default on WP.com but it is also widely used in self-hosted WP. Same for Jetpack.

If our comments package doesn’t work with Akismet or Jetpack, Frontity itself will be much less appealing.

I think we need to understand better how Akismet and JetPack work before we start coding.

Here it is the development API of Akismet. In libraries, there a couple of Node/JS libraries you can take a look:

Also, we need to understand what is that ak_js value used for:

Finally, we need to understand how the JetPack comments module works:

2 Likes