Many WordPress sites use page builders to aid in page template creation. They typically involve piecing together modular sections (single-column, multi-column, etc.) and elements (headings, paragraphs, buttons, images, etc.) to create pages visually. The primary aim is to empower non-technical users to build complex pages.
That said, the simplicity of these tools can come at the expense of performance. While third-party solutions initially scratched a specific client itch, they’ve since been outclassed by Gutenberg. With the backing of the core WordPress team, this first-party solution is primed to make the other options extinct eventually.
The Rise of Page-Building
Page builders lower the entry barrier for non-technical users to create fully-featured pages. They offer an alternate editing experience to WordPress’s Classic Editor and typically come with their ecosystem of elements, extensions, and features.
Below, we run through some of the advantages and disadvantages of leading page-building solutions.
Elementor
Perhaps the best-known name in page building, Elementor features a live preview via its drag-and-drop element editor. You can create individual pages, page templates, and global site widgets.
A downside is that pages built in Elementor are overly verbose with nested HTML elements, making spacing issues common and challenging to debug. Extending Elementor to add more elements requires plugins, which often create compatibility issues, can hurt performance and require ongoing maintenance via making and testing updates.
WPBakery (formerly Visual Composer)
Unlike Elementor, WPBakery includes many more elements without needing to reach for third-party plugins immediately. It includes additional customization options further to fine-tune the look and feel of a site.
However, these additional options create a steep learning curve for editors, and the extended library of available elements creates vendor lock-in. Like Elementor, pages still end up being overly verbose, with many nested HTML elements.
Divi
A unique selling point of Divi is that it allows for built-in A/B testing of page templates. It’s also lauded for its vast library of pre-made templates, easy-to-use template editor, and (apparently rare) live chat option when contacting support.
Divi’s performance is a huge disadvantage, which impacts both the speed of the rendered front-end of the site, and the experience when using the back-end editor. Unlike Elementor, the back-end editing experience isn’t a live preview, adding additional time to the already slow editing experience.
The Rise of Gutenberg
WordPress’s first-party answer to these editing experiences is named Gutenberg, after the printing press inventor. With this nomenclature, the creators are implying that this new editing experience will lower the barrier to publishing, much like Johannes Gutenberg’s moveable type did the same in the 1430s.
The editing experience is visual but also minimal and intuitive. Users can rely on buttons or keyboard shortcuts to quickly add and arrange element blocks throughout the page. With more recent updates incorporating fine-tuning features and visual controls via theme.json, it’s nearly possible to create a 1:1 visual experience when reviewing the front-end and the back-end, without creating the performance headaches that come with third-party page-building solutions.
Development on the Gutenberg editor commenced in the mid-2010s as a standalone plugin. With the release of WordPress 5.0 in December 2018, it became the default editing experience, much to the chagrin of thousands of users who missed their old editor. To this day, Gutenberg (the plugin version) hasn’t fully recovered from the one-star reviews left in frustration with this unexpected change.
The release of the block editor in 2018 was the closure of Gutenberg’s first phase. In all, the project will include four phases:
- Phase 1: Block Editing Experience
- Phase 2: Full-Site Editing Experience
- Phase 3: Multi-Author Simultaneous Collaboration
- Phase 4: Multi-Language Support
Released in early 2022 with WordPress 5.9, Phase 2 created a paradigm shift in WordPress theme development, with the advent of Full-Site Editing, Community Patterns, and theme.json –
- Full-Site Editing brings the experience of editing pages with blocks to the entire website, allowing for block-based headers, navigation, and footers.
- Community Patterns provide resources for developers to leverage existing user-contributed block combinations in their creations.
- theme.json provides theme developers with granular control of how the Gutenberg editors look and behave for editors, allowing them to add and remove editing features, create styling presets for elements, create theme color variations, and it’s the way you register Full-Site Editing components.
The Future of Gutenberg
We’re at the closure of Phase 2, preparing to initiate Phase 3. Little is known about the upcoming phases, as documentation for features tends to lag behind the features themselves, though the links included above are great resources.
It’s expected that Phase 2 will continue to iterate through the end of 2022 and perhaps into 2023. While Full-Site Editing is revolutionary, there are upcoming improvements to the editing experience and additional support for responsive spacing differentiation. With all that considered, Gutenberg remains the premier option for a page builder for your website.
Automattic, the primary sponsor of the WordPress project, has a history of measuring trends in WordPress publishing, analyzing third-party leaders, then devising a solution that renders those leaders extinct. Most features now part of WordPress core started as third-party solutions via plugins.
One of the best elements of WordPress is its robust ecosystem of plugins. Whatever your use case, it’s easy to start because there’s almost always a plugin to suit your needs. At the same time, this plugin ecosystem can be your site’s biggest drawback. Too many plugins can slow your site down and open up security vulnerabilities if you don’t frequently keep your plugins up-to-date.
While third-party page building satisfied an area of need at the time, they’ve never done so tidily. In the era of Google Core Web Vitals, efficiency in performance matters. This is a problem not only on Divi but due to the verboseness of the front-end code created via both Elementor and WPBakery.
When using Gutenberg correctly, this problem becomes a thing of the past. Block combinations in Gutenberg produce a minimal amount of nested containers, creating less HTML for a browser to render on page load. This isn’t a monumental performance enhancement, but it avoids a performance flaw inherent in other editors.
The Takeaway
Gutenberg was developed to provide a first-party solution to a common publishing problem while removing the primary pitfall of other page builders – decreased site performance. While it had a controversial initial roll-out in 2018, the advent of newer features such as Full-Site Editing has proven Gutenberg the best-in-class page builder. History suggests that when WordPress puts its resources behind a software initiative, it doesn’t take long for mass adoption to render third-party competitors obsolete, even when they’ve beaten WordPress to the market.