More

WordPress Block Editor White Screen

By Antti Hurme 05/12/2022 No Comments 2 Min Read

Here’s a quick post about how I managed to break my WordPress installation with a faulty configuration. The site worked for the most part (Admin, pages, configuration, upgrading, plug-ins and the list goes on). The thing that was broken, was the new Block Editor. I was able to use the classic editor for creating posts, but as soon as I disabled the plug-in, editing or creating posts and pages was broken. The only thing I had was a white screen.

You should of course do the basic debugging, which is the most likely cause if something breaks. But if you exhaust the basic options and still have this error. Then perhaps, this is also the solution for you.

  • Disable WordPress Plug-Ins
  • Switch to the default Theme
  • Enable WordPress Debug Mode in wp-config.php
    • define( ‘WP_DEBUG’, true);
  • Check Nginx or Apache error logs

In my case, all the previous debugging didn’t provide the solution. I didn’t have any errors, but rather than that, I had a block in my nginx configuration that was only visible in the nginx access.log file. The installation was working, but nginx blocked access to the vendors directoy and returned http code 404 not found.

"GET /wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1.1 HTTP/1.1" 404 555 "https://wordpress.site/wp-admin/post-new.php" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.56" "-"

"GET /wp-content/plugins/gutenberg/build/vendors/inert-polyfill.min.js?ver=6.1.1 HTTP/1.1" 404 555 "https://wordpress.site/wp-admin/post-new.php" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.56" "-"

"GET /wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.1.1 HTTP/1.1" 404 555 "https://wordpress.site/wp-admin/post-new.php" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.56" "-"

"GET /wp-includes/js/dist/vendor/lodash.min.js?ver=4.17.19 HTTP/1.1" 404 555 "https://wordpress.site/wp-admin/post-new.php" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.56" "-"

"GET /wp-includes/js/dist/vendor/moment.min.js?ver=2.29.4 HTTP/1.1" 404 555 "https://wordpress.site/wp-admin/post-new.php" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.56" "-"

As you can see, the access log showed the 404 error. I verified that the files were present, and then turned to my nginx configuration.

#        location ~ /(api\/|conf[^\.]|include|locale|vendor) {
#                deny            all;
#                return          404;
#        }

I’ve commented out the block using the # character. The location configuration matched the word vendor, and provieded the browser a 404 error. As the 404 return was only partial, the site worked for the most part but was clearly visible when opening the admin page to write or edit a post or page.

Lessons learned? Also check your access.log file in addition to your error.log to look for nginx or apache configuration mistakes…..

Written By

Who am I? | Linkedin

View All Articles
C
Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.