Why WordPress’ Gutenberg Block Editor offers better UX than 3rd-Party Layout Builders

Many people tend to associate user experience primarily with visual design, focusing on aesthetics and layout. 

Often overlooked are critical elements like website speed and performance, which are equally essential for a seamless and satisfying user experience. This is something that Dan and I always factor in when working on any development project - so when producing the development specification for the redevelopment of Leeds Tykes website earlier this year, we opted to use WordPress’ in-built page editor ‘Gutenberg’ to allow the Tykes’ marketing team to build pages, rather than reaching for one of the many 3rd party page builders available.

Gutenberg?

‘Gutenberg’ (named after the inventor of the printing press) is WordPress’ block-based editor introduced in 2018 as part of WordPress 5.0. Dan and I had actually been playing around with the editor whilst working together in 2017, before it was merged into WordPress core. Its primary purpose is to enable users to easily build and format web pages with a drag-and-drop approach, where content is organised into individual blocks, offering greater flexibility and user-friendliness.

This shift in the way WordPress encouraged users to edit content moved it more inline with a range of 3rd party plugins that had gained popularity. Despite this switch to block-based page building, 3rd party plugins like Elementor of Divi Builder are still extremely popular. However, based on our experience, these tools actually detrimentally affect users’ experience as opposed to enhancing it.

The Native Integration Advantage

One of the most compelling reasons for selecting the Gutenberg block editor for our WordPress builds is its seamless integration within WordPress. It's not an external add-on but an integral part of the platform. This native integration results in an intuitive user experience, as there's no need to juggle different interfaces or adapt to new environments when navigating the admin.

In contrast, 3rd-party layout builder plugins can disrupt the admin user experience. They often introduce an additional layer to the WordPress editor, with an entirely different set of typography, button styles and UI patterns, confusing users and causing frustration, especially for those new to website management. The native Gutenberg editor, on the other hand, doesn't introduce these complexities, resulting in a smoother and more enjoyable UX.

Flexible Content Creation with Better Page Speed

Content in Gutenberg is constructed by adding and arranging individual blocks, each with a specific function. Gutenberg comes with 70+ blocks as part of WordPress core and allows additional blocks to be created by developers to offer admin users additional layouts and functionality. For Leeds Tykes this allowed us to build custom Fixture, Result and League Table blocks that can be dropped into any page. This modular approach not only enhances content structure but also positively impacts page speed. Harnessing in-built block infrastructure results in cleaner code, less bloat, and a more efficient website.

Many 3rd-party layout builder plugins, while offering extensive design options, can lead to overloading your website with unnecessary scripts and assets, causing slower page load times. We’ve acquired plenty of clients who’ve had a WordPress site built using a 3rd party page builder plugin, only for them to quickly run into issues with site speed and performance.

Google’s PageSpeed Insights tool offers a good indication of how your site performs for your users from a technical perspective and ways to improve it. Whilst there are some things that can be introduced to mitigate the impact external page builders have on your site, hitting a 90+ score on PageSpeed Insights measurements is extremely difficult.

I accept that PageSpeed Insights has its critics, but it does give you a solid assessment of areas for improvement and if following the advice makes your site quicker and easier to use for your customer base, where’s the harm in that?

Future-Proofing

WordPress is continually evolving, it’s changed a lot since I first started working with as a fresh(ish) faced developer around 2009, and Gutenberg is one of the more significant additions in recent years. By utilising native features for Leeds Tykes, we were safe in the knowledge that their website aligns with the WordPress roadmap and future updates.

Additionally, opting for the Gutenberg block editor ensures that the Tykes website remains flexible and easily adaptable in the future. The beauty of Gutenberg lies in its theme and plugin-agnostic nature. Content created by the Tykes’ marketing team within Gutenberg is not tied to a specific theme or plugin, making it effortless to switch themes without the fear of losing content structure or formatting.

Sweating the small stuff

At hrpr we want to create long-lasting relationships with our clients and we know the key to that is in our delivery, in paying attention to the smallest details that can have an exponentially positive impact on your audience. So when we talk about delivering a positive user experience for Leeds Tykes and their supporters, this goes way beyond how the site looks, or ensuring fans can quickly access match information. It’s a much wider range of considerations including which editor will offer the admin team the easiest way to keep content fresh, whilst also ensuring the site performance is fully optimised and Gutenberg is the obvious choice for this.

As a Leeds born lad it’s great to be involved with the Tykes and whilst the squad put in a lot of blood, sweat and tears on the pitch in their bid for promotion, I’ll happily sweat the small stuff on their website from the safety of my desk.