Ordered List Problem When Switiching between Visual Editor and HTML editor

[pavankumarp]

1. I create an ordered list in the Visual Editor.

2. I switch to the HTML editor so I can add a paragraph of text (or an image) within the ordered list, but NOT inside a list tag.

3. I return to the Visual Editor and notice something doesn't look right.

4. I go back to the HTML editor and see that my ordered list is now all messed up. Extra ordered list tags have been added that I don't want.

Here's the code from the HTML editor BEFORE I switched back to the Visual Editor:

<ol>
	<li>Ordered list item 1</li>
            Block of text inserted into list but not inside an li tag.
	<li>Ordered list item 2</li>
	<li>Ordered list item 3</li>
	<li>Ordered list item 4</li>
</ol>

Here's the code after switching to the Visual Editor and then back to the HTML editor:

<ol>
<ol>
	<li>Ordered list item 1</li>
</ol>
</ol>
Block of text inserted into list but not inside an li tag.
<ol>
	<li>Ordered list item 2</li>
	<li>Ordered list item 3</li>
	<li>Ordered list item 4</li>
</ol>

[Bonesnap]

Someone correct me if I am wrong, but I believe all content within an <ol> element (and <ul> for that matter) must be within <li></li> tags. The editor is probably recognizing this and trying to correct it.

[SergeyBiryukov]

Replying to Bonesnap:

Someone correct me if I am wrong, but I believe all content within an <ol> element (and <ul> for that matter) must be within <li></li> tags.

That's right.

[iseulde]

I think the reporter is trying to say that the correction is invalid as well (an ol tag inside an ol tag).

[pavankumarp]

Yeah avryl, After the corrections. Every point appears with number 1 because <ol> tags are being closed for every point.

[Bonesnap]

I don't think it should be the text editor's responsibility to fix malformed HTML - especially if we know the HTML we're giving it is incorrect. Seems to me the easiest solution to this problem is to make sure you put <li></li> tags around any content you want to put in the list, no?

[marcochiesi]

I noticed the same problem when using comments inside lists.
Example:

<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
<!-- This is a comment -->
</ol>

becomes

<ol>
<ol>
	<li>Ordered list item 1</li>
	<li>Ordered list item 2</li>
	<li>Ordered list item 3</li>
</ol>
</ol>
<!-- This is a comment -->

The comment gets moved and the ol/ul tag is duplicated. So this is definitely a bug.

[sabernhardt]

Using the Classic block, I was able to return to visual editor and publish like this:

<ol>
<li>Ordered list item 1</li>
Block of text inserted into list but not inside an li tag.
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
<li>Ordered list item 4</li>
</ol>

But then I reopened the post editor and it had changed to this:

<ol>
<li style="list-style-type: none;">
<ol>
<li>Ordered list item 1</li>
</ol>
</li>
</ol>
<p>Block of text inserted into list but not inside an li tag.</p>
<ol>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
<li>Ordered list item 4</li>
</ol>

Similarly in Classic Editor, I can publish from Text view without any markup changes, but I get the nested list when switching to Visual editor before publishing the post:

<ol>
 	<li style="list-style-type: none;">
<ol>
 	<li>Ordered list item 1</li>
</ol>
</li>
</ol>
Block of text inserted into list but not inside an li tag.
<ol>
 	<li>Ordered list item 2</li>
 	<li>Ordered list item 3</li>
 	<li>Ordered list item 4</li>
</ol>

Adding a comment inside the list results in nesting a list inside an li tag as well (after publish in block editor/after Visual switch in Classic), with the comment after the list. It also can get messier in the Classic Editor if you switch between Visual and Text views multiple times.

So when the editor reformats, it produces valid list markup now, except the result is not what was intended.