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

Paragraph tags stripped? #11211

Closed Blogography closed 5 months ago

Blogography commented 5 years ago

When editing old posts where I use hand-coded HTML markup to define structure, I use <p> tags to set off paragraphs. But Gutenberg strips these out no matter what I do... even though the "block" is defined as "Classic" and should (theoretically) keep its original formatting? Is there a way of making sure that Gutenberg doesn't strip my markup on old entries in "Classic" so I can make small edits?

designsimply commented 5 years ago

May I ask for a little more information?

Are using the plugin (and which version) or if you are using WordPress 5.0 beta?

Would it be possible for you to include a sample of HTML for testing purposes? I think you mean you are including empty paragraphs such as <p></p> but I am not 100% sure.

Blogography commented 5 years ago

Wordpress is 4.9.8 Gutenberg is the latest build I could find... 4.1.1

Any time I insert blank lines, I always write it with non-breaking spaces, because some early browsers would ignore paragraph tags with empty content. Like this... <p>&nbsp; &nbsp;</p>

The hand-coding is all pretty standard. Here is a snippet from my latest entry, which was written in the old editor. When I attempted to correct a misspelling in Gutenberg, the paragraph tags were all stripped out... even when I verified it was in a "Classic" block...

UPDATE: Welp, nothing I do will make Github display this as code? `

Dave!First of all...

CONGRATULATIONS BOSTON RED SOX... MAJOR LEAGUE BASEBALL WORLD SERIES CHAMPIONS!

Dave Loves the Red Sox!

I wish I could say that I never doubted... but there were definitely some moments! That third game? EIGHTEEN INNINGS loss to The Dodgers? Brutal. And I watched the entire thing from beginning to end while holding my breath. Last night was easier, but I was still a bit anxious all the way through. This is baseball, after all.

` Thanks!
earnjam commented 5 years ago

You can insert empty paragraph blocks and they will not be removed.

Blogography commented 5 years ago

From what I can tell, Gutenberg deletes ALL paragraph tags from "Classic" posts... unless they have been styled with inline CSS... if you make any changes in the editor.

mrwweb commented 5 years ago

I was unable to reproduce my understanding of the behavior.

  1. Create Classic block
  2. Edit the block with HTML to add empty paragraph tags of various sorts (see below)
  3. Convert back to visual (and back and forth again for good measure)

The &nbsp;'s were converted to spaces in HTML mode (that does seem like a bug) and spaces were inserted into each paragraph, but other than that, but non paragraphs disappeared.

HTML:

<p></p>
<p>&nbsp;&nbsp;</p>
<p class="p"></p>
<p style="border: 1px solid tomato;"></p>

After switching to visual mode and back to HTML (identical)

<p></p>
<p>&nbsp;&nbsp;</p>
<p class="p"></p>
<p style="border: 1px solid tomato;"></p>

After switching to visual mode, clicking into each paragraph, and switching back to HTML mode (white space added/converted)

<p> </p>
<p>  </p>
<p class="p"> </p>
<p style="border: 1px solid tomato;"> </p>

Win 10, Firefox 63, WP 5.0-beta1-43832

Blogography commented 5 years ago

I am not creating new entries with a classic block. I am editing old entries. This happens consistently when I load up an entry NOT created in Gutenberg, see it appear in a "Classic" block, change a character, update, then load the entry and find that all the paragraph tags have been stripped.

earnjam commented 5 years ago

So it looks like what is happening is the Classic Block converts non-breaking spaces to regular spaces on load. Then it strips any paragraphs that only contain regular spaces on save.

I can replicate by either using a post created in classic editor with paragraph with &nbsp; in it as @Blogography mentioned. OR:

  1. Adding a Classic block
  2. Add multiple paragraphs inside the classic block.
  3. Edit Classic block as HTML
  4. Insert an &nbsp; into an empty paragraph.
  5. Save.
  6. Post is saved with &nbsp; as expected and shows properly on the front-end.
  7. Refresh the editor
  8. View HTML of Classic block. &nbsp; is converted to regular space.
  9. Save.
  10. View the front-end and see that empty paragraph is now gone.
  11. Refresh editor and see that paragraph with the space only is now removed.
timnicholson commented 5 years ago

This same issue happens even when adding new content to a classic block. I added this in HTML mode:

<p></p>
<p> </p>
<p>&nbsp;</p>
<span>&copy;</span>
<p>This is a classic block with <p> tags in it</p>

...and it converted it to this after switching back to visual mode:

<p> </p>
<p> </p>
<p> </p>
<p>©</p>
<p>This is a classic block with &lt;p&gt; tags in it</p>

I'm running the latest Gutenberg plugin from WordPress.org (which is 4.1.1 at this time).

TiBiker commented 5 years ago

I'm seeing the same thing in the Gutenberg editor, version 5.0.2. My workflow is:

Compose in Markdown in a text editor (Byword). Paste into MarsEdit and upload, which converts Markdown to HTML. Refresh/sync MarsEdit. Post appears coded in HTML in MarsEdit, with p tags. Open post in Gutenberg. p tags are gone. Close Gutenberg without making changes. Refresh/sync MarsEdit. p tags are still in post in MarsEdit. Open post again in Gutenberg. Make an edit and update/save changes. Refresh/sync MarsEdit. p tags are gone from the post in MarsEdit.

When I compose in Gutenberg, and add p tags to a post manually, then save, the p tags are stripped out too.

Something in Gutenberg is is stripping the p tags out.

AdrienM76 commented 5 years ago

I stumbled on another thread (sorry, don't have it handy) that Jetpack's markdown module might be interfering. It was. I deactivated Jetpack and now my paragraph tags are no longer stripped out. Supposedly though this was fixed in early 2018. I'll try to dig up that issue to report that it has re-appeared.

Blogography commented 5 years ago

I don't have Jetpack or markdown installed... but now I'm wondering if it's another plugin maybe? I dunno. This is incredibly frustrating. I can't edit any of my old entries or else they'll lose their paragraph tags.

earnjam commented 5 years ago

I think the issue here is the classic block should not be converting &nbsp; to a regular space.

WordPress is stripping <p> </p> on a save, but it leaves <p>&nbsp;</p> alone. The problem is that switching to the classic block visual editor converts <p>&nbsp;</p> to <p> </p>.

housebolt commented 5 years ago

Also running into this with legacy content, tried to edit an old post but all of the p tags get stripped.

u451f commented 5 years ago

I confirm this behavior in WP 5.0.3. This is super annoying. One can only "transform to blocks" using Gutenberg by hand for each old entry. ahahaha. :(

selimanac commented 5 years ago

Same here +1

zackkatz commented 5 years ago

Having this same issue.

vrrobz commented 5 years ago

Why is Wordpress altering my content AT ALL when I hand code it in HTML?

I'm on WP 5.1.1 and am seeing this exact behavior. Installed TinyMCE Advanced to tell it to keep P tags - did nothing. Installed wpautop toggle and the option to turn it off is not even showing in my pages.

I'm also now getting an error that WP failed to load TinyMCE, though I'm not seeing any effect of that in the editor.

designsimply commented 5 years ago

WordPress has used filters such as wpautop for formatting content for a long time, and there are various reasons for and against turning a filter like that on or off depending on your situation, your plugins, and how you write content. For example, here is a use case someone mentioned on StackExchange about why paragraph tags should be removed from around shortcodes: https://wordpress.stackexchange.com/a/162346/10377. Here is another explanation that is quite opinionated itself but that gives you an idea of where/how much the filters are integrated: https://www.experts-exchange.com/questions/28406913/How-to-Stop-WordPress-from-Removing-Paragraph-p-Tags-From-Editor.html#answer42543018-20. I think what WordPress is trying to do at heart is to make a best guess at the best way to format content that it can for the majority of people and it won't always get it right because of how much freedom we have to write HTML or copy it in from other places or mess it up.

@vrrobz for your case specifically, especially the errors you're noting about a plugin, I would recommend testing TinyMCE Advanced with all other plugins turned off to rule out a plugin conflict and then post at https://wordpress.org/support/plugin/tinymce-advanced/ to ask for help there and include the details you noted above as well as a note about testing with all other plugins temporarily deactivated. You might also try https://wordpress.org/support/forum/how-to-and-troubleshooting/ which is a general WordPress help forum.

For this issue to move forward, I think a decision needs to be made about whether it is an intended behavior for the Classic Block to convert non-breaking spaces to regular spaces on load. cc @ellatrix @azaozz

XavDeb-duplicate commented 5 years ago

I have the same problem here Once i click Outside of the code editor, instantly my <p> tag will disappear.

So the solution is to set a custom style in each <p> tag, then it is still re-edited (spaces will be added) but not stripped. That is SO annoying, Combined with the fact that preview doesn't wor anymore, I should never has updated Wordpress.

<p style='margin:inherit'>texte</p> makes it

mlaetitia commented 5 years ago

Bringing in another report / case. If this should be a separate issue let me know - I can definitely move it to a new one.

Issue: First post of “display posts” losing formatting on a page

I could replicate this in Jurassic Ninja on a fresh install. To replicate:

  1. Install the Display Posts Shortcode
  2. Create a new post, add a Classic block and add some text there. Note the post id and publish the post
  3. Create a new page, add a classic block and add [display-posts id=“POST_ID” include_content=“true” ignore_sticky_posts=“true”]. Publish the page, open it on a new tab and check the generated HTML – all text will be wrapped in <p> elements
  4. Head to the page and add a paragraph block after the classic block. Publish the page. Check the page – the text will not be wrapped in <p> elements anymore.
  5. Head to the post and add a paragraph block after the classic block. Publish the post. Check the page – the text will again be wrapped in <p> elements again.

Tested in Firefox 1959009-zd

petralian commented 5 years ago

For me I got it fixed by following steps:

In your site admin dashboard go to: Settings > TinyMCE Advanced > scroll down until you find the following option

Keep paragraph tags in the Classic block and the Classic Editor

Stop removing < p> and < br> tags in the Classic Editor and show them in the Text tab. This will make it possible to use more advanced coding in the Text tab without the back-end filtering affecting it much. However it may behave unexpectedly in rare cases, so test it thoroughly before enabling it permanently. Line breaks in the Text tab in the Classic Editor would still affect the output, in particular do not use empty lines, line breaks inside HTML tags or multiple
tags.

marcuswisecaesar commented 5 years ago

Played into a ticket wherein a user was asking if any progress had been made for a fix regarding this?

2209584-zd

designsimply commented 5 years ago

@marcuswisecaesar it's really helpful to have a quote from the ticket explaining the issue or some sort of brief explanation with details if possible since the ticket is not publicly available. Also, the shorthand should be -zen not -zd (which may matter when searching for user-reported issues later—I use a search like that for one part of issue prioritization in my work on the mobile division).

selectedselections commented 5 years ago

Same user @marcuswisecaesar worked with came back to ask for an update on this issue in 2283034-zen

They are noting that "display posts" loses formatting on a page due to this issue. I have asked for more information about the specific formatting lost and the page on which this is taking place.

designsimply commented 5 years ago

@mlaetitia sorry for not catching up with your question about making a separate issue. In your case, since the problem happens after installing the Display Posts Shortcode, then I do think an issue should be filed for that shortcode directly.

Studio28 commented 4 years ago

I am having a related issue with paragraph tags and other bits of html being rewritten once they're in the classic block. My attempt at troubleshooting this on Stackexchange led me here.

I exported the posts from a dev version of a currently live site using the WordPress export tool and imported the xml file to a new install of wp and db. Plugins were deactivated on both sides except for the WP export/import tools.

Here's the difference between the xml export file vs the classic block vs the db. The front end after export had no spacing between paragraphs and had to be fixed with CSS.

bnaScreen Shot 2019-11-10 at 2 50 55 PM

front-end-originleft-destinationright

QuietNoise commented 4 years ago

This is still happening almost 2 years since issue was originally reported. Clean installation of latest WP and Gutenberg only. Is there any workaround, hook or filter we can use before this gets fixed?

nboot8 commented 4 years ago

This is still happening almost 2 years since issue was originally reported. Clean installation of latest WP and Gutenberg only. Is there any workaround, hook or filter we can use before this gets fixed?

I'm in the exact boat you describe, and the only consistent fix I have found is to control via custom CSS. Otherwise, all my paragraph and break tags get stripped resulting in the first publish being fine, but any changes/re-publishing is completely a mess (or you have to manually add the tags back in each time).

eoinsav commented 4 years ago

I just came across this too. Try adding multiple spaces between paragraphs within the Classic Block on an empty page - the empty <p></p> tags are removed from the Classic Block when the page is published.

However, adding another Block with some content to the page will keep the empty <p></p> tags in the Classic Block, for some reason.

rodrigo-arias commented 3 years ago

I got this problem after updating to WordPress 5.7.0. Legacy content with line breaks in the Classic Editor lost all spaces.

Original content image

After update to WordPress 5.7.0 image

Note: if I install the Gutenberg plugin (currently v.10.2.1) the line breaks are there again.

I thought the bug was fixed somewhere between the version released in WP 5.7.0 (Gutenberg 9.9?) and Gutenberg 10.2.1 but I couldn't find anything other than this issue.

paaljoachim commented 3 years ago

Can someone do a test using WordPress 5.8? To see if this issue is still valid.

Thank you!

jq-87 commented 2 years ago

Yes issue still exists.

I'm on 5.8.1 trying to get my site off of the Classic Editor. P tags in my posts are gone.

eyyddxx04 commented 1 year ago

Im having issues too related on edit post dont have spacing in paragraph. :(

paaljoachim commented 1 year ago

I will ping a few people. Perhaps they know about similar issues. Hi Ella, George and Fabian. @ellatrix @Mamaduka @fabiankaegy

YukinobuAsakawa commented 10 months ago

I'm curious about this issue.I tried testing it and it looked like this

before

<p></p>
<p>&nbsp;&nbsp;</p>
<p class="p"></p>
<p style="border: 1px solid tomato;"></p>

after

<!-- wp:paragraph -->
<p>
</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
AlphaOmega5732 commented 7 months ago

I was having this issue and ended up fixing it by adding a class to each paragraph.

ellatrix commented 6 months ago

59476 fixes the removal of this paragraphs when you convert classic content.