As WordPress developers since more than 10 years, we follow closely the latest developments of the CMS. In December 2018, the big news was the introduction of a new major version, version 5.0.0. There has been a lot of talk online around Gutenberg, the new block-based WordPress editor it introduces, which was both anticipated and feared by those who rely on the world’s most popular web publishing platform.
When any software’s code source is upgraded, developers usually use versions, the goal being to assign a unique name to unique states of computer software. These version numbers are generally assigned in increasing order and have different levels which define if those are major or minor version changes. In the case of this new WordPress version, we are switching from 4.9.9 to 5.0.0, it’s a major change which usually means they will be backward-compatibility issues. In clear words it means if you upgrade, there is no going back. Anyway it’s not like you really have the choice as WordPress is constantly evolving, the team behind it providing fixes of bugs and security issues that are quickly becoming mandatory to install if you want to avoid security breaches.
A new content editor : Gutenberg
The main improvement of WordPress 5 is the transformation of the content editor which allows you to update the content of your website pages and articles, usually the main text content f the page. It doesn;t change anything for your visitors, the only change is in the admin panel, it concerns how you create and update content.
The previous text editor looked like this :
The new one will be like this :
It doesn’t look like a big change, but basically this new editor now allows to create content using blocks, for example a heading, a paragraph, a quote or a video instead of sticking everything in a MS Word-like editor like it use to be.
Ditching out the page builders
After installing the version 5 of WordPress, you are granted with a welcome page that states the following about this new release :
- Do more with fewer plugins.
- Create modern, multimedia-heavy layouts.
- Work across all screen sizes and devices.
- Trust that your editor looks like your website.
The most important part here is doing more with fewer plugins in our opinion. Anyway, at Outsourcify this has always been our credo so it’s going in the right direction for us. Mainly by “fewer plugins”, the WordPress team means they expect the Gutenberg editor to replace all the “page builders” plugins that exist to help non-developers to create content with pre-built elements. Most of this tool are convenient when you have no coding knowledge, you can insert blocks into your pages, move them around, and see the effects immediately. We prefer not to use any of those for one simple reason, it’s bloating a WordPress website with tons of additional CSS and JS and the more options they offer, the bigger the pages sent to your visitors are with most of it being unused actually. Instead we prefer to offer to our customer a custom WordPress admin panel with just the elements needed, which will still allow the editor to update all the content, but of course not to change everything which anyway is nearly never needed. The end result is a much lighter website that will load much faster and will rank better in search engines.
Of course some page builders do a great job, we sometimes integrate some, Elementor or Divi Builder for example, when requested by our clients.
It’s also possible to switch back to the previous editor, it’s as simple as installing a plugin called “Classic Editor” from the WordPress team, which disabled the Gutenberg editor and puts back the previous one.
Building content with Blocks
This new editor being integrated into the WordPress core and taking a minimalist approach, it gives some of the advantages of page builders without the bloat, and the new interface is much less cluttered than most page builders, giving a smooth editing experience. As it seems by reading articles online, many content writers don’t like Gutenberg, maybe because they are not familiar with it or think it over complicates the editing of articles. It is a bit more complex than the classic editor but not that much. As of today, we start to use it on all of our WordPress website developments, it works well with our way to handle the development of custom WordPress themes, using Timber and ACF to transform the CMS and into a MVC-framework-like development platform.
Gutenberg with ACF and Timber
ACF actually works well with Gutenberg, ACF version 5.8 introduces the
ability for developers to create their own custom block types using the plugin as a tool to define blocks and the fields they hold. ACF alows to create
Timber, the plugin that inserts the Twig templating engine into WordPress, is also prepared for Gutenberg, and it actually recommends using the ACF Blocks which can then be displayed in a clean way in the templates.
Check these articles on the subject :
Using Gutenberg with Timber
ACF 5.8 – Introducing ACF Blocks for Gutenberg
Upgrading our client’s websites to WordPress 5
We have updated all of the WordPress under maintenance with our team to WordPress 5 (5.0.2 actually as of today) and it was a straight-forward process in all cases, we installed the “Classic Editor” plugin on some websites first to make a seamless transition, on others with left the Gutenberg editor but it did require a bit of adjusting to make it work properly.
Updating to WordPress 5 and so to the new editor is not without risks, it is most likely to break some plugins or themes, in general anything that customises the way the old editor used to work.
We found out the minimal settings to change is to add in the functions.php the theme support for “wp-block-styles”, this is not well explained online but it’s a actually very simple fix in case you get a white page on the Post or Page edit screen after updating :
// Add support for Block Styles / Gutenberg editor
add_theme_support( 'wp-block-styles' );
