Some of you will be tearing your hair out because of WordPress 5.0 and Gutenberg.
Some of you will be waiting until it is more stable.
Some of you will have no idea what we are talking about.
As an intro, on 6th December 2018 (i.e last month at the time of writing), WordPress released its biggest update ever: WordPress 5.0. The main news in this update is the Gutenberg Editor, a supposedly much more fluid and easier to use main editor within the WordPress Content Management System.
So what’s the big deal?
Well, whilst the general consensus seems to be that WordPress 5.0 and Gutenberg will be better in the long run, the actual release was far from ‘fluid’ or ‘easy’. It may also produce some significant issues from both a website management and SEO perspective – both of which we have a very large interest in:
Why the Update?
WordPress accounts for around a third of all websites globally, and over 50% of all new websites. That’s a big market share, but everyone wants the top spot. As such, WordPress needs to keep updating. Otherwise, in time there will be a better, slicker, more powerful contender that ousts WordPress from their digital throne.
We believe that this update is a major step towards mitigating a direct threat to the dominance of WordPress as a platform. It’s a threat faced by the web design industry as a whole and one that was somewhat incubated by the success of WordPress’ blogging platform: the drag and drop editor. The ability for those without coding skills or a keen eye for design to create a website. As we have mentioned in a recent post, platform’s such as Wix and SquareSpace (amongst others) are constantly developing as a viable option for users. As these easy to use, drag and drop platforms become more and more powerful, WordPress as a platform (and indeed web design agencies) will be presented with further competition. In our opinion, this update is in response to this growth in the web design market.
It must be said that large updates are rarely well received. Humans are creatures of habit. If we like something, we tend to want to maintain the status quo. Think back to major platform updates, app redesigns or company rebrands. Nobody liked it when Facebook redesigned their news feed, people are constantly complaining of IOS or iTunes updates, there was even uproar when AirBnB rebranded. So take it all with a pinch of salt.
Overall, the reaction to the release of WordPress 5.0 was not the best. Unlike adverse reactions to changing the status quo, most appear to be positive about the direction that WordPress is headed. The problem stems from how half-baked the update appears to be, the notice given for the release date and the lack of compatibility from plug ins.
First things first, Matt Mullenweg (founder of WordPress and CEO of Automattic) announced that WordPress 5.0 would be released on 6th December. The reason why this didn’t go down so well with the community was that this announcement was made on the 4th December. That’s right. 72 hours warning before ‘go live’ of the largest WordPress update ever. That doesn’t give the community all that much time to prepare, even if they were ready for the roll-out. There were reports of people having to cancel business trips in order to update content at the 11th hour. With such a large community (over 30% of all websites), you might expect a longer notice period for such an event. Yes, the Gutenberg editor had been available as a plugin for beta testing, but that doesn’t quite cut it.
Mr. Mullenweg may have been excused for his hasty approach had the community been prepared, and indeed the update been ready. The petrol for this fire of discontent was (and is still) that WordPress 5.0 just wasn’t ready to go live, despite Mullenweg’s claim on 4th December that the target release date was “based on the stability, testing, and reports on the release candidates for WordPress 5.0 so far”.
There were major questions around accessibility (the ability for disabled users to use the interface without having to download a plugin) and the fact that the community believed there to be hundreds of outstanding bugs. It also wasn’t ideal for all of the plugin and theme developers who were working towards ensuring that their plugins/themes were compatible with 5.0. In a blog post by the popular Yoast SEO plugin, Joost de Valk (Founder and CEO of Yoast SEO), was adamant that they were ready for go live but that realistically people should wait until January for the update to be more stable and for other plugin developers to make their plugins compatible.
From most of the content online, it is clear that this release won Matt Mullenweg no new friends!
What is the Gutenberg Editor?
The WordPress 5.0 update has been dominated by news of their brand new editor, also known as Gutenberg. The largest feature of Gutenberg is that it is a ‘block-based editor’. This means that there are a number of pre-determined blocks, such as ‘heading’ or ‘image’ which you can pull onto your page and edit. You are also able to create your own custom blocks which can then be saved and re-used.
WordPress claim that this not only gives the user higher levels of freedom when creating elements, pages or indeed themes, but also allows consistency of design through re-usable blocks. As such, design & development agencies will be able to create these blocks which can then be used by clients. In their own words ‘This lets your clients add new content anytime, while still maintaining a consistent look and feel’. In reality, we were already able to do this through custom fields and meta boxes, but the new Gutenberg Editor does allow for more design freedom without the need for coding knowledge.
Again, this feels very much like a move towards a more flexible drag and drop editor used by website builders. Regardless though, most commentators believe that this is the best route forward in the mid to long term.
A Significant Change to UI
WordPress is famed for its ease of use. Gutenberg aims to continue this success. As Smashing Magazine put rather succinctly, “Gutenberg doesn’t change how WordPress functions. It does, however, change the way website owners (or creators) interact with it”.
Gone are featured images, adding media from the library or the need to input short codes or create custom fields. All replaced by more of a WYSIWYG (what you see is what you get) editor. Simplicity rules supreme with this new editor, with pages beginning with a Title and text box, nothing else. The user can then add blocks as and when they see fit.
The user now has the ability to create buttons, add columns or add text over images, all in an interface that has stripped out everything that is not necessary for that particular task. Users are only displayed customisation options relevant to that particular block, and Gutenberg offers Undo and Redo buttons as well as overarching information for the page.
The UI of Gutenberg is definitely cleaner than the current (or old) editor. Although we do not view this as the biggest change. The real value comes in the learning requirements for the user. No longer do you need to learn how to use ACF or implement custom HTML, ‘Users only need to learn how the block works in order to use all of its features’.
The main objective of this new interface is to create a singular point through which the user interacts, customises and publishes content through WordPress. Let’s have a look at the major elements that Gutenberg offers:
Gutenberg editor functionality
Whilst not a completely free form website builder they have definitely taken points from popular platforms that do offer their users a more versatile editing experience.
We have touched upon this above – one of the main differences within the way that the Gutenberg editor works is the new block editor format. This is not anything revolutionary and lots of other platforms have been utilising prefabricated elements in some sort of drag and drop function for a number of years now. However, it is significant that WordPress is adopting this as their main editor functionality.
This is a simple piece of functionality that editors like Wix have had on their platforms for some time now. Buttons. You no longer have to populate your button copy and links within a standard editor field but can visually see a button added within the CMS. What you see is what you get.
Many users may already use plugins to drag and drop sections of pages – albeit through the use of a plugin. The difference is that this functionality is now integral to the Gutenberg Editor. We believe it’s something that should have been integrated a long time ago. Creating fluid and adaptive sections for a site that can then be edited and repositioned easily is essential. Within the new editor you can either drag and drop or use the up and down arrows to change the position of the block.
Copying block content:
Nobody wants to create each page from scratch, creating blocks over and over again. Users expect to be able to copy and duplicate elements in order to streamline their page creation experience. WordPress previously had to use post or page duplicate plugins in order to save time when creating a website, Gutenberg provides this functionality as part of its core offering. Users can save, copy and duplicate blocks to be used multiple times throughout the site.
Tables are always a pain, especially in a world where elements need to respond to multiple screen sizes. The functionality is still not perfect but it has certainly been improved. You can say goodbye to clunky repeater fields!
This feature allows you to easily change the block type during editing. Change image blocks to galleries or headers, or change the format of text blocks instead of having to create an entirely new block. It should be noted that you can only change to related blocks, for obvious reasons. For example, you cannot change an image gallery to a text block.
Gutenberg facilitates keyboard shortcuts which for designers, CMS admins and developers that use the platform on a regular basis can become a real time saver. It’s great to see that the beloved cmd+S ‘save’ command is now available whilst creating web pages. Our designers are always utilising keyboard shortcuts on the Adobe CC suite so we expect them to quickly associate themselves with all of the shortcuts provided by Gutenberg.
On Gutenberg you have several options that allow you to control how you navigate the editor there are 3 different ‘views’
Top Toolbar – This allows you to choose where you would like your toolbar to sit, either directly attached to the block you are working on like so:
Or a full width tool bar at the top of the page like this:
This is a handy feature which allows admins to determine which way works best for them, some people like to have the controls immediately available to the block they are working on, whereas others would prefer to stick to the standard top toolbar to declutter the page. It’s comparable to how every Adobe user likes their ‘Workspaces’ to be set up just the way they like it…
Spotlight Mode – This feature allows you have the block you are working on stand out from the others making it bold and fading other blocks a simple way of decluttering the workspace. It’s actually quite a nice little feature that helps you focus on a single item at a time.
Full screen Mode – Similar to the above this allows the you to declutter the screen further by minimising the WordPress admin menu to the left.
Do you need to use Gutenberg?
You do not have to use the Gutenberg Editor. You can update to WordPress 5.0 without having to deal with the issues caused by incompatibility with Gutenberg. WordPress have been very clear that you are able to download and enable the Classic Editor plugin and therefore keep your editing experience the same. WordPress have also stated that this plugin will be “fully supported and maintained until at least 2022, or as long as is necessary”.
Therefore, you can continue to kick that can down the road if you so please and continue to use the TinyMCE-based editor of old. Most of the advice is that you delay using the Gutenberg editor until it has become more stable, and until your developers have fully prepared the site for the switch.
If you were to switch to Gutenberg (or have already done so), there are a number of issues that you want to bear in mind:
There are likely to be legacy plugins in use on your site that are not compatible with Gutenberg.
If you use Advanced Custom Fields or meta boxes, these may not work with Gutenberg and you will certainly need to inform your client of new editing practices.
Should you update to WordPress 5.0?
Yes…but not fully. It’s fine to upgrade to WordPress 5.0 but we would advise on using the classic editor whilst you (and the rest of the community) get the house in order. You will need to prepare and test your website using the Gutenberg Editor prior to go live to ensure that
What Does the Future Hold?
WordPress’ release of Gutenberg seems to fly in the face of their backwards compatibility (to PHP 5.2) and their 15 years of technical debt with many developers wondering what the future holds. Many are calling for a revamp of the codebase, whilst others are questioning whether this leaves WordPress in a limbo between an enterprise level CMS and a drag and drop website builder.
The vision does however appear to be relatively clear. A CMS that provides more flexibility for your non-technical user. A world that requires less plugins. A world where WordPress offers both drag and drop functionality and a platform that can be used by developers.
Whether users stick around long enough to realise this vision is another question. In our research surrounding this topic there are numerous questions as to whether WordPress is a viable platform moving forward. However, more often than not, the question was immediately followed by ‘what is the next best option?’.
For now, whilst this update may well have been served to the customer slightly rare, the community is scrambling to make it work. Our advice is to hold off on Gutenberg for now, but prepare for the switch. We all have to move with the times.
Update January 2020: Yellowball have recently redesigned and redeveloped our own website (launched December 2019), for which we used Gutenberg. We’ve also used Gutenberg on a number of our client’s sites. In short, it’s awesome. Super flexible, super easy to use. We would highly recommend making the switch!