Increase tinymce panel z-index

[greuben]

Tinymce panels in Customizer are not visible due to low z-index value. Add forecolor button to the text widget editor toolbar to see the issue.

[westonruter]

@greuben There were some CSS changes in [40631] also related to z-index. Other similar CSS changes were made in Customize Posts to get the TinyMCE UI elements to appear in the right spot: ​https://github.com/xwp/wp-customize-posts/blob/d87ff821ddb4611a1bade7859498cbb97d2b77ac/css/customize-posts.css#L223-L240

The CSS-based change perhaps was a workaround for not being aware of the need to modify the WordPress TinyMCE plugin.

@azaozz Is this going to be the right change to make or should it be sniffing for Customizer context and only setting the value to 500001 in that case?

[azaozz]

Replying to westonruter:

...should it be sniffing for Customizer context and only setting the value to 500001 in that case?

Yeah, think we shouldn't change the z-index for all instances of the editor. Better to bump it only when used for the Text widget. Will patch it in a min.

[azaozz]

In 40990:

Text widget: bump the TinyMCE modals z-index to 500001 so they show in the Customizer.

Props greuben.
Fixes #41158 for trunk.

[azaozz]

Committed the fix to trunk so it's easier to test.

Reopen for 4.8.1.

[westonruter]

@azaozz I don't think we should limit it to the Text widget only. If another Customizer control uses TinyMCE, then it should likewise automatically get the fix.

[azaozz]

Replying to westonruter:

Sure, what would be a "convenient" location for this in the Customizer? Then again, if the editor is used somewhere else, the z-index will be set when the Text widget initializes. It sets the z-index "globally" in tinymce, not a per-instance thing.

[greuben]

@azaozz The z-index can be moved into wp.editor.getDefaultSettings() where we can use is_customize_preview()

[westonruter]

Replying to azaozz:

Then again, if the editor is used somewhere else, the z-index will be set when the Text widget initializes. It sets the z-index "globally" in tinymce, not a per-instance thing.

If a Text widget is never opened, however, then this z-index logic is not called, since no Text widget control is instantiated.

Sure, what would be a "convenient" location for this in the Customizer?

Good question. I think @greuben's solution would work, but I don't think it should go inside of wp.editor.getDefaultSettings, as adding side-effects to that function doesn't seem the best. An alternative would be using wp_add_inline_script() as seen in 41158.2.diff​. Or as well, that JS logic that is embedded in PHP could just as well be added to customize-controls.js like so:

src/wp-admin/js/customize-controls.js

@@ -5507 +5507 @@
                         } );
                 } ());
 
+                // Make sure TinyMCE dialogs appear above Customizer UI.
+                $( document ).one( "wp-before-tinymce-init", function() {
+                        if ( ! tinymce.ui.FloatPanel.zIndex || tinymce.ui.FloatPanel.zIndex < 500001 ) {
+                                tinymce.ui.FloatPanel.zIndex = 500001;
+                        }
+                } );
+
                 api.trigger( 'ready' );
         });

[azaozz]

Replying to westonruter:

I think @greuben's solution would work, but I don't think it should go inside of wp.editor.getDefaultSettings, as adding side-effects to that function doesn't seem the best.

Agreed. Best to keep it in the Customizer context.

An alternative would be using wp_add_inline_script() as seen in 41158.2.diff​. Or as well, that JS logic that is embedded in PHP could just as well be added to customize-controls.js

IMHO best to do this in customize-controls.js. It is a "global" JS setting/callback not that different from blur, beforeunload, etc. :)

[azaozz]

41158.3.patch works well and is almost identical to 41158.2.diff but in customize-controls.js.

[westonruter]

@greuben 41158.3.patch​ works for you as well?

[greuben]

Replying to westonruter:

@greuben 41158.3.patch​ works for you as well?

Yes

[azaozz]

In 40995:

Customizer: improve setting the TinyMCE modals z-index.

Props westonruter, greuben.
See #41158.

[westonruter]

@jbpaul17 I don't think it needs testing. Being fixed-major it just needs to be committed to the 4.8 branch.

[jbpaul17]

Ok, I was going off @azaozz's comment in the bug scrub. I'm fine removing the needs-testing keyword.

[westonruter]

In 41068:

Widgets: Bump the TinyMCE panels' base z-index to 500001 so they show in the Customizer (such as in the Text widget).

Merges [40990] and [40995] onto 4.8 branch.
Props greuben, westonruter.
Fixes #41158 for 4.8.1.