Happy 2019! We've made it to the end of January and thought we'd kick off our first blog back with a 'What's New' on the new WordPress 5.0 (Hello Gutenberg). 

 

As of last month, WordPress 5.0 “Bebo” has been live! Are you one of those people who ignore all the updates? This one might be worth taking a look at it - it's the biggest update to come out of last year.

 

And if you're only here to see how to go about updating, then skip down the page to 'How To Initate This Update'.

 

With the new Gutenberg editor, WordPress has totally revamped how users and developers use the CMS. Not only is there a fresh new Twenty Nineteen theme which is the default on all new installations, but it's now all about the blocks.   

 

But before you jump in and go for it, make sure you test it first! If this is the one update you are actually going to make, hold off pressing that button until you've completely tested it with your editor, third-party plugins, even your theme. You don't want to break anything. It might sound obvious, but as with an new version of WordPress - always always always test. 

 

So while you're waiting to press that update button, here's what's new with WordPress 5.0. 

 

So, What's New with WordPress 5.0?

With previous updates the changes have been pretty minor and haven't had much of an impact for many of us. WordPress 4.8 (Evans) and 4.9 (Tipton) saw improvements in the visual editor, new widgets, and then a bigger step towards user-centric functionality with great improvements to customisation and code editing.  we got a multitude of new widgets and improvements, along with a handy improvement to how links work in the visual editor.

 

This time it's a bit different. Instead of adding a few minor improvements here and there, it entirely focuses on 2 things:  
- The new Gutenberg WordPress Editor
- Twenty Nineteen WordPress theme

 

Of course, there are some minor changes and bug fixes but really it's about Gutenberg.  

 

On the face of it, it might sound like not a lot has changed but this new update is pushing WordPress forwards as a CMS in website building space. 

 

The team at WordPress are actually moving away from their old release cycle with small updates to one where we'll be seeing bigger changes happening all at once. 

 

There will also be minor releases twice per month now that wordPress 5 has been released. 

So what actually is this Gutenberg that we keep talking about? We'll leave it to the Gutenberg handbook to summarise:

Gutenberg began as a transformation of the WordPress editor — a new interface for adding, editing, and manipulating content. It seeks to make it easy for anyone to create rich, flexible content layouts with a block-based UI. All types of page components are represented as modular blocks, which means they can be accessed from a unified block menu, dropped anywhere on a page, and directly edited to create the custom presentation the user wants.

 

It is a fundamental modernization and transformation of how the WordPress experience works, creating new opportunities for both users and developers. Gutenberg introduces new frameworks, interaction patterns, functionality, and user experiences for WordPress…

In simple terms, in the new WordPress 5.0 the classic WordPress editor and text editor that has been used for the last decade, is no more.

 

If might even look rather familiar, as it was added in the WordPress 4.9.8 minor release - A heads up if you like, that change was afoot, right there in your dashboard. 

 

On fresh WordPress installations, Gutenberg is now the default and only editor. If this makes you nervous, then don’t worry; for those that don't like change, the Classic Editor plugin can be installed as a plugin. This means you would be able to use it alongside the new Gutenberg editor. 

 

But only for a limited time. You have until the end of 2021 to slowly get used to the new way, before the Classic Editor plug in will ceases to be supported. 

 

So rather than leave it all until the last minute, we'd recommend getting in the swing of things now so you're comfortable and familiar with Gutenberg and WordPress 5.0. 

 

Why has this happened? There's a couple of reasons. 

1. Competition WordPress Has to Compete

The first is that WordPress has to compete. Although the self-hosted version of WordPress is open source, the team behind WordPress.com (Automattic) is still a business. There is competition out there, and it needs to compete with the other website building solutions to not be left behind. Competitors like Squarespace and Wix grew their marketshare by 180% and 233% respectively between 2017 and 2018, in comparison to WordPress who grew by 17.3%. 

At the end of the day, users need the easiest ways possible to build their websites and write content, even if it's just publishing a blog. There are currently more effective platforms out there and the fancy page builder plugins are growing at an unbelievable rate to meet this need. WordPress needs to catch up a bit! 

Competition isn't necessarily a bad thing - People and businesses benefit from a drive to push forward and develop products and communities faster. 

2. Needed a Rewrite

Second, Gutenberg is now built on React, which is a highly popular JavaScript framework used and maintained by companies such as Facebook and Instagram. Gutenberg also uses many other modern technologies such as the REST API, ESnext + JSX, WebPack, etc. 

 

We mentioned blocks earlier. It's all about the blocks! So you'll be hearing that term a lot. This is all down to it's structure, opening up a whole new work of 'block development' for developers. 

 

As with all new things and changes, there can be complications, especially as developers would likely need to learn new langauges. There is, however, a fantastic WordPress community that comes to the rescue with brilliant open source projects such as create-guten-block. This is basically a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, webpack, ES6/7/8/Next, ESLint, Babel, etc.

 

You would hope with all this change and improvements with editing, that they would also be aiming to improve performance. We're sure this is the case, however unfortunately some reports so far are showing slower performance. But the Gutenberg team has been pushing out a lot of updates, and now that WordPress 5.0 is officially here, we think there will be a lot more to come.

 

There is another downside unfortunately. Many of the WordPress themes and plugins have to be rewritten in order to work with Gutenberg, largely the ones that interact with the WordPress editor. Some jumped on board super quick, for example Yoast SEO, a WordPress plugin developer that pushed out their first Gutenberg update back in July 2017! And they've been releasing new ones ever since. The fact that they were originally anxious about accessibility didn't stop them, and a statement from WordPress regarding the accesibility in Gutenberg is now available.

 

And if you're feeling anxious about all this change yourself, then you can delay these changes by disabling the Gutenberg WordPress editor until you're ready.

 

Twenty Nineteen Theme

The new minimal Twenty Nineteen theme is also included with the WordPress 5.0 update on the front and back-end. 

 

What the Community Thinks of Gutenberg

A whopping 32% of all websites on the internet are powered by WordPress so it's not surprising that the changes have met with mixed reviews. After a decade of very minimal changes, this one is bound to ruffle a few feathers. 

There are over 700,000 active installations, the Gutenberg WordPress plugin only has a rating of 2.3 out of 5 stars. It is worth remembering though that it has been receiving ratings since it was only in the beta stage, whilst also meeting with users who are understandably resistant to big changes. 

WordPress is pushing new languages and technologies, so however you look at it, there are sites that are going to break when they update to WordPress 5.0. It is very difficult to prevent unless every plugin and theme being used has also been fully updated.

Unfortunately in most cases they haven't, so the troubleshooting involved once the site is updated may be rather painful.  

Agencies, freelancers, and developers are the ones that will be impacted the most, which may well be one of the reasons you are feeling concerned. 

 

How to Get Ready and Update to WordPress 5.0

We said it before and we'll say it again - It really is so important to test WordPress 5.0 and Gutenberg first so that you can check your plugins and themes still work correctly. If you have something custom built, then you need to be reaching out to a WordPress developer so that it can all be updated. 

You may be wondering if this update is something that will happen automatically, but unless you have configured EordPress to auto-update major releases, it will be down to you to update it manually. Only minor releases tend to be updated automatically. 

 

WooCommerce and WordPress 5.0

One of the big plugins used in conjunction with WordPress is WooCommerce, so you may be anxious that this will continue to work with the new update. An official statement has been released by WooCommerce to make sure you update to WooCommerce 3.5.1+ before updating to WordPress 5.0 to avoid any potential problems. 

 

How To Initiate This Update

1. Create a Staging Environment

To enable you to test the update without affecting your live site, our advice would be to installing it onto either a test site or use your host's staging environment. 

2. Create a Backup of Your WordPress site

As per #1, you should be testing on a development or staging site but if you're not doing that, you should definitely be taking a complete backup of your WordPress site. To be honest, it's probably a good idea to do that anyway. If you're not sure how to do that, have a look at the various plugins that you can use to do it. 

This WordPress 5.0 is a massive change, so we'd suggest you also take a backup of your entire site and download it, including all of your files and MySQL database. It's always a good idea to have a complete backup on hand ready to launch, should you need it. 
3. How to Update to WordPress 5.0 (Staging or Production)


Here's one more little reminder to please test it first or use a staging environment! 

- In your admin dashboard you would will find WordPress 5.0 is available. In the icons toolbar, simply just click on the updates icon, and then click on the “Update Now” button. Your site will be in maintenance mode while your site is being updated. Your site will return to normal as soon as your updates are complete. 
- You will then be prompted to update your WordPress database.
- Providing everything has gone well with the update, you will then see the “What’s New” screen. And you're done! It's that easy.
4. Check Plugins and Themes (They Might Be Impacted by Gutenberg)
The new Gutenberg Editor comes with WordPress 5.0. As we said above, it is possible to diable this and use the classic editor if you are wanting to. 

When you are conducting your testing, you need to make sure that any of your third party plugins or themes work alongside Gutenberg. Anything that interacts with the WordPress editor will most likely be affected. 

Many developers of plugins and themes have started announcing when they have or will have Gutenberg support. 
When you press the edit option under your pages and posts, it will automatically open in the new Gutenberg editor. If you opt for the classic editor plugin, then the option to use that will also be there. 

 

Troubleshooting Issues with WordPress Update

As with everything new, there are usually some unfortunate few that experience some issues. In this scenario it will likely be down to the thousands of different plugins and themes that currently co-exist in the market. 

Here are some common issues and how to troubleshoot them: 
- If you are seeing the white screen of death, this is most commonly resolved by restarting PHP and deleting the full page cache on your WordPress site.
- Got a “Briefly unavailable for scheduled maintenance. Check back in a minute” screen that won’t go away way after a minute has passed? Perhaps your site is stuck in maintenance mode.
- It could be a plugin that's causing you issues. If you have many, then try deactivating all of them and see if you're issue is fixed. If you then reactivate them one by one, you'll find the plugin that might be needing an update from the developer. 
- It could also be your theme. You could try switching over to a default WordPress theme, for example Twenty Nineteen. If the problem is fixed then you will need to speak to your theme developer. 
- In your browser, troubleshoot and diagnose JavaScript issues. If a crucial component like the Visual Editor (TinyMCE) breaks, this can be helpful .

 

What Happens to Current Content and Shortcodes?

To preserve your current content and format of all your previous posts and pages, they will all appear in one big TinyMCE editor box when opened in the new Gutenberg editor. You can then take advantage of the new update, and 'Convert to Blocks' which will then convert everything to the new Gutenberg blocks. 

The same is also true for shortcodes, where you would do exactly the same thing and select to 'Convert to Blocks'. The shortcode is then turned into a Gutenberg shortcode block. The contact form still renders fine on the front-end.

 

Summary

WordPress 5.0 and Gutenberg is the largest update we have had to WordPress in a very long while.  It affects how users interact with the editor and write content, as well as how developers code plugins and themes. 

Whether or not it's successful will be seen in time, but either way we'll go back to test, test, before you upgrade your site. 

 

For more information on how Sprechen can help support you with your online business needs, head over to https://sprechen.co.uk/ and get in touch.