[Resolved] beaver builder w/ shortcode in views content template inserts line breaks

[Author]

Posts

[jimP]

I am trying to: Insert shortcode from a WordPress plugin (ZotPress) into a Beaver Builder-based content template.

I expected to see: Implemented shortcode. Indeed, I do see the correct text (bibliography), except...

Instead, I got: At the top of the displayed text are ~24 line breaks, thus the text starts way down on the page. For one example line break, see my support post to ZotPress:

https://wordpress.org/support/topic/zotpressbeaver-builder-issue/

The example cited above (just one line) is:

<span class="ZP_ITEM_KEY" style="display: none;"></span><br>

See the attached screenshot for source with all line breaks.

I have now verified that the problem is *not* ZotPress and Beaver Builder, as if I simply build a page on my site using Beaver Builder and ZotPress all works fine, i.e., that line above on a regular page would be rendered as:

<span class="ZP_ITEM_KEY" style="display: none;"></span>

This suggests that the problem is not due to another plugin or my theme. The problem is *only* if I enter this exact same shortcode (or a Toolset field containing the shortcode) into a Beaver Builder-based content template for a Toolset-based CPT, then display an instance of this CPT.

I have confirmed that the content template Output Mode setting at bottom is to "Manual paragraphs," if this matters.

I would appreciate if you have further clues!

Many thanks,

Jim P.

[jimP]

I am now seeing that this Toolset Beaver Builder content template integration has more general problems with line breaks (and paragraphs) than the ZotPress issue I initially reported. I found this earlier post that I believe is relevant:

https://toolset.com/forums/topic/buttons-have-padding/

The support response suggests a general problem with <p> and <br> tags, and this is what I see when I view source. See the two screenshots attached, of the same BB template, initially developed via Toolset CPT content template then exported and simply used for a regular page. You will see that the vertical spacing is entirely different. The reason, when I view source on a CPT controlled by this template, is a whole bunch of extra <p> </p> and <br> tags here and there.

My questions at this point:

• Will this be fixed in the near term? The support thread above was from Oct 2016 and the problem appears to persist.
• Does some modification of that Javascript workaround mentioned in the above support thread work as a possible temporary fix? The problem is that these <p> and <br> tags are found in a variety of contexts.
• Should I just switch for now to building the content template using Toolset Layouts instead of Beaver Builder, i.e., does this problem disappear when I use a relatively similar, and Toolset-native, page builder?

Many thanks for your help.

Jim P.

[jimP]

Sorry, still hunting through your support threads, and I see another one that definitely sounds relevant:

https://toolset.com/forums/topic/content-template-adding-extra-p-and-br-tags-with-beaver-builder/

Btw, my Toolset/Beaver Builder plugins are all latest (BB Pro 1.10.6.3).

Unfortunately, this support thread seems to have died without resolution! But it seems to be exactly the larger problem I'm now seeing. Below is a representative view source snippet to suggest how the <p> and <br> tags are being added:

<div class="fl-button-wrap fl-button-width-auto fl-button-center">
			<a href="#deep-dive" target="_self" class="fl-button" role="button"><br />
							<span class="fl-button-text">Deep Dive</span><br />
					</a>
</div>
</p></div>
</div></div>
</div></div>
</p></div>
</div></div>
</p></div>
</p></div>
</div>
<div id="survey-items" class="fl-row fl-row-full-width fl-row-bg-none fl-node-59740c53bda1a" data-node="59740c53bda1a">
<div class="fl-row-content-wrap">
<div class="fl-row-content fl-row-full-width fl-node-content">
<div class="fl-col-group fl-node-59740c53c32f2" data-node="59740c53c32f2">
<div class="fl-col fl-node-59740c53c342f" data-node="59740c53c342f">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-59740c23292a3" data-node="59740c23292a3">
<div class="fl-module-content fl-node-content">
<h3 class="fl-heading">
		<span class="fl-heading-text">Survey Items</span><br />
	</h3>
</p></div>
</div></div>
</div></div>
</p></div>
</p></div>

Though I started this support thread with a concern re. <br> tags (and the vertical spacing issue with the button appears to be a <br /> tag), the bigger problem in this section of source seems to be the </p> tags, associated with </div> tags and not apparently matched with preceding <p> tags. They seem to be what is adding all that extra unwanted vertical space.

One final note re. my third bullet point above: I have experimented with your Layouts plugin to define the CPT template in place of Beaver Builder, and want to proceed with Beaver Builder given it has some features Layouts do not support.

So, let's see if there is appropriate code I could enter into BB Page Builder to strip these unwanted tags.

Many thanks for your support,

Jim P.

[Beda]

1. The issue here:
https://toolset.com/forums/topic/content-template-adding-extra-p-and-br-tags-with-beaver-builder/#post-540027

Cannot be solved by us.
It is an edge case that is present in WordPress per se.

2. The issue here:
https://toolset.com/forums/topic/buttons-have-padding/

This is still in the work, and it's planned for Views 2.6 and that is quite a bit in the future.
Also, unfortunately, Beaver Builder terminated its cooperation with us, so we can only grant limited assistance.
We can ensure that all keeps working and try to solve bugs, but we can as example not enhance the integration much more or solve things that seem bugs but are new features.

3. I added your ticket to the inner issue tracker so that maybe gets more focus.

For now, most of your issues (if solvable) will be solved by using the output="raw" attribute in the Toolset ShortCodes or using no-autop wrapping wherever possible
https://toolset.com/documentation/user-guides/views-shortcodes/ > wpv-noautop
https://toolset.com/documentation/customizing-sites-using-php/functions/ > output: 'raw' | 'html' | 'normal'(default)

Thank you for your patience and report.

[jimP]

I'm going to mark this issue as resolved now, but I will do further testing to verify that your recommendations work, which I believe they will do. For the information of others, here is what I did to resolve the problem:

• I had already configured this CPT content template as "Manual paragraphs" under Output Mode at bottom.
• Following Beda's advice, I went through each and every Types field on the template for which output='raw' was an option, and added this to the shortcode.

Note that with even one Types field not doing raw output, the entire rendered page is altered as per my previous posts/screenshots, not just the area around that particular field.

I will continue to test, but I appreciate your response, and hope that Toolset and Beaver Builder continue to find a way so as to ensure interoperation.

Regards,

Jim P.