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

[skarabeq]

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.

[subrataemfluence]

Yes, your observation is correct as far as visual representation is concerned!

The reason why you are not been able to see the physical <p></p> tags because when we write a block of text in Gutenberg by wrapping it by tag like <h1>, <h3> etc., they will persist.

On the other hand when no tag is specified for a block of text, that block will automatically get wrapped inside a <p> tag.

Is you save the post and then go to the page and see the source of it, you will see that your text is already wrapped within a <p>.

It is unnecessary to double wrap a text with the same HTML tag, like in this case, it would become <p><p>...</p></p>. So, in short if there is a block of text written without any specific HTML tag wrapping it, you can be rest assured that it is in the end wrapped by a <p> tag.

[skarabeq]

@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.

[joyously]

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

[skarabeq]

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

[subrataemfluence]

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.

[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]

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!

[skarabeq]

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.

[dd32]

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.

[skarabeq]

@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.

[zeshanb]

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:

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.

[Table28]

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

 

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?

2. Is the fact that the code differs between what is in the db vs what is in "edit as html" classic an issue?

[noisysocks]

This is expected behaviour. WordPress will automatically insert <p> tags. If you would like to disable this, you can remove the wpautop filter.

​https://developer.wordpress.org/reference/functions/wpautop/#more-information