WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 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:

Description

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>

Attachments (1)

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

Download all attachments as: .zip

Change History (22)

comment:1 l3rady3 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.

comment:2 F J Kaiser3 years ago

  • Cc 24-7@… added

comment:3 azaozz3 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

comment:4 follow-up: kingkong9543 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.

comment:5 in reply to: ↑ 4 azaozz3 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.

comment:6 azaozz3 years ago

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

comment:7 nacin2 years ago

  • Keywords reporter-feedback added

Can someone confirm as fixed in 3.3?

comment:8 duck_2 years ago

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

comment:9 l3rady2 years ago

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

comment:10 azaozz2 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).

comment:11 aaroncampbell2 years ago

  • Cc aaroncampbell added

comment:12 SergeyBiryukov2 years ago

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

comment:13 azaozz2 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.

comment:14 bvomedia2 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 2 years ago by bvomedia (previous) (next) (diff)

comment:15 l3rady2 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.

comment:16 follow-up: l3rady2 years ago

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?

comment:17 in reply to: ↑ 16 azaozz2 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.

comment:18 azaozz2 years ago

  • Milestone changed from Future Release to 3.4

azaozz2 years ago

comment:19 knutsp2 years ago

  • Cc knut@… added

comment:20 azaozz2 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

comment:21 dreamwhisper2 years ago

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