Make WordPress Core

Opened 10 years ago

Closed 9 years ago

#27388 closed enhancement (fixed)

Make TinyMCE modal behavior more consistent

Reported by: eablokker's profile eablokker Owned by: azaozz's profile azaozz
Milestone: 4.2 Priority: normal
Severity: normal Version: 3.9
Component: TinyMCE Keywords: has-patch
Focuses: ui Cc:


TinyMCE modals currently have inconsistent behavior. The main modals I have identified are the add media (a special case), insert link, special character, and help.

Behavior: Fade in on open
Special character and help fade in on open
Add media and insert link do not fade in

My opinion: remove the fade in. It slows down the interaction and we don't see fade in anywhere else in Wordpress UI

Behavior: Close on escape
All modals close on escape, however special character and help do not close on escape if the modal loses focus, i.e. you click on the dark overlay background first

My opinion: fixing the next issue will likely make this issue irrelevant

Behavior: Close on click of dark background overlay
Add media and insert link close on background click
Special character and help do not close on background click

My opinion: modal should always close when clicking background

Bahavior: Modal is draggable
Special character and help are draggable
Add media and insert link are not draggable

My opinion: Not sure but there should be some consistency. What benefit does draggability afford? I can see insert link benefitting from draggability because you might want to look at the link text in the editor window to remind you what you were linking to. I can see why insert link is not currently draggable, due to the centered positioning and the link to existing content flyout. Maybe when you click that, it can just re-center the modal in the page while retaining draggability.

Attachments (2)

27388-fade-in.patch (518 bytes) - added by afercia 9 years ago.
27388.patch (442 bytes) - added by iseulde 9 years ago.

Download all attachments as: .zip

Change History (7)

#1 @azaozz
10 years ago

The difference is that the Special Character and Help modals are TinyMCE driven, the others are from WordPress.

  • Close on clicking the overlay (and consistently on Esc): this is going to be added to TinyMCE.
  • Opening animation: think there may be an option to disable it, will look further.
  • Modal is draggable: this makes sense only when the modal is small and some changes can be seen "under" it. This doesn't apply for the two TinyMCE based modals. Don't think dragging can be disabled for them unless we override the CSS with !important. On the other hand it doesn't bring any UX problems, users just ignore it. (This is not a change/regression, these modals were draggable before the TinyMCE upgrade.)

#2 in reply to: ↑ description @afercia
9 years ago

Replying to eablokker:

Special character and help fade in on open

for this, just reset the CSS transition, see attached patch.

9 years ago

#3 @iseulde
9 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.2

Refreshed @afercia's patch.

Esc has been fixed previously.
Close on clicking the overlay need to be added by TinyMCE. We have asked before, and I'll ask again.
The draggable part is not something we can do much about.

Moving to 4.2 for the patch.

#4 @afercia
9 years ago

thanks @avryl :)

#5 @azaozz
9 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 31185:

TinyMCE: remove the fade in/out when opening/closing native modals to match the rest of our UI. Props afercia, avryl. Fixes #27388.

Note: See TracTickets for help on using tickets.