[Escalated to 2nd Tier] beaver builder template: continued issues with and

[Author]

Posts

[jimP]

See this page as example:

hidden link

See uploaded images with preview display from template, then frontend display with errors. (Code in filenames not displayed when uploaded: "Template" is what I see/want when preview; "Display" is what I see on frontend, with errors.)

If you view source, you will see a number of unwanted < /p> and <br /> tags. This issue has plagued me with BB templates in Toolset for years, and I have generally addressed via ouput = "raw," but this seems not to be working anymore.

Here are my related threads, from most recent down:

- https://toolset.com/forums/topic/unwanted-line-breaks-introduced-via-beaver-builder-template/ [most recent, from another site, using Toolset Blocks vs. Views I believe]

- https://toolset.com/forums/topic/line-breaks-added-to-beaver-builder-single-content-template/

- https://toolset.com/forums/topic/beaver-builder-w-shortcode-in-views-content-template-inserts-linefeeds/

- https://toolset.com/forums/topic/toolset-adding-extra-tags-in-content-template-using-beaver-builder/

This issue seems to have appeared in other threads, and in theory the issue was resolved, e.g.,

- https://toolset.com/forums/topic/toolset-adding-extra-tags-in-content-template-using-beaver-builder/

I am happy to do what we can on my end to diagnose, but note that I'm running a multisite, and cannot easily disable all other plugins as you generally request. I'm pretty sure the issue is not with other plugins, but with Toolset with Beaver Builder.

A final note that this referenced site (jimproctor.us/ecotypes) uses the older Views shortcodes, which I prefer to retain; at present Views is not deprecated, but do you expect to do so in near future? I want to be able to plan for any major code changes I'd need to do.

Thank you,

Jim P.

[Waqar]

Hi Jim,

Thank you for contacting us and I'd be happy to assist.

I've read through the past threads that you've shared and the underlying challenge seems to be the same. WordPress uses a filter "the_content" ( ref: https://developer.wordpress.org/reference/functions/the_content/ ) to automatically format the page/post content. However, if the same content is passed through that filter repeatedly, it gets over-processed and we see the extra p or br tags.

If you could share temporary admin login details, I'll be in a better position to understand how the content on the page in question is being generated. After that, we can look into whether this is something that can be improved from the Toolset's side or it would need to be addressed, on a case-to-case basis.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

During testing and research, I was able to narrow this down to an already escalated issue. Extra p and br tags are shown in the Content Template designed with Beaver Builder if that template outputs a Types "WYSIWYG" field.

I'm afraid, I don't have a time estimate to share at the moment, but, I'll keep you updated through this ticket.

For now, a workaround can be to use custom CSS and JS code on a case-to-case basis to hide/remove those extra p and br tags.

For instance, the two layout issues from your screenshots can be fixed through this custom CSS code:

div[role="tablist"] br,
a[role="button"] br {
display: none;
}

It will basically hide any br tags, found inside the tabs and the buttons.

[jimP]

Thank you, Waqar; this is a very helpful reply, clarifying the problem and offering a temporary CSS fix. Please do keep me informed as to when the issue is fixed, as I do depend on WYSIWYG fields.

Though Toolset does not advise on custom CSS, I'd appreciate if, given this escalated issue, any thoughts on temporarily removing extra </p> tags, which unfortunately can't use a role= selector, nor seem to have a class identifier that distinguishes them from needed </p> tags in proper content.

Example source with additional tags (from example page: hidden link):

<div class="fl-row fl-row-full-width fl-row-bg-color fl-node-5af3bcb52b62e" data-node="5af3bcb52b62e">
<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-5af3bcb52b664" data-node="5af3bcb52b664">
<div class="fl-col fl-node-5af3bcb52b699" data-node="5af3bcb52b699">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-5af3bcb52b5f8" data-node="5af3bcb52b5f8">
<div class="fl-module-content fl-node-content">
<h5 class="fl-heading">
		<span class="fl-heading-text">What sort of future awaits us? The EcoTypes Future axis addresses our underlying sense of hopelessness vs. hope, of apocalyptic vs optimistic views, as we face our collective future on this planet.</span><br />
	</h5>
</p></div>
</div></div>
</div></div>
</p></div>
</p></div>
</div>

Regards,

Jim P.

[Waqar]

Thanks for the update and glad that my message helped.

Most modern browsers automatically try to close the incorrectly closed/balanced HTML tags, like p tags in this case.

You can target those empty p tags, using the ":empty" selector:

p:empty {
   display: none;
}

[jimP]

Many thanks; that's a useful selector! I await some resolution on your end, but for now those two CSS fixes are helping with display.

Regards,

Jim P.