Visual and Text tabs not working on Reverse Proxy setup

Reverse proxy would have nothing to do with editor behavior. It’s a mere coincidence. Be sure your site still is using the tinyMCE editor and is not using the new gutenberg plugin. Gutenberg editor doesn’t have tabs like tinyMCE does.

If you site is indeed using tinyMCE still, trouble with tabs is usually due to JavaScript errors. Check your browser console for any errors. Any listed errors need to be resolved before you can expect the editor tabs to work correctly.

It is not using Gutenberg plugin. I’ve installed Classic plugin and whether it’s activated or not, the tabs won’t appear.

I’ve checked on console and there are no errors not before and not today.

We have 2 WordPress subdirectories on the site and they both have the same issues. Their common denominator is that they both have reverse proxy setup with AWS route 53 and AWS cloudfront. I’ve tried having a clean WordPress setup (no plugins, plain theme) still the same error.

Perhaps I’m missing something on the reverse proxy setup? However, it’s the only error on those WordPress sites. So I don’t get it.

@bcworks – Can you recommend a good tutorial for setting up reverse proxy on AWS? Perhaps that might help so I can check my setup.

Sorry, I don’t have a recommendation. I’m still having trouble imagining any way AWS could impact editor behavior. I noticed the page you linked uses a version of jQuery in your theme’s folder instead of the usual one in wp-includes/js/. That’s fine on the front end, but if that same version is used on the backend, it could cause editor issues. Code that alters which jQuery is registered should only do so if ! is_admin() (if request is not an admin request).

@bcworkz – Same here. It’s hard to imagine because it’s not supposed to but it currently is the way I see it. With regards to the Jquery, the backend (wp-admin) uses the default Jquery and not the theme’s version.

Here’s a crazy idea. What if some errant CSS is simply hiding them? Check the page’s HTML source code and search for the tab IDs “content-tmce” and “content-html”. If they exist, the tabs are hidden. Then use your browser’s elements developer tool to identify the offending rule.

Any theme or plugin could be altering editor behavior, which would be where the errant CSS would come from. They could also be altering how the editor is loaded. Suppressing various elements is possible this way. Eliminate this possibility by deactivating all plugins and switching to a twenty* default theme as a test. If the tabs then appear, begin selectively restoring your normal configuration, you will be able to narrow down the source to a specific module.