search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

Line Break Tags Added to Scripts and Styles #9056

Open glsonn opened 6 years ago

glsonn commented 6 years ago

Apologies if this has been covered. I did search.

I activated Gutenberg for a site that has been in existence for a while. That is, it already had existing posts and pages. It wasn't a brand new site.

I edited an existing Post that had an Amazon native search ad script at the bottom. After Updating, I viewed the post and noticed the ads were apparently missing.

The script code was still there, but a br tag had been added after each line. The script from Amazon was multi-line, broken after each semicolon.

I deleted the tags and all was fine. I then deactivated Gutenberg (for now).

Desktop (please complete the following information):

Additional context

tofumatt commented 6 years ago

Would you be able to provide a reference copy of the content of your post? I understand you might not be able to provide an exact copy because of the contents of your ad script, but something close we could test conversion from Classic Editor post to Gutenberg post would be great–it would help us diagnose what is being converted incorrectly.

glsonn commented 6 years ago

Here is what the script looks like with Gutenberg active following an edit to the Post:


I altered the tracking ID and linkid above. Let me know if the html does not come through in this email.

Gary

tofumatt commented 6 years ago

It does come through, but if you could paste an unedited-by-Gutenberg, before being edited by Gutenberg version of the content so we can try to convert it ourselves that'd be great.

If you paste the content via GitHub we can style the HTML a bit better, but email works too 😄

Thanks!

glsonn commented 6 years ago

This is from the very end of the Post.

Before:

Overall, this is a good, solid, basic bipod, which is what the majority of users want. The price is in the midrange compared to other similar models.

<a href=" https://www.amazon.com/Sonicking-Adjustable-Hunting-Rifle-Tactical/dp/B073CSWM13/ref=as_li_ss_tl?ie=UTF8&amp;qid=1530889174&amp;sr=8-1&amp;keywords=sonicking+bipod&amp;dpID=41uuYMJLGDL&amp;preST=_SY300_QL70_&amp;dpSrc=srch&amp;linkCode=ll1&amp;tag=mmpsonickingbipod-20&amp;linkId=1096c69eeb4a48c9442497e89ea466d9" rel="nofollow">Check the pricing and availability of the Sonicking Adjustable Rifle Bipod on Amazon today.

[helpful]

After:

Overall, this is a good, solid, basic bipod, which is what the majority of users want. The price is in the midrange compared to other similar models.

<a href=" https://www.amazon.com/Sonicking-Adjustable-Hunting-Rifle-Tactical/dp/B073CSWM13/ref=as_li_ss_tl?ie=UTF8&amp;qid=1530889174&amp;sr=8-1&amp;keywords=sonicking+bipod&amp;dpID=41uuYMJLGDL&amp;preST=_SY300_QL70_&amp;dpSrc=srch&amp;linkCode=ll1&amp;tag=mmpsonickingbipod-20&amp;linkId=1096c69eeb4a48c9442497e89ea466d9" rel="nofollow">Check the pricing and availability of the Sonicking Adjustable Rifle Bipod on Amazon today.

[helpful]


Let me know if you need more.

Gary

On Thu, Aug 16, 2018 at 4:05 PM Matthew Riley MacPherson < notifications@github.com> wrote:

It does come through, but if you could paste an unedited-by-Gutenberg, before being edited by Gutenberg version of the content so we can try to convert it ourselves that'd be great.

If you paste the content via GitHub we can style the HTML a bit better, but email works too 😄

Thanks!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-413684644, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeXeDJYYEWsMPa38u7hcn8ncBjN7lks5uRd6egaJpZM4WARet .

SylviaMayfield commented 5 years ago

Any news on this issue? I'm having same problem. :(

tofumatt commented 5 years ago

No news as of yet: if there are any updates we will post them in the issue 😊

You can subscribe to any issue you’d like updates to on GitHub in the future, but rest assured when we know more we’ll post here😊

shuttermuse commented 5 years ago

This has happened to me as well, and I'm guessing that it also happened to every other Amazon associate that uses ad code within their posts. Even if you open an old post to edit it, it converts everything right away, adds br tags and breaks the ads.

glsonn commented 5 years ago

I thought for sure this would have been fixed before 5.0 came out, but it hasn't. Not even by 5.0.2.

Come on, guys, this is a big one. Can we get it done in 5.0.3 or 5.1?

Gary

On Fri, Jan 4, 2019 at 3:47 AM shuttermuse notifications@github.com wrote:

This has happened to me as well, and I'm guessing that it also happened to every other Amazon associate that uses ad code within their posts. The problem is that it doesn't just do it to new posts, it has done it to every old post as well.

It has broken every Amazon ad on every post and page!! What's worse is that people probably don't even realize it has done this and every day it will be costing them earnings. I think this is a pretty major issue, and on my own site I don't even know what to do about it. I have hundreds of pages with ads that are broken, but I can't fix them because it just keeps adding the br tags back again.

Switching back to Classic Editor doesn't undo the br tags that it has added, so there's no way back that I can see. Apart from downgrading bak to wp4.something and then painstakingly going through hundreds and hundreds of posts to delete the br tags.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451398434, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeejCKMEWZ9_HCuZIV_9Xd81zpABOks5u_yMggaJpZM4WARet .

glsonn commented 5 years ago

After examining my several sites, I'm now confused. On some of them, the Amazon Native Shopping Ads show up just fine, even with the line breaks within the script. On others, the ads do not show until I remove the script. So far, I can't see a difference between these instances.

Gary

On Fri, Jan 4, 2019 at 9:56 AM Gary Sonnenberg gsonnenberg@gmail.com wrote:

I thought for sure this would have been fixed before 5.0 came out, but it hasn't. Not even by 5.0.2.

Come on, guys, this is a big one. Can we get it done in 5.0.3 or 5.1?

Gary

On Fri, Jan 4, 2019 at 3:47 AM shuttermuse notifications@github.com wrote:

This has happened to me as well, and I'm guessing that it also happened to every other Amazon associate that uses ad code within their posts. The problem is that it doesn't just do it to new posts, it has done it to every old post as well.

It has broken every Amazon ad on every post and page!! What's worse is that people probably don't even realize it has done this and every day it will be costing them earnings. I think this is a pretty major issue, and on my own site I don't even know what to do about it. I have hundreds of pages with ads that are broken, but I can't fix them because it just keeps adding the br tags back again.

Switching back to Classic Editor doesn't undo the br tags that it has added, so there's no way back that I can see. Apart from downgrading bak to wp4.something and then painstakingly going through hundreds and hundreds of posts to delete the br tags.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451398434, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeejCKMEWZ9_HCuZIV_9Xd81zpABOks5u_yMggaJpZM4WARet .

shuttermuse commented 5 years ago

Strange. Can you share the url of a page where it is working?

I have 4 sites and it broke the ads on all of them.

glsonn commented 5 years ago

Sure. This Post still has the line break tags within the Amazon script:

https://opticsoasis.com/sonicking-adjustable-rifle-bipod-a-solid-newcomer/

The ads are at the end of the post.

Gary

On Fri, Jan 4, 2019 at 1:39 PM shuttermuse notifications@github.com wrote:

Strange. Can you share the url of a page where it is working?

I have 4 sites and it broke the ads on all of them.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451546980, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeZG_jEt9WfHvsXj7DDoKT0ZReSZAks5u_64EgaJpZM4WARet .

glsonn commented 5 years ago

Sorry, I don't think I replied to all the first time.

This Post still has the line break tags within the Amazon script:

https://opticsoasis.com/sonicking-adjustable-rifle-bipod-a-solid-newcomer/

The ads are at the end of the post.

Gary

On Fri, Jan 4, 2019 at 1:39 PM shuttermuse notifications@github.com wrote:

Strange. Can you share the url of a page where it is working?

I have 4 sites and it broke the ads on all of them.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451546980, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeZG_jEt9WfHvsXj7DDoKT0ZReSZAks5u_64EgaJpZM4WARet .

shuttermuse commented 5 years ago

No, the ads don't display for me. Perhaps you had some browser caching going on. Definitely not working as far as I can see.

glsonn commented 5 years ago

Ok, thanks. Or maybe my being logged in.

Gary

On Fri, Jan 4, 2019 at 1:45 PM shuttermuse notifications@github.com wrote:

No, the ads don't display for me. Perhaps you had some browser caching going on. Definitely not working as far as I can see.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451548671, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeZNC-KeMYcIIEEv-Lr8Zi6VwW2bgks5u_69lgaJpZM4WARet .

SylviaMayfield commented 5 years ago

Ok, I know I'm usually contrary, but this is weird. Since posting my problem, WP/GTB has updated to 5.02. When I saw your posts, I went to check one of my 7 sites.

I have some posts that I haven't converted to Gutenberg blocks; everything is in one giant Classic block. (Am updating as I go). Within that giant Classic block, the code appears correctly. The Amazon ads are showing properly on the post UNTIL I update that post without converting it to Gutenberg blocks. Now I have the
tags too and the ads aren't showing. Gone. That's this page:

https://home-sweet-decor.com/a-babysitter-notebook-is-super-handy-and-gives-you-peace-of-mind/

In my 'Gutenberg block posts' (those created after the update), I have the Amazon code in a Custom HTML block. The code appears correctly both in the editor and on the published post. That's this page:

https://home-sweet-decor.com/soccer-wall-clocks/

When converting some posts to Gutenberg, I found that the code would get messed up with
tags if I just copied it over to it's new Custom HTML block. The code HAD to be freshly generated. That one has me stumped. It was working in the post BEFORE updating, but copying it from it's old Classic block to a new Custom HTML block of it's own, breaks it. Now there's a headscratcher. :)

Hope the extra detail helps a little. :) I did clear my browser cache.

Best, Sylvia

glsonn commented 5 years ago

I haven't converted any Classic Blocks. My ads are not showing because of the line break tags in those blocks.

My theme is usually Twenty Sixteen, in case that matters.

Gary

On Fri, Jan 4, 2019 at 2:58 PM SylviaMayfield notifications@github.com wrote:

Ok, I know I'm usually contrary, but this is weird. Since posting my problem, WP/GTB has updated to 5.02. When I saw your posts, I went to check one of my 7 sites.

I have some posts that I haven't converted to Gutenberg blocks; everything is in one giant Classic block. (Am updating as I go). Within that giant Classic block, the code appears correctly. The Amazon ads are showing properly on the post UNTIL I update that post without converting it to Gutenberg blocks. Now I have the tags too and the ads aren't showing. Gone. That's this page:

https://home-sweet-decor.com/a-babysitter-notebook-is-super-handy-and-gives-you-peace-of-mind/

In my 'Gutenberg block posts' (those created after the update), I have the Amazon code in a Custom HTML block. The code appears correctly both in the editor and on the published post. That's this page:

https://home-sweet-decor.com/soccer-wall-clocks/

When converting some posts to Gutenberg, I found that the code would get messed up with tags if I just copied it over to it's new Custom HTML block. The code HAD to be freshly generated. That one has me stumped. It was working in the post BEFORE updating, but copying it from it's old Classic block to a new Custom HTML block of it's own, breaks it. Now there's a headscratcher. :)

Hope the extra detail helps a little. :) I did clear my browser cache.

Best, Sylvia

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451566344, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeSvFh7Y__rGCRQtdgvTX-h6QHAWlks5u_8BZgaJpZM4WARet .

SylviaMayfield commented 5 years ago

@glsonn Did you open those posts and update anything in them or maybe just exit the post? Seems like it's happening right in there someplace. On mine the tags got added after I updated the post in any way.

Even if I didn't update anything in that post, I have to click the Update button. You get the "Are you sure you want to leave" box if you don't.

So even though I may just have opened them to look (like the babysitter post) - I had to click the Update button to exit the editor and then I had the tags and the ads poofed.

hth Sylvia

glsonn commented 5 years ago

I see a post on my site that isn't showing the ads. I click Edit, then Edit as HTML. I see the br tags and delete them.

These posts have not been touched since the Gutenberg update (until today, of course).

Gary

On Fri, Jan 4, 2019 at 3:15 PM Sylvia notifications@github.com wrote:

@glsonn https://github.com/glsonn Did you open those posts and update anything in them or maybe just exit the post? Seems like it's happening right in there someplace. On mine the tags got added after I updated the post in any way.

Even if I didn't update anything in that post, I have to click the Update button. You get the "Are you sure you want to leave" box if you don't.

So even though I may just have opened them to look (like the babysitter post) - I had to click the Update button to exit the editor.

hth Sylvia

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451570546, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeYGdBmLFFC1yxTOO0OHZq0KxHUcpks5u_8RxgaJpZM4WARet .

shuttermuse commented 5 years ago

"UNTIL I update that post without converting it to Gutenberg blocks."

Yes that's exactly when it happens. The problem is that it will keep adding them back even if you keep editing them to remove them. If you delete the br tags and press the update button it'll just add them all back.

The way around it is to warp the ad code in <!-- wp:html --> AD CODE <!-- /wp:html --> by using the HTML editor view on your one giant classic block.

It's finicky though. Sometimes it is also adding some p tags in there too and you need to get rid of those.

Sadly this means if you edit old posts you are going to have to keep performing this fix on every one you open. I don't even think you have tp press the update button. If you wait one minute it autosaves and I think that also adds the tags.

SylviaMayfield commented 5 years ago

That will probably help @glsonn. As for me, I'm updating old posts to Gutenberg as fast as possible and resisting the urge to open pre-Gutenberg posts. lol As long as they are still showing for now and until I get to convert the posts, I'm happy. ;)

http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Virus-free. www.avg.com http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

On Fri, Jan 4, 2019 at 3:45 PM shuttermuse notifications@github.com wrote:

"UNTIL I update that post without converting it to Gutenberg blocks."

Yes that's exactly when it happens. The problem is that it will keep adding them back even if you keep editing them to remove them. If you delete the br tags and press the update button it'll just add them all back.

The way around it is to warp the ad code in AD CODE by using the HTML editor view on your one giant classic block.

It's finicky though. Sometimes it is also adding some p tags in there too and you need to get rid of those

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451577523, or mute the thread https://github.com/notifications/unsubscribe-auth/Apd9rjtdcfpc4APL77-LI5WovxAXUF-Kks5u_8tdgaJpZM4WARet .

--

Home Sweet Decor https://home-sweet-decor.com

Creative Costume Ideas https://creative-costume-ideas.com

Fancy Gift Wrap https://fancygiftwrap.com

shuttermuse commented 5 years ago

"I'm updating old posts to Gutenberg as fast as possible"

Can you explain this? What do you mean updating them? As far as I can see, if you open an old post then it breaks the ads.

glsonn commented 5 years ago

I guess for now I'll edit them to remove the tags and then leave them alone until the situation is corrected.

Or if I really have to edit them, make sure to delete the tags again.

Gary

On Fri, Jan 4, 2019 at 3:56 PM shuttermuse notifications@github.com wrote:

"I'm updating old posts to Gutenberg as fast as possible"

Can you explain this? What do you mean updating them? As far as I can see, if you open an old post then it breaks the ads.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/9056#issuecomment-451580243, or mute the thread https://github.com/notifications/unsubscribe-auth/AoeyeRO-jZKf0FIGONs4wDM0xwgbjXJTks5u_84JgaJpZM4WARet .

shuttermuse commented 5 years ago

For what it's worth, I also have Amazon on this now too and they are looking into it. I'm not sure WordPress is going to correct this because it seems to be the behaviour they desire. If Amazon can adjust their own script to still display the code even when there are line breaks in it, that might end up being the answer.

I have spent all morning going back through old posts and painstakingly fixing them.

SylviaMayfield commented 5 years ago

"I'm updating old posts to Gutenberg as fast as possible"

Can you explain this? What do you mean updating them? As far as I can see, if you open an old post then it breaks the ads.

Oh sorry, by updating old posts I mean that I'm breaking up that giant classic block into the appropriate Gutenberg blocks. The posts need product updates anyway, so they get a good freshening up and changed over to Gutenberg.

It goes faster than I thought it would & it's not as hard as I thought it would be. whew

Best, Sylvia

shuttermuse commented 5 years ago

@SylviaMayfield Ah ok, got it! Thanks.

aduth commented 5 years ago

I'm currently investigating this issue, and can reproduce the problem. I've tracked it down to a combination of problems stemming from Gutenberg's port of the the wpautop function (a JavaScript implementation of the equivalent PHP function), and issues in the underlying wpautop implementation itself.

For context, Gutenberg does not perpetuate the automatic br / p insertion ("wpautop") which had existed in WordPress prior to its introduction (source). To remain compatible with older content, however, it runs existing content through this process when loaded into the editor. The result would be saved to the post. The problems you're seeing are due to this behavior. The one exception to this is that if the post consists only of the classic block, autop will not be applied, i.e. when loading a post from prior to WordPress 5.0 which has no blocks of its own (see #8077).

The port:

  1. The PHP implementation uses regular expression backreferences. These are not supported in JavaScript regular expressions, and thus the pattern is not matched.
  2. JavaScript regular expressions, unlike PHP, do not include newlines in dot (.) matches (except with ES2018 s flag), so multi-line patterns are not always matched. Elsewhere in the port we used [\s\S] as a substitute, but this was not applied consistently.

Underlying issues with wpautop

The above would resolve issues with newlines being converted to br elements within script and style tags. However, there are still issues present when multiple consecutive line breaks exist within these tags. This problem also exists in the existing PHP implementation, and likely would have always affected script and style tags on the front-end of a site prior to Gutenberg.

Relevant Trac ticket: https://core.trac.wordpress.org/ticket/2833

For this reason, it's likely that a fix would involve a coordinated effort to resolve the issue across both the PHP and JavaScript implementations.

As far as immediate action items, I have a working resolution to the specific issue of the problematic ported implementation, which would resolve the addition of br elements in replacing newlines in script and style tags. I will plan to open a pull request shortly.

aduth commented 5 years ago
  1. The PHP implementation uses regular expression backreferences. These are not supported in JavaScript regular expressions, and thus the pattern is not matched.

Correction: They are supported, but the first of the linked code snippets escaped the backreference, so it was not matched.

The pull request at #15129 should resolve all issues here, including the addition of both br and p elements within script and style tags, and the wrapping p tag of a script element.

DmitriyYukhanov commented 5 years ago

Hey, @aduth

Thank you for your PR! Any chance to see it merged, looks like it have only changelog merge conflicts out there?

Really tired of <br> and <p> in my <script> ^^

jonlau commented 4 years ago

I'm assuming this issue still isn't resolved? I'm on a fresh copy of WordPress, and when I copy code from a service (ServiceInBlue) and I paste it into the HTML code editor, it keeps adding those pesky
tags. :(

darwin370 commented 3 years ago

Similar problem here with WordPress 5.6.1, Twenty Twenty-One 1.1, no plugins.

Some old pre Gutenberg post has content like this (simplified):

Some text...
<script type="text/javascript">
alert(1);
</script>

Post works fine in frontend, shows text and alerts "1".

Testcase 1:

View source of preview in browser shows broken script with added tags:

<p>Some text...<br />
<script type="text/javascript"><br />
alert(1);<br />
</script></p>

Testcase 2:

View source of frontend in browser shows same as case 1, broken script with added tags.

smwcollege commented 3 years ago

We also ran into this issue a couple days ago on WP 5.6.0. Easy enough to manually fix on a case-by-case basis, but it threw me through a loop at first.

MadtownLems commented 3 years ago

This bug seems to persist on 5.7.2. Clicking "Convert to Blocks" on some content that contains javascript continues to add
to the end of each line, thus breaking the javascript of course.

jmslbam commented 2 years ago

I had this also with a overwritten PHP template from Download Monitor.

The PHP template had a newline in it, because it was visualy formating my code in my PHP file.

$button = '<a class="button button-download button-icon" title="'. $version . '" href="' . $dlm_download->get_the_download_link() . '" rel="nofollow">
    <span>' . __( 'Download', 'dlm_page_addon' ) . ' <span class="title">' . $dlm_download->get_the_title() . ' ' . \IAB\Theme\SVG::inline_svg('icons/download') . '</span></span>
</a>';

And voila, a <br> was shown in my HTML code on the front-end. Right after the opening <a>. So I made everything inline and it dissapeared.

Ciao!

jmslbam commented 2 years ago

Well heck, these breaks and extra paragraph tags are even showing up in my Gravity Forms Gutenberg output on the front-end. I will try to do some extra research for some more information. Kinds regards, Jaime

Zetanova commented 2 years ago

I encountered this issue today with wp 6.0.1 The content got updated over the wp-api including a