WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 8 months ago

#21605 closed defect (bug) (worksforme)

Fix TinyMCE statusbar styling

Reported by: azaozz Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords: has-patch
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 (5)

editor.dev.css.patch (1.7 KB) - added by azaozz 3 years ago.
after.png (3.1 KB) - added by azaozz 3 years ago.
before.png (16.5 KB) - added by azaozz 3 years ago.
21605-2.patch (1.5 KB) - added by azaozz 3 years ago.
21605.patch (949 bytes) - added by iseulde 16 months ago.

Download all attachments as: .zip

Change History (17)

comment:1 @azaozz3 years ago

Before and after:



comment:2 @nacin3 years 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?

@azaozz3 years ago

@azaozz3 years ago

@azaozz3 years ago

comment:3 follow-up: @helenyhou3 years 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 @azaozz3 years 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).

@azaozz3 years ago

comment:5 @azaozz3 years 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 @azaozz3 years 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: @azaozz3 years 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: @nacin3 years 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 @azaozz3 years 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. Another option would be not to show the class names or to show only the first when there are several.

Last edited 3 years ago by azaozz (previous) (diff)

@iseulde16 months ago

comment:10 @iseulde16 months ago

  • Keywords has-patch added

+1 for removing the path. Plugins can easily add it back.

In 3.9, and TinyMCE 4.0, the classes are not shown, so it's very difficult to reproduce this.
In any case, the font size should be adjusted. For the path it's 14px, while for the word count it's 12px. I added a patch which also aligns it with the word count.

To remove the path, we just need to add 'status bar' => false, to the settings, and check this to calculate the height of the editor.

comment:12 @iseulde8 months ago

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

Unlikely to happen now, as it just displays the nodeName, and if it does happen, it wraps to another line.

Note: See TracTickets for help on using tickets.