Icons are missing from Visual Editor

Question

The Problem

I've been grappling with this bug over several days now to no luck. When editing either a post or a page, all icons in the Visual Editor are missing:

As you can see this, includes the icon for the Gutenberg Add Block, which is completely invisible and here highlighted by its alt text. Also notice that the icons in the WP Admin section/toolbar display as normal, indicating the problem is only with the icons of the Visual Editor.

What I've Tried

To date, my extensive Googling, tweaking and testing has proved useless. The following is a list of all the solutions I've tried so far, from the standard to the slightly more complex:

• Clearing browser cache/viewing the page in private browsing mode (as suggested here)

• Deactivating all plugins (as suggested here)

• Checking that the values of Wordpress Address and Site Address in Settings > General match

• Going to Settings > Permalinks and clicking Save Changes (as suggested here)

• Adding define( 'WP_MEMORY_LIMIT', '96M' ); to wp-config

• Adding define( 'WP_MAX_MEMORY_LIMIT', '256M' ); to wp-config

• Adding define(‘CONCATENATE_SCRIPTS’, false); to wp-config (as suggested here)

• Adding $_SERVER[“HTTPS”] = “on”; to wp-config (as suggested here)

• Replacing the wp-includes/js/TinyMCE folder entirely with the same folder from a fresh Wordpress download (as suggested here)

• Replacing the entirety of wp-admin with the same folder from a fresh Wordpress download (as suggested here)

• Using wp-cli to do a site-wide search-and-replace of http://www.myexamplesite.com to https://www.myexamplesite.com (as suggested here)

• Disabling both HTTPS Enforce and and External Links Rewrite in using Siteground's cPanel (but not deleting the SSL certificate itself)

Not a single one of the above solutions results in the icons being restored again, even when I check the changes using Incognito/Private Browsing to counteract caching.

Possible Cause

I have some suspicion that this issue could have been caused by activating free Let's Encrypt SSL on the server, due to this post, and I also don't recall this issue occurring before I made that change, but I'm unsure as to a) how exactly enabling the free Let's Encrypt SSL would cause such an issue, and b) how it would be fixed.

Has anyone else dealt with this before?

Answer 1

After a few more days of frustrating testing, I managed to track the issue down to the External Links Rewrite option in Siteground's Site Tools, under SSL options. When HTTP Enforce is enabled with the optional External Links Rewrite option (being able to see these changes virtually immediately in the browser requires a Force Refresh, which was what has made testing this stuff so hard) the icons in Visual Editor go missing. When External Links Rewrite is turned off, the icons show up again.

I've contacted Siteground's customer support for a solution, but so far they claim they've been unable to reproduce the issue, despite the fact I've so far managed to reproduce it on both of the two systems I have access to: Firefox and Chrome running on Windows 7, and Firefox running on MacOS High Sierra.

UPDATE:

Within 6 hours of filing the ticket, Siteground support finally escalated it to a more senior technical person, who then gave me the following response:

This response confirms what I'd suspected: that the "External Links Rewrite" option in Siteground's control panel (which they call Site Tools) is broken. They also claim that the team were already aware of the issue, although I'm skeptical of this given that it took a few responses for the initial support to escalate the ticket and the fact that the new React-based (and admittedly very good) Site Tools interface seems to have been launched just a few weeks ago.

In any case, Siteground insist a fix is on the way, and that in the meantime the solution is to disable HTTPS enforcement from the Site Tools panel entirely, and instead download its SG Optimiser plugin, enabling HTTPS Enforce and External Links Rewrite from there. I've tested this solution and can confirm that it solves the issue.

I inspected my .htaccess file after enabling these options with SG Optimiser, and it seemed to me that the only thing it was adding was the following Apache directive:

# HTTPS forced by SG-Optimizer
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
</IfModule>
# END HTTPS  

As someone who tries his best to run a bare-minimum installation with only the most necessary plugins, writing code for everything else, I wondered if this was the only thing SG Optimiser was doing to force HTTPS, and if I could replace it by simply adding the same directives to .htaccess myself.

However, on further inquiry from Siteground support, this doesn't seem to be the case:

Now, the only thing left to do is to wait for Siteground to fix this bug in the new Site Tools interface, after which I'll finally be able to remove the unnecessary SG Optimiser plugin and enforce HTTPS from the control panel itself.

Answer 2

I've just come across this issue myself on a new siteground install.

After some troubleshooting I found disabling all the Frontend Optimization options in the SG Optimizer plugin brought the editor icons back after purging the cache.

Then I enabled them one by one (except Combine CSS Files this has caused issues in the past and wasn't enabled before anyway)

I purged the cache after re-enabling each option checking the icons were still showing on the editor page after a page refresh.

It seems to have done the job.

Pete