Dear support,
First of all, thank you for creating an amazing plugin!
I am using wpDiscuz on Uncode theme. Uncode uses the WPBakery Page Builder. As I cannot use the Inline Comment button from within the WPBakery Backend Editor (this is only available in Classic Mode editing), I simply add the [wpdiscuz-feedback] tags to my Text Block text.
This adds the Inline Comments, but unfortunately messes up the layout. The paragraph is broken up, meaning the text that the inline comment belongs to starts on a new line. Also, links don't use the right styling and the line height is wrong. I have created a small demo page that shows the text without Inline Comments and then with Inline Comments added. I have attached 2 screenshots below.
The raw Text Block Text for the top item (without inline comments) is:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis est ut mauris hendrerit imperdiet. Nulla ut quam dui. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa volutpat nec. Nulla ultrices ipsum erat, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Resulting HTML:
<div class="uncode_text_column"><p>Lorem ipsum dolor <a href="#">sit amet</a>, consectetur adipiscing elit. Pellentesque venenatis est ut mauris hendrerit imperdiet. Nulla ut <a href="#">quam dui</a>. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa <a href="#">volutpat nec</a>.</p> <p>Nulla ultrices <a href="#">ipsum erat</a>, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.</p> </div>
<div class="uncode_text_column text-lead"><p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p> </div>
The raw Text Block Text for the bottom item (with inline comments) is:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [wpdiscuz-feedback id="fdjc587gjk" question="Lorem ipsum" opened="0"]Pellentesque venenatis est ut mauris hendrerit imperdiet.[/wpdiscuz-feedback] Nulla ut quam dui. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa volutpat nec. Nulla ultrices ipsum erat, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.
Lorem ipsum dolor sit amet, [wpdiscuz-feedback id="05qbywuaqz" question="Lorem ipsum" opened="0"]consectetur adipiscing elit.[/wpdiscuz-feedback]
Resulting HTML:
<div class="uncode_text_column"><p>Lorem ipsum dolor <a href="#">sit amet</a>, consectetur adipiscing elit. </p><div class="wpd-inline-shortcode wpd-inline-closed" id="wpd-inline-11">Pellentesque venenatis est ut mauris hendrerit imperdiet.<div class="wpd-inline-icon-wrapper"><svg class="wpd-inline-icon wpd-ignored" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-icon-first" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path class="wpd-inline-icon-second" d="M0 0h24v24H0z"></path></svg><div class="wpd-inline-icon-count">0</div><div class="wpd-inline-form-wrapper" style="display: none;"><div class="wpd-inline-form-question">Lorem ipsum<span class="wpd-inline-form-close"><a href="#">x</a></span></div><div class="wpd-inline-form"><form method="post" class="wpd_inline_comm_form" autocomplete="off"><textarea name="wpd_inline_comment" class="wpd-inline-comment-content" placeholder="Je reactie hier ..." required="required"></textarea><label class="wpd-inline-notification"><input name="wpd_inline_notify_me" class="wpd-inline-notify-me" type="checkbox" value="1"> Stuur mij een e-mail wanneer er een nieuw antwoord wordt geplaatst</label><div class="wpd-inline-form-second-row"><button class="wpd-inline-submit wpd_not_clicked" type="submit" name="wpd_inline_submit"><span>[REACTIE]</span><svg xmlns="https://www.w3.org/2000/svg" class="wpd-inline-submit-icon" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-submit-icon-first" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path><path class="wpd-inline-submit-icon-second" d="M0 0h24v24H0z"></path></svg></button></div><input type="hidden" id="_wpd_inline_nonce-11" name="_wpd_inline_nonce" value="3ab6ab2b35"></form></div></div></div></div> Nulla ut <a href="#">quam dui</a>. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa <a href="#">volutpat nec</a>.<p></p> <p>Nulla ultrices <a href="#">ipsum erat</a>, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.</p> </div>
<div class="uncode_text_column text-lead"><p><strong>Lorem ipsum dolor sit amet, </strong></p><div class="wpd-inline-shortcode wpd-inline-closed" id="wpd-inline-10"><strong>consectetur adipiscing elit.<div class="wpd-inline-icon-wrapper"><svg class="wpd-inline-icon wpd-ignored" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-icon-first" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path class="wpd-inline-icon-second" d="M0 0h24v24H0z"></path></svg><div class="wpd-inline-icon-count">0</div><div class="wpd-inline-form-wrapper" style="display: none;"><div class="wpd-inline-form-question">Lorem ipsum<span class="wpd-inline-form-close"><a href="#">x</a></span></div><div class="wpd-inline-form"><form method="post" class="wpd_inline_comm_form" autocomplete="off"><textarea name="wpd_inline_comment" class="wpd-inline-comment-content" placeholder="Je reactie hier ..." required="required"></textarea><label class="wpd-inline-notification"><input name="wpd_inline_notify_me" class="wpd-inline-notify-me" type="checkbox" value="1"> Stuur mij een e-mail wanneer er een nieuw antwoord wordt geplaatst</label><div class="wpd-inline-form-second-row"><button class="wpd-inline-submit wpd_not_clicked" type="submit" name="wpd_inline_submit"><span>[REACTIE]</span><svg xmlns="https://www.w3.org/2000/svg" class="wpd-inline-submit-icon" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-submit-icon-first" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path><path class="wpd-inline-submit-icon-second" d="M0 0h24v24H0z"></path></svg></button></div><input type="hidden" id="_wpd_inline_nonce-10" name="_wpd_inline_nonce" value="3ab6ab2b35"></form></div></div></div></strong></div><p></p> </div>
I have also included the complete example Uncode WPBakery Page Builder code below (can be seen when switching from Backend Editor to Classic Mode):
[vc_row][vc_column width="1/1"][vc_custom_heading separator="yes" separator_color="yes" uncode_shortcode_id="429559"]Lorem ipsum[/vc_custom_heading][vc_column_text uncode_shortcode_id="137695"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis est ut mauris hendrerit imperdiet. Nulla ut quam dui. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa volutpat nec. Nulla ultrices ipsum erat, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.[/vc_column_text][vc_column_text text_lead="yes" uncode_shortcode_id="295809"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_separator sep_color="" uncode_shortcode_id="609536"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_custom_heading separator="yes" separator_color="yes" uncode_shortcode_id="429559"]Lorem ipsum[/vc_custom_heading][vc_column_text uncode_shortcode_id="540413"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [wpdiscuz-feedback id="fdjc587gjk" question="Lorem ipsum" opened="0"]Pellentesque venenatis est ut mauris hendrerit imperdiet.[/wpdiscuz-feedback] Nulla ut quam dui. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa volutpat nec. Nulla ultrices ipsum erat, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.[/vc_column_text][vc_column_text text_lead="yes" uncode_shortcode_id="254090"]Lorem ipsum dolor sit amet, [wpdiscuz-feedback id="05qbywuaqz" question="Lorem ipsum" opened="0"]consectetur adipiscing elit.[/wpdiscuz-feedback][/vc_column_text][/vc_column][/vc_row]
Please let me know if you need any more information or access to a demo website.
Kind regards,
Arjan
@Asti, my inlined code is messed up after creating my post and I can no longer edit my post. So I will create a new one below and attach files instead of using the 'code' tags directly in my post.
---
Dear support,
First of all, thank you for creating an amazing plugin!
I am using wpDiscuz on Uncode theme. Uncode uses the WPBakery Page Builder.
I cannot use the Inline Comment Button directly from within the WPBakery Page Builder - Backend Editor. Therefore I just add the 'wpdiscuz-feedback' to the Text of the Text Block Element. This will add the Inline Comments.
Unfortunately, it breaks the Paragraph. Also, link styles are no longer working, line heights are incorrect and text color is wrong. I assume this is because styles are somehow overwritten, or because the text is no longer in a paragraph.
I have included images and I have attached text and HTML below.
The top item in the screenshot is without Inline Comments. The bottom item has Inline Comments added.
Images
Raw Text (as used in WPBakery Page Builder - Text Block Element):
Resulting HTML output:
Raw WPBakery Page Builder code demo page (by switching to Classic Mode):
Please let me know if you need any more information or access to a demo website.
Kind regards,
Arjan
I just sent you an email with the login details. I have prepared a development environment, so it does not matter if you make any changes.
Let me know if you need anything else.
The text which is selected for feedback is being wrapped in a <div> so other parts are separated and inserted in <p> paragraphs. This is designed to use a whole paragraph, which can be line-breaks. So, please don't use a few words in a sentence for the feedback. You should use a text part which can be introduced as a separate paragraph.
Hi @Amit,
Thanks for getting back to me.
Quoting the whole paragraph with Inline Comments is not really useful for me. Only 1 sentence in the paragraph is actually relevant to the question that is asked in the Inline Comment.
On the wpDiscuz demo page I can see Inline Comments being used on 1 sentence within the paragraph. I would very much like to be able to use this behaviour.
Is this issue caused at wpDiscus or at Uncode theme you think?
Kind regards,
Arjan
Hi @Asti,
I just tried your solution to use wpDiscuz Inline Commenting with a whole paragraph. Unfortunately this also does not work with Uncode theme, as text styling is now broken (wrong line-height, wrong link color, wrong text color).
I have updated the example in my test environment. I sent you the login details on 17-6. I have also included a screenshot below. You can see that the third example in the screenshot uses the whole paragraph, but still gives the wrong result.
Let me know what I can do to help you find a solution. I really love this Inline Commenting feature.
All the best,
Arjan
