Make WordPress Core

Opened 5 years ago

Last modified 7 months ago

#48196 new defect (bug)

The Code Editor generates tag soup with empty paragraphs in td elements

Reported by: vinc17's profile vinc17 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.2.3
Component: Editor Keywords: reporter-feedback
Focuses: Cc:

Description

When using the Code Editor with WordPress 5.2.3, the opening <p> and closing </p> tags do not appear in the editor and are automatically handled by the editor. If I try to add them to fix things, they are automatically removed. So, now the problem with this automatic handling: The Code Editor generates tag soup with empty paragraphs in td elements. For instance, the generated HTML code looks like this:

<td>text<br />
text</p>
<p>text<br />
text</p>
<p>text</td>

There are two issues (maybe related). First, this is tag soup. For various reasons (parsing with XML tools, better HTML code understanding and maintenance...), the Code Editor should not omit opening and closing tags. Here, the first </p> does not have a matching opening tag and the last <p> does not have a matching closing tag. Moreover, in HTML5 parsing, the first </p> is parsed as if it were <p></p>, i.e. an empty paragraph; and the text before it should really be in a paragraph for consistency. If the Code Editor thought that the <td> implied an opening <p> just after it, it is wrong! In short, the generated code should be:

<td><p>text<br />
text</p>
<p>text<br />
text</p>
<p>text</p></td>

Change History (2)

#1 follow-up: @noisysocks
4 years ago

  • Keywords reporter-feedback added

Welcome @vinc17.

Could you please provide some steps to follow which shows how to get the editor to generate that invalid markup?

<p>s are automatically generated by WordPress by design. This can be disabled using the wpautop filter.

https://codex.wordpress.org/Function_Reference/wpautop

#2 in reply to: ↑ 1 @vinc17
7 months ago

I forgot to reply... As the bug is still present with WordPress 6.4.2:

The code in the Code editor starts with

<table class="valign-middle">
<tbody>
<tr>
<td><a href="wp-content/uploads/2014/09/aecf_screen_1.0.jpg"><img src="wp-content/uploads/2014/09/aecf_screen_1.0-228x300.jpg" alt="aecf" class="alignnone size-medium wp-image-868" width="153" height="230"/></a></td>
<td><strong>Algorithmes Efficaces en Calcul Formel</strong>

Alin Bostan, Frédéric Chyzak, Marc Giusti, Romain Lebreton, Grégoire Lecerf, Bruno Salvy, Éric Schost.

Auto-édité. Distribué par Amazon avec une version couleur gratuite en ligne, 2017.
ISBN : 979-10-699-0947-2

Pour plus d'informations, voir <a href="https://hal.archives-ouvertes.fr/AECF/">ici</a>.</td>
</tr>

and in the generated code, I can see

<table class="valign-middle">
<tbody>
<tr>
<td><a href="wp-content/uploads/2014/09/aecf_screen_1.0.jpg"><img decoding="async" src="wp-content/uploads/2014/09/aecf_screen_1.0-228x300.jpg" alt="aecf" class="alignnone size-medium wp-image-868" width="153" height="230"/></a></td>
<td><strong>Algorithmes Efficaces en Calcul Formel</strong></p>
<p>Alin Bostan, Frédéric Chyzak, Marc Giusti, Romain Lebreton, Grégoire Lecerf, Bruno Salvy, Éric Schost.</p>
<p>Auto-édité. Distribué par Amazon avec une version couleur gratuite en ligne, 2017.<br />
ISBN : 979-10-699-0947-2</p>
<p>Pour plus d&#8217;informations, voir <a href="https://hal.archives-ouvertes.fr/AECF/">ici</a>.</td>
</tr>

So two tags are missing:

  • a <p> between <td> and <strong> (to match the closing </p> at the end of the line);
  • a </p> between ici</a>. and </td> (to match the opening <p> at the beginning of the line).
Note: See TracTickets for help on using tickets.