As a WordPress expert with over 15 years of experience building websites, I‘ve seen the full site editor go from an experimental feature to a core part of WordPress. It‘s a powerful tool for customizing your site‘s design. But sometimes the site editor can display a frustrating blank screen instead of your site preview.
After troubleshooting this issue for many users over the years, I‘ve narrowed it down to two main causes and solutions for fixing the blank site editor screen in WordPress.
Contents
A Quick Primer on the WordPress Site Editor
Before diving into the common blank screen errors, let‘s recap what the site editor is and how it works.
The full site editor was introduced in WordPress 5.0. It gives you a visual interface to customize your header, footer, templates, and more.
This editor works hand-in-hand with the Block Editor (a.k.a. Gutenberg). All the changes you make in the site editor use WordPress blocks for layout.
Blocks are like modular Lego pieces for constructing web pages. There are blocks for images, paragraphs, galleries, columns, and more.
The site editor uses the WordPress REST API to load a live preview of your site as you design it. The REST API is the key that unlocks the magic of seeing your changes in real-time.
Why You Might See a Blank Site Editor Screen
Now that you know how the site editor works behind the scenes, let‘s get to the bottom of why it sometimes displays a blank screen instead of your website preview.
After troubleshooting this issue for dozens of frustrated site owners over the years, I‘ve isolated two culprits responsible for 99% of blank site editor errors:
1. Mismatched WordPress URL Settings
This is the most common cause of blank site editor screens.
WordPress needs your "WordPress Address" and "Site Address" to match in order to load the editor preview properly. If there‘s any discrepancy between the two URLs, it confuses WordPress and breaks the preview.
For example, if your WordPress Address is http://www.example.com but your Site Address is just http://example.com without the "www", that mismatch can lead to a blank editor.
It‘s an easy oversight when setting up your site, but luckily quick to fix.
2. The REST API is Disabled
The second most common culprit behind blank site editor screens is having the REST API disabled. As mentioned earlier, the editor relies on this API to display a live preview.
Some site owners intentionally disable the REST API to limit access to their WordPress data. Plugins like Disable REST API make this easy to do.
However, disabling the REST API breaks the WordPress site editor preview.
Now that you know the likely causes, let‘s move on to the solutions and step-by-step instructions for getting your site editor up and running.
3 Steps to Fix the Blank Site Editor Screen
Follow these 3 troubleshooting steps to get your site preview loading properly in the WordPress site editor again:
1. Verify WordPress URL Settings Match
First, login to your WordPress dashboard and go to Settings > General. Scroll down to the WordPress Address and Site Address settings:
Make sure these two URLs match exactly. If you see "www" in one and not the other, edit them to match.
2. Check if REST API is Disabled
Next, check whether the REST API has been disabled on your site. There are two ways this might have happened:
A) Via Plugin
Go to Plugins > Installed Plugins and check for any plugins that disable the REST API, like Disable REST API or WP REST API Controller. If found, deactivate the plugin.
B) Via Custom Code
Some custom code added to functions.php or snippet manager may also disable the REST API. This code will need to be removed.
You may need to dig through your files and code to check for any customizations related to the REST API and undo them.
3. Refresh the Site Editor
The last step is the easiest one!
Simply go back to Appearance > Editor and the blank screen should be replaced with a live preview of your site.
Give the page a quick refresh for good measure. The editor preview should now load properly without any more frustrating blank screens!
Alternative Fix: Use a Page Builder Plugin
If you continue having issues with the built-in WordPress site editor, there are couple good alternatives:
-
Elementor – The most popular WordPress page builder. Lets you design pages and templates visually.
-
Divi – Elegant page builder from Elegant Themes. Comes with hundreds of premade layouts.
-
SeedProd – A fast and lightweight page builder optimized for speed. Great for landing pages.
These premium WordPress plugins provide an intuitive drag-and-drop interface for customizing your site‘s design. Unlike the WordPress site editor, they work with any theme too.
So if you find yourself constantly struggling with blank screens in the default editor, a page builder like Elementor or Divi can save your sanity!
I hope this guide has helped you troubleshoot and resolve any frustrating blank screen issues with the WordPress full site editor. Let me know if you have any other questions!
