WordPress.org

Make WordPress Core

Opened 20 months ago

Last modified 18 months ago

#21605 reopened defect (bug)

Fix TinyMCE statusbar styling

Reported by: azaozz Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords:
Focuses: Cc:

Description

When the breadcrumb links in the TinyMCE statusbar (at the bottom) are too long (many nested elements with long class names), the statusbar pushes the width of the editor and breaks the layout.

Attachments (4)

editor.dev.css.patch (1.7 KB) - added by azaozz 20 months ago.
after.png (3.1 KB) - added by azaozz 20 months ago.
before.png (16.5 KB) - added by azaozz 20 months ago.
21605-2.patch (1.5 KB) - added by azaozz 20 months ago.

Download all attachments as: .zip

Change History (13)

comment:1 azaozz20 months ago

Before and after:



comment:2 nacin20 months ago

What if we just got rid of the "Path" line? If you're really interested in the HTML, switch over to the Text editor, otherwise, is it actually necessary?

azaozz20 months ago

azaozz20 months ago

azaozz20 months ago

comment:3 follow-up: helenyhou20 months ago

User-type question: is there any way it could truncate the beginning instead of the end? I think the end of the path is way more important than the beginning. Should probably also indicate the truncation somehow (ellipsis or some such), if it's not an enormous pain.

Or, get rid of it. I guess. It is actually rather useful information, though.

comment:4 in reply to: ↑ 3 azaozz20 months ago

Replying to nacin:

It's breadcrumbs for the selected element, comes quite handy in some cases, but not sure how many people actually use it. Also the editor resize "handle" is there, will see if it can be moved out.

Replying to helenyhou:

User-type question: is there any way it could truncate the beginning instead of the end?

The patch hides the end with css, can try to hide the beginning, won't be that clean though.

Or, get rid of it. I guess. It is actually rather useful information, though.

Yeah, it's useful for selecting the parents of the current element (like in Firebug and friends).

azaozz20 months ago

comment:5 azaozz20 months ago

21605-2.patch removes the breadcrumbs and keeps the resize handle (only on the main editor on Edit Post screen. Other instances of TinyMCE would have it enabled as default).

comment:6 azaozz20 months ago

Another possibility to shorten the element path (breadcrumbs) display would be to show only the first css class on each element, same as in Firebug and the browser HTML inspection tools. Will make a patch and send it to the TinyMCE team.

comment:7 follow-up: azaozz18 months ago

  • Milestone 3.5 deleted
  • Resolution set to worksforme
  • Status changed from new to closed

Seems this will be handled upstream.

comment:8 in reply to: ↑ 7 ; follow-up: nacin18 months ago

  • Milestone set to Awaiting Review
  • Resolution worksforme deleted
  • Status changed from closed to reopened

Replying to azaozz:

Seems this will be handled upstream.

In what way? Do you have a link?

If we keep path, then it should truncate the beginning not the end.

But, I'd rather just get rid of path — perhaps unless SCRIPT_DEBUG. It is useful for debugging but is it really necessary to expose otherwise?

comment:9 in reply to: ↑ 8 azaozz18 months ago

Replying to nacin:

But, I'd rather just get rid of path...

We've had the path since adding TinyMCE. It is an "advanced" feature but also the only way to select the outer element when several blocks are nested. For example:

<table><tr><td>
  <div>
    <p>Some text</p>
  </div>
</td></tr></table>

The bug described in this ticket seems to be extremely rare. It happens only when several block are nested and each has multiple long-ish class names. I've triggered it while testing/working on the prototype code for the TinyMCE Views but never seen it in a normal post.

Best way to fix this would be to do it with css, however it can only truncate the end of the string, not the beginning.

Version 0, edited 18 months ago by azaozz (next)
Note: See TracTickets for help on using tickets.