[wp-trac] [WordPress Trac] #29643: Ordered List Problem When Switiching between Visual Editor and HTML editor

[WordPress Trac]

#29643: Ordered List Problem When Switiching between Visual Editor and HTML editor
--------------------------+------------------------------
 Reporter:  pavankumarp   |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  4.0
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Changes (by sabernhardt):

 * milestone:   => Awaiting Review


Old description:

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

New description:

 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>
 }}}

--

Comment:

 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/29643#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform