WordPress.org

Make WordPress Core

Opened 12 months ago

Last modified 2 weeks ago

#45636 new defect (bug)

Html edit mode in Gutenberg editor removes wrapping <p> tags

Reported by: skarabeq Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.0
Component: Editor Keywords: needs-patch reporter-feedback close
Focuses: Cc:
PR Number:

Description

When I disable visual editor and after that I can't add the paragraphs! When I add for example:

<div>test</div>
<p>test2</p>

After save it is

<div>test</div>
test2

Same as the problem when I switch from visual editor to code editor. This is unexpected behavior. In code editor I have to be able to add html code doesn't matter what html tags I use.

Change History (15)

#1 @subrataemfluence
12 months ago

  • Keywords reporter-feedback added

I was unable to reproduce the issue with the following configuration.

  • WP Vesion: 5.0.1
  • Theme: twentyseventeen and twentynineteen
  • Editor: Classic Editor
  • Other plugins: None activated
Version 0, edited 12 months ago by subrataemfluence (next)

#2 @skarabeq
12 months ago

@subrataemfluence ,

When I'm on code editor mode I expect html code to be added without any manipulations. If I add for example:

<div>test</div>
<p>test2</p>

I expect same, but while I click on the button Update, in the same time all <p> tags are gore away.

I have wordpress 5.0.1 and advanced custom fileds 5.7.8. For me this is not normal behavior for mode code edit.

#3 @joyously
12 months ago

Are the <p> tags removed if they have attributes?

#4 @skarabeq
12 months ago

@joyously, no it isn't disappears when it has an attributes. It's happens only when I use <p> tag without any attributes.

#5 @subrataemfluence
12 months ago

A related discussion is going on in Github:

https://github.com/WordPress/gutenberg/issues/4446#issuecomment-394719166

As per Gutenberg core coding style, this is not a bug which is unnoticed. It is something I think is deliberately injected.

The Doc block of function removep( hrml ) { ... } (in /wp-admin/js/editor.js) states:

Replaces <p> tags with two line breaks except where the <p> has attributes

Line no. 918

html = html.replace( /\s*<\/p>\s*/gi, '\n\n' );

I think if we can get rid of this the issue might resolve.

Last edited 12 months ago by subrataemfluence (previous) (diff)

#6 follow-up: @skarabeq
12 months ago

@subrataemfluence , when you believe it is not bug ok! But for me this is unexpected behavior. I agree this comment https://github.com/WordPress/gutenberg/issues/4446#issuecomment-368221988 . I want to have fully control of the html code in the code editor mode. I can say only that once again I am disappointed with the new things in WordPress!

#7 in reply to: ↑ 6 ; follow-up: @subrataemfluence
12 months ago

It is a kind of bug as I too feel. The thing is this has been put in purpose. That's confusing. Why a paragraph tag (without any attribute) should be replaced with two new line characters can definitely be the question :) But it is hard to understand why it is so!

Replying to skarabeq:

@subrataemfluence , when you believe it is not bug ok! But for me this is unexpected behavior. I agree this comment https://github.com/WordPress/gutenberg/issues/4446#issuecomment-368221988 . I want to have fully control of the html code in the code editor mode. I can say only that once again I am disappointed with the new things in WordPress!

Last edited 12 months ago by subrataemfluence (previous) (diff)

#8 in reply to: ↑ 7 @skarabeq
12 months ago

Replying to subrataemfluence:

It is a kind of bug as I too feel. The thing is this has been put in purpose. That's confusing. Why a paragraph tag (without any attribute) should be replaced with two new line characters can definitely be the question :) But it is hard to understand why it is so!

Replying to skarabeq:

@subrataemfluence , when you believe it is not bug ok! But for me this is unexpected behavior. I agree this comment https://github.com/WordPress/gutenberg/issues/4446#issuecomment-368221988 . I want to have fully control of the html code in the code editor mode. I can say only that once again I am disappointed with the new things in WordPress!

@subrataemfluence , @dd32 I can't believe how WordPress can developed new feature with a lot of bugs and don't know how to fix them. Guys please be more accountable to the things that you are developing.

#9 @dd32
12 months ago

  • Keywords close added
  • Severity changed from major to normal
  • Summary changed from Html edit mode in Gutenberg editor doesn't work as expected to Html edit mode in Gutenberg editor removes wrapping <p> tags

Sounds like this is working as anticipated, The <p> tags don't need to be there, as WordPress handles that for you. If you're used to using the "Text" editor (which is not a HTML editor, but "seems" like it is) you may find that the Classic Editor plugin will be useful for you use-cases.

The current behaviour would've been reproducible on 4.9 by switching from Text mode to Visual and back again, as a result this doesn't feel like a regression as such, and can probably be closed.

#10 @skarabeq
12 months ago

@dd32 , In that way do you fix bug ? Very professional way :) Install new plugin and that is. Please be more accountable to the things that you are developing. Guttenberg editor has total crap. It is unuseful when I want use only html editor. More over, when I has more than 10000 posts with custom content (HTML code) and then update WP and save some existing posts what happens ? They may crashed, due your team made a lot of bugs. What does it mean Code Editor ? May be half edit with code and other code wordpress will decided how will parsed. Nice "feature"!

Do you have any CI tests ? I think no! Good job! Keep work as usually and make crap features with fixes.

#11 @skarabeq
12 months ago

  • Keywords close removed

#12 @skarabeq
12 months ago

  • Severity changed from normal to critical

#13 @dd32
12 months ago

  • Keywords close added
  • Severity changed from critical to normal
  • Version changed from 5.0.1 to 5.0

#14 @zeshanb
11 months ago

Hi there,

For individuals recently migrating from older versions and even other content management systems. Using Gutenberg classic block. Having the classic editor not honor standard html paragraph tags when using "Edit as HTML" option can be a serious annoyance.

Here is a animated gif of the issue:
https://storage.googleapis.com/media.zdatatech.com/classic-block-strips-paragraph-tags.gif

Possible solution would be to have paragraph tags converted to classic blocks when Gutenberg loads post content for editing. Although this way of solving this may or may not cause editor experience issues.

#15 @Table28
2 weeks ago

Using the standard WordPress import/export plugin, I exported over 1200 posts from one site and imported it into a new installation. The code in the new site edit as html in the "classic" block added

<br />

where the original version showed blank spaces between paragraphs with no visible code in between.

In addition, the code in the destination db adds

&nbsp;

but strips out the

<br />

The below illustrates the difference

<!-- from the origin DB -->

“Dyslexic” was the diagnosis.

So we sent her to a private school, the best; De Niro sent his kid there too. The tuition – <em>$50,000+ a year</em>. I didn’t have $50K,
<!-- Copied from the destination "classic block" edit as html -->

“Dyslexic” was the diagnosis.<br />So we sent her to a private school, the best; De Niro sent his kid there too. The tuition – <em>$50,000+ a year</em>. I didn’t have $50K,
<!-- Copied from the destination DB -->

“Dyslexic” was the diagnosis.
So we sent her to a private school, the best; De Niro sent his kid there too. The tuition –&nbsp;<em>$50,000+ a year</em>. I didn’t have $50K,

The result was that the paragraphs on the front-end of the destination site showed no spaces between them until I added this CSS:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1em !important;
}

This may not be the best place to get answers but I do have a couple of questions:

  1. While this fixed the front-end appearance, does it not also increase the server load with the additional CSS?
  1. Is the fact that the code differs between what is in the db vs what is in "edit as html" classic an issue?
Note: See TracTickets for help on using tickets.