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>
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.
Could you please leave the URL where we can see the issue?
In case you want to say thank you! 🙂 We'd really appreciate if you leave a good review on the plugin page. This is the best way to say thank you to this project and the support team.
@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 onUncodetheme. 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):
We still need the URL to check the issue. It may be a simple CSS conflict.
In case you want to say thank you! 🙂 We'd really appreciate if you leave a good review on the plugin page. This is the best way to say thank you to this project and the support team.
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.
In case you want to say thank you! 🙂 We'd really appreciate if you leave a good review on the plugin page. This is the best way to say thank you to this project and the support team.
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?
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.
Please wait a bit. We'll get back to you very soon.
In case you want to say thank you! 🙂 We'd really appreciate if you leave a good review on the plugin page. This is the best way to say thank you to this project and the support team.
I also asked the Uncode theme support for their help. I have copied their reply below. The wpDiscuz <div> will break the theme text styling. The text styling needs the <p> tag.
As a demo, Uncode support simply changed the wpDiscuz <div> to a <p> using the browser HTML inspect, but this of course will break wpDiscuz Inline Commenting button. Uncode support says the problem is not with their theme, but with wpDiscuz plugin.
Hope this is of any help.
Okay did some digging and the plugin is being using all the text is being added between a <div> tag with the class "wpd-inline-shortcode wpd-inline-closed" and then the <p> tags are removed.
The styling uses the <p> tags for the text block.
Added between a <p> instead and you can see the styling is immediately correct in this screenshot:
Two things you should know. Please follow them. There is no other explanation and solution to your issue:
1. WordPress itself and page builder plugins close paragraph tags (</p> ) when they find shortcode opener tag "[" so, the text before "[" shortcode opener will always be closed by </p> paragraph. And the paragraph tag will get full line and the shortcode content will be moved to net line. The same behavior can be seen with <div> tag. Shortcodes are replaced with <div> they cannot be replaced to <p> because they contain structural data, not a simple text. So there is no way to keep a text before shortcode in the same line.
2. As you can see in the screenshot, we always use the start of a paragraph as a start of inline comment shortcode. The shortcode always starts from the beginning of a paragraph. And it can be closed in the middle of a paragraph. So it becomes inline without any problem. You are not required to use the whole paragraph for inline comment, but you are required to use it from the beginning of the paragraph if you want to have an inline content.
