Using TinyMCE Editor Dropdown Menus inside Modals

[bryanaka]

The modal (for example, the image modal from the media library ".media-modal") has a z-index of 160000. The dropdown menu's in TinyMCE, such as the color picker, have a z-index value of 100100. set here -

​https://github.com/WordPress/WordPress/blob/efe8fd4694ce1d5252af9856b2bfac396e76c8f9/wp-includes/js/tinymce/plugins/wordpress/plugin.js#L4

This basically leaves any of TinyMCE's float-panels unusable inside a modal.

It seems to me that the natural hierarchy of layering would be dropdowns and tooltips on top always, then modals, then masks, and finally everything else. This would make sure layering just works.

[jorbin]

In the above linked chat, Helen identified that:"we need to find out where the .media-modal z-index comes from and document that. if it can be lower, then it should be lower. and we can change the tinymce float panel to be above it and document that, i just don’t want to inflate the latter until we know where the former comes from."

[bryanaka]

Great to hear. I read the slack logs and seems reasonable. It's definitely hard to keep track of z-indexes.

If there is anyway that I can contribute to this bug and help the core team out, let me know.

Replying to jorbin:

In the above linked chat, Helen identified that:"we need to find out where the .media-modal z-index comes from and document that. if it can be lower, then it should be lower. and we can change the tinymce float panel to be above it and document that, i just don’t want to inflate the latter until we know where the former comes from."

[GunGeekATX]

Found this trac ticket while working on the same issue today, and ran into an issue with the inline toolbar that pops up on some of the embedded items (such as images).

In editor.css, div.mce-inline-toolbar-grp also has a z-index rule:
z-index: 100100; /* Same as the other TinyMCE "panels" */

Something to keep in mind once this ticket moves forward.

[azaozz]

Unfortunately this is not easily fixable. The media modal is meant to be on top of all content on the screen, including the TinyMCE drop-downs (which are actually divs inserted from js at the bottom of the screen). Otherwise these drop-downs will be visible when the media modal is open.

There is some code in the TinyMCE UI intended to detect the z-index of the editor container which seems to be working in most cases, but if it fails, it's not trivial to fix.

This is somewhat superseded by the block editor. Closing as wontfix for now, please feel free to reopen with a patch to fix it for plugins that still use TinyMCE.