How to test Gutenberg and update to WordPress 5.0
After much anticipation and trepidation, WordPress 5.0 is here. The most visible change is the new Gutenberg editor, which replaces TinyMCE and also creates new headaches.
As with any major change that dramatically alters the user experience (UX), there are concerns about how people will react to it, and also what it’s going to inadvertently break. This article addresses the latter and explains what you can do about it.
- How to test new versions of WordPress
- How to restore a broken WordPress site
- How to update your live site after testing and fixing it in a Development environment
How to test new versions of WordPress
A lot of people put their trust in WordPress and assume everything is going to work when they press the Update button. However, anyone who has been running and hosting their own WordPress installs for any significant period of time will tell you to not blindly trust it. One of the worst experiences for any webmaster is the moment when you update WordPress and the site breaks.
Fortunately, the pain of breaking your site with a WordPress update is completely avoidable. The key is to test an exact copy of your site in a development environment.
Development Environments
The idea of creating a development environment may sound arduous and intimidating but it actually isn’t. WPEngine makes it incredibly easy by providing three different environments for every site you host with them:
- Production
- Staging
- Development
When you have these three environments, it’s important to make sure the Staging and Development sites are password protected. Otherwise, they will be publicly available and may get indexed by Google and other search engines.
To get your Development environment ready for testing, you will need to make a copy from your Production environment. To do that in WPEngine, navigate to the Development environment and click on the Copy from select menu and choose Production.
Choose the most recent backup point from the Production environment and then finish the process. WPEngine will email you when the copy has been completed.
The Development environment is an exact copy of your Production environment. The only difference is that it changes the image and internal links to the development domain. That’s a good thing! You can now update and make potentially destructive changes without breaking your live site. If you do break the Development environment, all you need to do is copy from the Production environment again and start over.
Testing what works and what doesn’t
If the WordPress version you want to test is already publicly released, then you will see the Update option and can go ahead and update your development copy. However, if you’re wanting to test a beta or preview release, you will need to install the WordPress Beta Tester plugin.
After you install and activate the Beta Tester plugin, navigate to Tools > Beta Testing. Click on Bleeding edge nightlies and then click the Save Changes button. Then go to the Updates page and click the Update button to upgrade WordPress to the latest beta or preview release.
I went through this exact process and installed WordPress 5.0 beta 2. The first thing I did was navigate to Posts and click on an existing post. I was unpleasantly surprised to see a blank white page instead of my post. I then added a new post but that displayed a blank white page too. Things did not look promising.
I proceeded to deactivate my plugins one at a time. Each time I deactivated a plugin, I would test the Posts page but it was still blank. I finally deactivated the Yoast SEO Premium plugin and that made it work again. I was a little shocked because Yoast has been extremely active and ahead of the curve making sure their plugin performs optimally with Gutenberg. Fortunately, the fix was easy. All I needed to do was upgrade from 9.0.2 to 9.0.3 and it was fixed. And to Yoast’s defense, I was testing everything on a nightly beta build, so it’s unreasonable to expect everything to work perfectly in that environment.
As soon as I was able to get Gutenberg working, I immediately noticed that Gravity Forms was missing its functionality. If you experience something similar, the first thing you should do is search for the plugin name and append it with Gutenberg. Fortunately, Gravity Forms had a solution for this. They created an add-on that you have to install and activate to make their plugin work with Gutenberg.
It’s important to note that I don’t run a lot of plugins. However, that’s not the norm for many WordPress sites. While plugin bloat can be a serious speed and security problem, it can also easily break a site when WordPress is upgraded. I predict that this will be a big problem for many webmasters as soon as WordPress 5.0 becomes available to everyone. Plugins will either break functionality or the functionality will be missing altogether.
What to do if a plugin breaks Gutenberg
Similar to my experience, some plugins are going to completely break the editor experience or their features will be rendered useless. In my case, I was able to update one of the plugins and download an add-on for another to restore full functionality. However, it’s reasonable to assume that many other people won’t be so lucky.
Do not despair. You have options.
The easiest way to get things back to normal is to switch back to using the old TinyMCE editor. You can do that by installing and activating the Classic Editor plugin. That should make everything function like 4.9 all over again. That will at least buy you and the plugin makers some time to get their code fixed.
Switching to the Classic Editor is not a long-term solution though. Ideally, everyone should eventually switch over to Gutenberg since that’s the codebase that will be native to the Core and will be actively supported moving forward. That means you may still need to find a solution for any plugins that break the Gutenberg UX and are also no longer updated by the developer.
How to restore a broken WordPress site
This section of the article is really meant as a preventative measure because the best way to restore a broken WordPress site is with a backup and restore service. WPEngine has it built in with their hosting service but there are other options if you don’t host with them.
Before I hosted my sites with WPEngine, I used Automattic’s VaultPress service. Similar to WPEngine, VaultPress automatically backs up your site and makes it incredibly easy to restore your site. VaultPress has saved me more than a few times. The biggest difference between the two services is that WPEngine requires zero configuration and is easier to restore.
There are many other plugins and services that can backup and restore your WordPress site but if you’re not hosting with WPEngine, then I recommend use VaultPress.
Taking your site live after testing and fixing it
When you’re done testing, you can either update WordPress from the Admin on the Production environment or you can copy the Development or Staging version to the Production environment. The only reason you would need to copy it is if you had to make code changes to make it work properly.
Jon Henshaw is the founder of Coywolf and an industry veteran with almost three decades of SEO, digital marketing, and web technologies experience. Follow @[email protected]