wpDiscuz adding br tag instead of p tag

  • For certain users, depending on their device, wpDiscuz adds a <br> tag instead of a <p> tag when the user hits the enter key (carriage return). I have noticed this on every site that uses this plugin, so I know it’s not just our site.

    Here is an example of the markup for a comment.

    <div class="wpd-comment-text">
<p>
This is my first paragraph.<br>
This is my second paragraph.<br>
This is my third paragraph.
</p>
</div>

    The <br> tag should not be present, rather a <p> tag should be when someone hits the enter (return) key which indicates a new paragraph. However, that’s not always happening depending on the user’s device.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support gVectors Support

    (@gvectorssupport)

    Hi bward,

    wpDiscuz works in the same way as the native (core) WordPress comments.

    If you want to change it, I may suggest you try out the solution provided here: https://wpdiscuz.com/community/general-forum/all-comment-body-inside-one-paragraph/#post-2031

    Thread Starter bward

    (@bward)

    That did it.

    Thanks so much for your assistance.

    Thread Starter bward

    (@bward)

    That fixed the line break issue, but it broke emoji’s in comments, they don’t display with the code running.

    I want to share more of the issue here.

    This is an example of what your plugin is doing.

    I type, “This is a test comment.” Hit enter and type “This is a test comment.” I then opened my browsers inspector tool and this is how the code appears.

    <div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="Join the discussion">
<p>This is a test comment.</p>
<p>This is a test comment.</p>
</div>

    That’s correct and what should display. However, once I click Post Comment, this is the code that actually renders.

    <div class="wpd-comment-text">
<p>This is a test comment
<br>
This is a test comment.</p>
</div>

    That is not correct and makes the comments look less professional.

    When I do the same thing with your plugin off, using default WP comments, this is the code that renders when the comment is posted.

    <div class="comment-content">
<p>default 2</p>
<p>default 2</p>
</div>

    That is correct.

    I cannot explain why your code looks correct before posting a comment, but then changes after. However, I can see what’s going on from a user perspective.

    When posting a comment with WP-Discuz a user types a line, hits enter and it appears as if there is an empty space in between. Like this.

    Test comment.

    Test comment.

    However, when you use default WP comments a user types a line hits enter once, and the comment looks like this.

    Test comment.
    Test comment.

    So the user knows to hit enter a SECOND time, so the comment then displays properly like this.

    Test comment.

    Test comment.

    As a fix, I noticed theme CSS for the “p” tag are affecting this. So I took the code your plugin uses and set a margin of 0em.

    #comments p, #respond p {
margin-bottom: 0em;
}

    Now, as you type a comment and hit return once, your comment properly looks like this.

    Test comment.
Test comment.

    Now the user will know to hit return once more, twice total, so there comment properly looks like this as they type.

    Test comment.

Test comment.

    Once they post the comment, it will then properly display with a p tag for each new line. Perhaps this is a modification to add into core. Most people are never going to figure this out. This is my third attempt to understand the problem and I finally figured it out.

    Unfortunately, I don’t know how to fix past comments to replace the <br> tag.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘wpDiscuz adding br tag instead of p tag’ is closed to new replies.