Make WordPress Core

Opened 7 years ago

Closed 6 years ago

Last modified 6 years ago

#18261 closed defect (bug) (fixed)

WYSIWYG toolbar 'indent button' produces invalid markup

Reported by: kingkong954 Owned by: azaozz
Milestone: 3.4 Priority: normal
Severity: normal Version: 3.2.1
Component: TinyMCE Keywords:
Focuses: Cc:


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:

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

...instead of:

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

Attachments (1)

18261.patch (15.7 KB) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (22)

#1 @l3rady
7 years ago

  • Version set to 3.2.1

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.

#2 @F J Kaiser
7 years ago

  • Cc 24-7@… added

#3 @azaozz
7 years ago

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

#4 follow-up: @kingkong954
7 years ago

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.

#5 in reply to: ↑ 4 @azaozz
7 years ago

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.

#6 @azaozz
7 years ago

  • Milestone changed from Awaiting Review to 3.3
  • Owner set to azaozz
  • Status changed from new to reviewing

#7 @nacin
7 years ago

  • Keywords reporter-feedback added

Can someone confirm as fixed in 3.3?

#8 @duck_
7 years ago

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

#9 @l3rady
7 years ago

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

#10 @azaozz
7 years ago

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

#11 @aaroncampbell
7 years ago

  • Cc aaroncampbell added

#12 @SergeyBiryukov
7 years ago

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

#13 @azaozz
7 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from 3.3 to Future Release

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.

#14 @bvomedia
6 years ago

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 CCS rules would work perfectly.

Version 1, edited 6 years ago by bvomedia (previous) (next) (diff)

#15 @l3rady
6 years ago

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.

#16 follow-up: @l3rady
6 years ago

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


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?

#17 in reply to: ↑ 16 @azaozz
6 years ago

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.

#18 @azaozz
6 years ago

  • Milestone changed from Future Release to 3.4

6 years ago

#19 @knutsp
6 years ago

  • Cc knut@… added

#20 @azaozz
6 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In [19631]:

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

#21 @dreamwhisper
6 years ago

  • Cc dreamwhisper added
Note: See TracTickets for help on using tickets.