Editor all text white and Yoast SEO not visible

Hi X Pro

I have a problem with my editor. Whenever I try to edit a product in my webshop, the editor shows all text white instead of black. Also underneath the editor Yoast SEO is not visible.

Please see screenshots below.

I don’t dare to update all plugins & X Pro since it might not be compatible with latest Wordpress version.

Could you please take a look and have a solution for this problem?

Thank you!!

Hello @Woordenaar,

Thanks for reaching out. :slight_smile:

This is a live website that also has a functioning eCommerce. In that regards I am not allowed to fiddle or do in depth troubleshooting without taking permission. Having said that I noticed few things that you can consider:

  1. WooCommerce version: I see that you are using WooCommerce version 3.5.1 which also the latest supported version from our side. As of today the latest version of WooCommerce that the team at WooCommerce has released in 3.5.7. Please don’t update WooCommerce till the time we don’t release next supported version.
  2. Pro Theme version: I see that you have Pro version 2.3.8. My recommendation would be to update Pro to the latest version 2.5.5. Pro Theme is fully compatible with latest WordPress version 5.1.1.
  3. Next, I also see you have bunch of plugins installed on the website. Text not displaying until selected could be because of a plugin conflict. I suggest you to test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Before updating, I suggest you to copy the website on a test server and test the plugin conflict and update process over there, just to make sure that user experience for website visitors and potentials customers don’t get affected. In case any issue comes up (on test server) same can be looked at without hampering live website.

You can take a look at following resources to update Pro Theme:

https://theme.co/changelog/

In the meantime, I also suggest you to try out solution mentioned in following thread:

https://wordpress.org/support/topic/visual-editor-is-blank-broken/

Thanks.

@Prasant

Yes you have my permission to check the backend of my live site.

I just checked and also edit page is not possible anymore.

I hired via Fiverr a company called Kreativopro to make speed optimizations to my site and since then I had nothing but troubles.

Indeed they installed a lot of different plugins with all different settings.

It seems I already had this problem of blank editor and Yoast not being visible before. Please see this support thread also:

Not sure how I got this resolved back then…

If you could take a look that would be great. Please see first post for credentials :slight_smile:

Thanks a million!! :slight_smile:

Hello @Woordenaar,

I have logged in and check your site. There are JS errors when you edit the product, post or page. I also noticed that 12 of your plugins is out of date. Could you please update these plugins first. Most of the time outdated WP core, theme and plugins will create issues in the site. If the issue persists, this could be caused by a 3rd party plugin. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Hope this helps. Please let us know how it goes.

@RueNel

Your colleague advised against updating the plugins, since they are not yet compatible with latest X Pro theme.

Also, when I disable these plugins, site becomes unusable.

Could you please tell me more about these JS errors please?

It could be a cacheing problem. I use CLoudflare & WP Fastest Cache.

Could you check the settings, and see if they are causing the issue maybe?

Thanks!

Hello @Woordenaar,

Thanks for updating the thread. :slight_smile:

I think there’s some confusion over here. What I meant was not to update WooCommerce as the latest version released by WooCommerce team is not yet tested and we are doing the compatibility testing for the same. Once the compatibility testing is done we will release update for the same.

As suggested by my colleague @RueNel you should update rest of the plugins except WooCommerce. Upon checking the console while editing Products page I see bunch of error message specifically related with WooCommerce MultiStep Checkout, Yoast SEO Premium.

I also inspected the page in dev tools and as you have also mentioned I see that Cloudflare is active and on website you also have a cache plugin. After updating the plugins (except WooCommerce) please clear website cache and Cloudflare cache and then see how it goes.

Thanks.

Thanks for your reply.

I saw that apart from Woocommerce some other plugins are not yet compatible with latest wordpress version. So updating them might be a risk of losing compatibility, right??

Or should I update everything regardless of compatibility with latest Wordpress?

Hi

I updated all plugins except for Woocommerce but the issue still persists.

I also contacted Yoast about the issue directly. It seems their plugin is causing this conflict right?

I am awaiting their reply.

Could you help me further maybe?

Thanks!

Hello @Woordenaar,

May we have the permission to put your site in under construction mode so that we can test for a plugin conflict and investigate further to resolve this issue?

Kindly let us know.

Hi @RueNel

Thanks for this!! :slight_smile:

Will you make a backup before you proceed to testing? Then it is OK for me.

Could you place “We are currently making some changes to our website. We will be back online soon” or something like this, instead of “under construction”. Please also add "you can always contact us via mail:… ". I will add this in the security note.

Is this OK for you?

I’m sorry but making any updates to a live site is not a part of our product support. With that said, we could not backup your site and setup under construction for you.

Please also note that our goal here is to see if our products are causing the described issue. We do not fix third party plugin issues. If one of our products is causing the problem, we would need to report it and it would be subject to further investigation which would lead to either releasing an official bug fix or plugin compatibility.

The best course of action is you copy your site to a staging server so we could troubleshoot without affecting your live site. We can then continue troubleshooting once you have given us the staging site’s WP Admin and FTP access.

If you wish for us to continue investigating in your live site, please do back it up first and install an under construction plugin like our extension and setup the under construction content.

Please be aware of the risk involved in troubleshooting a live site. We also would need that you disable all website optimizations like caching and CDN. The reason for that is it’s hard to investigate if optimizations are enabled. Website optimization is also one of the common causes of website problems. They should be done correctly in order to reap the benefits.

Thanks.

HI there

I have narrowed down the problem.

I tested website with Health & Troubleshooting plugin.

I entered troubleshooting mode with standard Wordpress theme active, and then one by one activating plugins. I activated Woocommerce and all Woocommerce addon plugins, I activated WPML and all WPLM addons.

This all worked perfectly. And editor was not blank, but showed new Gutenberg editor like you can see in this picture:

Page:

Product:

Then I activated X Pro Child Theme and editor was blank again, like you can see in this picture:

When I activate X Pro (not the child theme) editor also works perfect:

So the problem is the X Pro Child theme.

When performing this health check troubleshooting, no cache or optimization plugin was activated. Only Woocommerce and add-ons & WPML and add-ons.

Could you please look into this?

I already sent all credentials via secure note on first post.

Thank you!! :slight_smile:

Hello @Woordenaar,

Thanks for updating the thread. :slight_smile:

I logged into the FTP using Filezilla and under /wp-content/themes/pro-child/ directory I could see bunch of customizations are made. At first I took a complete backup of the child theme by downloading the child theme into my local dev setup.

Next, I started to inspect the code’s and the files. It seems that the customizations that are made in function.php file (child theme) is causing the problem. I removed all the codes that was there in function.php file and then reloaded the page in browser and I can see that the text is displaying fine (screencast in secure note).

In that regards it’s evident that the codes that are present in child theme function.php is causing the problem. I suggest you to take a closer look at the customizations that are there in child theme function.php to narrow down the block of code that is causing the problem.

Unfortunately beyond this it’s fairly difficult for us to provide support as that clearly falls outside the scope of support we can offer. Just to let you know, I have re-uploaded the file (function.php).

Thanks.

Hi

Thanks for your response and getting closer to the problem.

During this thread support I also filed a support question at Yoast itself.

Here’s their answer:

Hi Dries,

Thank you for your continued patience. We apologize for the trouble you are experiencing with our plugin. Using the Health Check plugin we disabled all plugins and switched to a default theme. After activating only Yoast SEO, the Yoast SEO meta box appears as expected.

We enabled one plugin at a time and the issue did not occur. After enabling your preferred theme, the issue returned. Enabling the parent theme does not cause any JavaScript errors which means the issue resides in the code of the child theme.

Please contact the child theme author or developer to determine what resolve the JavaScript errors output by the theme code.

Let us know if there’s anything else we can assist you with; we’re happy to help.

Could you please take a closer look at my functions.php in my child theme and see which custom code causes the JavaScript error output?

There is not so many custom code added and above every piece of code there is a comment which explains what it does.

Thanks in advance!!

Hi @Woordenaar,

It’s not due to the theme, but because of the added custom code. I went ahead and removed this and it should be working now.

// DEFER PARSING JAVASCRIPT
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Make sure to clear your browser cache before testing.

Thanks!

Hi @Rad

Thanks for pointing out the part of the script that is causing the problem.

Defer JavaScript was implemented because of speed improvement.

It seems now without the code, site running slower again.

Is there another ay to correctly defer parsing JavaScript?

Thanks for info! :slight_smile:

Hello @Woordenaar,

I would highly suggest that after you have edited your posts or pages, you can put back the code so that your site will run faster again with deferred Javascript. You can easily disable or enable your defer script by commenting or uncommenting the code.

Commented
Filter is inactive

//add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Uncommented
Filter is active

add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.