Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Line Break Tags Added to Scripts and Styles #9056

Open
glsonn opened this issue Aug 16, 2018 · 36 comments
Open

Line Break Tags Added to Scripts and Styles #9056

glsonn opened this issue Aug 16, 2018 · 36 comments
Labels
[Feature] Parsing Related to efforts to improving the parsing of a string of data and converting it into a different f [Feature] Saving Related to saving functionality [Package] Autop /packages/autop [Type] Bug An existing feature does not function as intended

Comments

@glsonn
Copy link

glsonn commented Aug 16, 2018

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):

  • OS: iOS Sierra 10.12.6 on Macbook Pro
  • Browser Firefox
  • Version 61.0.2

Additional context

  • Gutenberg 3.5.0
@tofumatt
Copy link
Member

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.

@tofumatt tofumatt added the [Feature] Block Transforms Block transforms from one block to another label Aug 16, 2018
@glsonn
Copy link
Author

glsonn commented Aug 16, 2018 via email •
edited by tofumatt
Loading

@tofumatt
Copy link
Member

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
Copy link
Author

glsonn commented Aug 16, 2018 via email

@designsimply designsimply added the Needs Testing Needs further testing to be confirmed. label Aug 21, 2018
@SylviaMayfield
Copy link

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

@tofumatt
Copy link
Member

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😊

@spencerfinnell spencerfinnell mentioned this issue Dec 20, 2018
Closed
@shuttermuse
Copy link

shuttermuse commented Jan 4, 2019 •
edited
Loading

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
Copy link
Author

glsonn commented Jan 4, 2019 via email

@glsonn
Copy link
Author

glsonn commented Jan 4, 2019 via email

@shuttermuse
Copy link

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
Copy link
Author

glsonn commented Jan 4, 2019 via email

@glsonn
Copy link
Author

glsonn commented Jan 4, 2019 via email

@shuttermuse
Copy link

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
Copy link
Author

glsonn commented Jan 4, 2019 via email

@SylviaMayfield
Copy link

SylviaMayfield commented Jan 4, 2019 •
edited
Loading

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
Copy link
Author

glsonn commented Jan 4, 2019 via email

@SylviaMayfield
Copy link

SylviaMayfield commented Jan 4, 2019 •
edited
Loading

@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
Copy link
Author

glsonn commented Jan 4, 2019 via email

@shuttermuse
Copy link

shuttermuse commented Jan 4, 2019 •
edited
Loading

"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
Copy link

SylviaMayfield commented Jan 4, 2019 via email

@shuttermuse
Copy link

"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
Copy link
Author

glsonn commented Jan 4, 2019 via email

@shuttermuse
Copy link

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
Copy link

"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
Copy link

@SylviaMayfield Ah ok, got it! Thanks.

@spencerfinnell spencerfinnell mentioned this issue Jan 16, 2019
Closed
@youknowriad youknowriad changed the title Line Break Tags Added to Scripts Line Break Tags Added to Scripts and Styles Apr 22, 2019
@youknowriad youknowriad mentioned this issue Apr 22, 2019
Closed
@youknowriad youknowriad added [Feature] Parsing Related to efforts to improving the parsing of a string of data and converting it into a different f [Component] Serializer [Type] Bug An existing feature does not function as intended [Priority] High Used to indicate top priority items that need quick attention and removed Needs Testing Needs further testing to be confirmed. [Feature] Block Transforms Block transforms from one block to another labels Apr 22, 2019
@aduth aduth self-assigned this Apr 23, 2019
@aduth aduth added the [Package] Autop /packages/autop label Apr 23, 2019
@aduth
Copy link
Member

aduth commented Apr 23, 2019 •
edited
Loading

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.

This was referenced Apr 23, 2019
Merged
Closed
@aduth
Copy link
Member

aduth commented Apr 23, 2019

  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
Copy link

DmitriyYukhanov commented Jun 9, 2019 •
edited
Loading

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> ^^

@gziolo gziolo added [Feature] Saving Related to saving functionality and removed [Component] Serializer labels Oct 10, 2019
@jorgefilipecosta jorgefilipecosta removed the [Priority] High Used to indicate top priority items that need quick attention label Jan 27, 2020
@jonlau
Copy link

jonlau commented Mar 8, 2020

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. :(

@aduth aduth removed their assignment May 25, 2020
@darwin370
Copy link

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:

  • Open post in Gutenberg
  • No changes, no save, no other action
  • "Preview >Preview in new tab"
  • No alert is shown in preview

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:

  • Open post in Gutenberg
  • Edit Some text to Some more text or similar
  • Update post
  • Open post in frontend
  • No alert is shown on frontend

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

@smwcollege
Copy link

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
Copy link

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
Copy link

jmslbam commented Nov 4, 2021

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
Copy link

jmslbam commented Nov 4, 2021

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
Copy link

Zetanova commented Aug 5, 2022

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

It is in the DB without
tags but in the code editor,
the
tags still get added into the <style> tag.

Is there any good workaround out for it?

@mcknightd
Copy link

I'm seeing this same issue appear in an HTML block inside a widget.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] Parsing Related to efforts to improving the parsing of a string of data and converting it into a different f [Feature] Saving Related to saving functionality [Package] Autop /packages/autop [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

autop: Use placeholders to protect script, style tags WordPress/gutenberg