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
