WYSIWYG toolbar 'indent button' produces invalid markup

[kingkong954]

The 'indent' icon on the TinyMCE toolbar is producing invalid markup on nested lists. Then, WordPress is attempting to correct it, resulting in a very broken list.

The toolbar is producing this code:

<ul>
<li>parent list item 1</li>
<ul>
<li>child list item 1</li>
</ul>
<li>parent list item 2</li>
</ul>

...instead of:

<ul>
<li>parent list item 1
<ul>
<li>child list item 1</li>
</ul>
</li>
<li>parent list item 2</li>
</ul>

[l3rady]

I'd like to add that I'm experiencing the exact same issue. if you have WordPress should correct invalidly nested XHTML automatically setting turned on then WordPress will break your multi-nested list because the editor isn't producing the correct HTML.

[azaozz]

The visual editor doesn't support adding nested lists. Not sure how you are adding them.

The indent button doesn't behave properly when used on a list, could you confirm that still happens in the TinyMCE demo: ​http://tinymce.moxiecode.com/tryit/full.php

[kingkong954]

Sure it does -- indenting a first level LI (using the indent icon) will create the nest for you. This has always been the case.

The TinyMCE demo appears to work properly. It creates code differently than the current WordPress version.

[azaozz]

Replying to kingkong954:

The TinyMCE demo appears to work properly. It creates code differently than the current WordPress version.

In that case the bug will be fixed in 3.3 as we will upgrade TinyMCE before the betas start.

[nacin]

Can someone confirm as fixed in 3.3?

[duck_]

Still seems broken in 3.3 and the TinyMCE demo works fine.

[l3rady]

I can confirm that 3.3 still produces invalid nested UL's and OL's when using the indent button.

[azaozz]

This still happens in the newest TinyMCE. The fix it to add the 'lists' plugin that handles that properly (it's included on the demo).

[SergeyBiryukov]

Duplicate: #18312 (has a patch for force_balance_tags()).

[azaozz]

This is a bug in TinyMCE (not a regression) that can be fixed by adding the "lists" plugin for it. Too late to add it for 3.3, will revisit in 3.4.

[bvomedia]

By the way. The "indent" button is useless when trying to indent/number list items as "1", "1.1", "1.1.1", etc. It produces invalid markup on nested lists. Therefore, the numbering is all wrong.

Style sheet:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

The visual editor doesn't support adding nested lists. If the HTML markup was correct these simple CSS rules would work perfectly.

[l3rady]

I created a plugin to include the lists tinyMCE plugin but that failed to get nested lists working. It seemed to me that another tinyMCE plugin was causing the problem. I removed one plugin at a time and found that if I remove the wordpress tinyMCE plugin the list plugin works.

I'm going to have a look through /wp-includes/js/tinymce/plugins/wordpress/editor_plugin.dev.js and see if can narrow down what in here is causing nested lists not to work.

[l3rady]

Here is the plugin I've developed to include tinyMCE lists plugin:

​http://l3rady.com/plugin/fix-nested-lists.zip

I'm having some really weird caching going on because what I said before may not be true.

I've just tested the above plugin on 3.2.1, 3.3 and nightly and it makes nested lists work when activated and when deactivated nest lists go back to not working. Can someone please test this plugin and confirm if it is working or not?

[azaozz]

Replying to l3rady:

The plugin seems to work fine, yes, that's all there is to adding an external plugin to TinyMCE in WP (when the plugin doesn't have a popup/translations).

The caching problems happens because the MCE's iframe is created with JS and then more files loaded into it. Most browsers don't care to refresh unless you force them.

[azaozz]

In [19631]:

Editor: fix invalid nested lists, fix tabbing - Tab goes to Publish/Update, Shift + Tab goes back to Title, fixes #18261