#85 – AMP makes break-tags from whitespace

Posted in ‘weeblrAMP’
This is a public ticket. Everybody will be able to see its contents. Only enter usernames, passwords or any other sensitive information in the Private information field.
Thursday, 17 May 2018 00:25 UTC

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
Thursday, 17 May 2018 07:05 UTC

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
Thursday, 17 May 2018 07:48 UTC

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
Thursday, 17 May 2018 07:53 UTC

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

Thursday, 17 May 2018 16:35 UTC
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>

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.

Thursday, 17 May 2018 17:40 UTC

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

Best regards

Thursday, 17 May 2018 17:41 UTC
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.
Thursday, 17 May 2018 17:42 UTC
OK, I will wait, thank you
Monday, 21 May 2018 11:02 UTC

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

Monday, 21 May 2018 22:30 UTC

This works nice. The breaktags are gone. Great!

Thank you.
This ticket is closed, therefore read-only. You can no longer reply to it. If you need to provide more information, please open a new ticket and mention this ticket's number.