#85 – AMP makes break-tags from whitespace

 Hi

Mi page contains some whitespace, seemingly newlines and tabs, within its Html. That's within a link-tag / button.
In AMP I see break-tags <br> within link-tags <a>. That causes problems to display a nice button in AMP.
Whitespace in Html should be mostly ignored, only one space is displayed.
Where come those break-tags from? Is it from the newlines? Can you fix that?


Best regards

Hi

No, whitespace, newlines and tabs will not create <br /> tags in visible AMP content, they are pretty standard and present in most content.

Can you fix that?

If what happens on your site is coming from weeblrAMP, yes, most likely.

Looking at your sample page, I think it's coming from BeaverBuilder, which also has an "autop" feature similar to Wordpress (ie it automatically creates a <p> tag when there's a return character in edited content). As the WP one is standard, we nuke it. If BB does the same, we may have to also find a way to nuke it as well.

I'll try see if I can reproduce that locally, which would be needed to trace the code ran by BB.

We're travelling to a conference today so I may not be able to touch on this before next monday though. I'll keep you posted.

Best regards

Hi

Unfortunately, I won't be able to test this as Call to action module appears to be only available in the premium version of BB. I'll do a few more tests with the other modules to see if the problem appears as well (but I've never seen it before).

Best regards

Hi

One thing we could do is if you let me install our copy of the Duplicator plugin. I can then run a backup of your test site and install locally, which will allow me to debug the issue, most likely.

Best regards

One thing we could do is if you let me install our copy of the Duplicator plugin.
Yes you can do that



I think it's coming from BeaverBuilder, which also has an "autop" feature similar to Wordpress
Yes I see in the normal WP text editor:

<a href="/">
Click Here</a>

converts to:

<p><a href="/"><br>
Click Here</a></p>

<p>...</p> is added and within the link <a> if there is a newline





In Chrome - developer tools in the No-Amp version of the BB page the <a> tag when "edit as Html" shows as:

<a href="/" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Click Here</span>
</a>

I.E. no <P> nor <br> was inserted but there is whitespace.
That is: the output from BeaverBuilder to the browser itself does not have added <br> but it does contain whitespace which in some point could produce <br> tags.

Hi

I will work on this time-permitting as I'm travelling. Probably only next week.

Best regards

A workaround I found is to suspend the display of break tags with CSS in Weeblr - customize - Custom Styles:

For specific Beaver Builder Call to Action module:
.fl-module-cta a br {display: none;}

For any break within links:
a br {display: none;}


But that's only a workaround, I don't expect common users to struggle that much.

OK, I will wait, thank you

Hi

So I did take a backup, found out where the autop was performed and added a filter to the process so that autop can be disabled on the AMP version of BeaverBuilder and that fixed the br tag issue on your sample page (I installed version 1.9.1 over 1.9.0 on your test site).

This dev version is available from the development versions download area, should you need to install it elsewhere.

Best regards

Hi

This works nice. The breaktags are gone. Great!

Thank you.