Make TinyMCE modal behavior more consistent

[eablokker]

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.

[azaozz]

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

[afercia]

Replying to eablokker:

Special character and help fade in on open

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

[iseulde]

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.

[afercia]

thanks @avryl :)

[azaozz]

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.