In 2018, WordPress released the WP Block Editor, also known as Gutenberg — a new way of building and designing web pages that replaced its old TinyMCE editor (or Classic Editor). At Vital, we’ve spent the past two years selecting projects that were a perfect fit for the new editor and carefully evaluating the pros and cons of building websites using the Gutenberg Block Editor vs. the Classic Editor, page builders such as Elementor or Divi, or other content management systems (CMS).

Fifteen successful Block Editor site builds later, we’re ready to fully transition to the new WordPress Block Editor rather than using either the Classic Editor or page builders. The advantages to the Block Editor also secure WordPress’ place as our clear first choice for a CMS for the vast majority of our clients’ web builds and ongoing maintenance. We’ll share all the reasons why the Block Editor knocks it out of the park — but, first, some background.

What does “building native” mean?

When it comes to WordPress, “building native” means using the WordPress content management system and the tools, plug-ins, etc. in the WordPress ecosystem. This is as opposed to using an add-on application like a page builder on top of the WordPress platform.

What is the WordPress Gutenberg Block Editor?

Before 2018, web designers and developers had a few choices:

• Use the Classic TinyMCE editor to build a site, with either a pre-made or customized theme. This required designers to create each individual page layout as a one-off — not exactly the most efficient choice. And, it was too easy to end up with an inflexible, difficult-to-update backend.
• Choose a page builder such as Elementor or Divi. This made page creation much easier and more intuitive, but it came with its own downsides. (More about those in a minute.)

With the release of WordPress 5.0, designers and developers were given a brand new option: the Block Editor. Originally known as Gutenberg, the Block Editor is an enterprise-ready solution for those who want to use native WordPress tools rather than page builders.

Here’s what it looks like to work with the TinyMCE, or Classic WordPress Editor:

As you can see, the visual editor lets you add and edit content, which will be styled on the front-end according to your theme — but it’s not much more sophisticated than a word processor. If you want to do anything beyond the capabilities of whatever pre-made themes are available on WordPress, you need serious coding and development chops.

At Vital, where we create websites and digital marketing strategies for a living, we were able to do a lot with WordPress despite the limitations of the Classic Editor, but it missed the mark in terms of efficient use of our clients’ retainers, and the ability to add and update content to their websites.

By comparison, here’s what the Block Editor looks like:

The main difference is that the Block Editor lets you design each element of the page as a “block,” which can be dragged and dropped exactly where you want it to be. You end up with a powerful, flexible site that can be easily changed or updated.

Want more detail? Check out this post for everything you ever wanted to know about blocks and how they work.

Does Gutenberg replace page builders like Elementor and Divi?

So, does the advent of the Block Editor make Elementor, Divi, and other page builders obsolete? The short answer is: It depends.

Page builders like Divi and Elementor are still great options for:

• Web designers who don’t code (much).
• Smaller, less technical marketing teams.
• Anyone building a site that won’t need to be updated frequently.
• Individuals looking to take their web projects up a notch from non-enterprise building platforms like Wix and Weebly, but who require the support of a page builder.

At Vital, we’ve generally avoided using page builders, due to these serious drawbacks:

• It’s difficult to customize sites in the sophisticated ways our clients need.
• Page builders limit us to using “their” forms and other page elements.
• Similarly, we’re stuck with whatever plug-ins work with each page builder.
• Page builders make it more complicated to trouble-shoot and fix bugs.
• Largely because of the “junk code” created by page builders, site load times are slower.
• Slow load times mean a lower-quality user experience, and lower SEO scores.

According to Matt Chase, Vital’s Director of Front-End Development, “If you are already an expert at manipulating WordPress, page builders are more like barriers than real enablers.” Matt uses this analogy to explain the difference between building native on WordPress and using a page builder:

“Imagine WordPress as a robot that builds documents. Page builders are like a second robot that controls the first robot for you; bringing no new capabilities, but a new set of restrictions.”

So, when the WordPress Block Editor came along, setting out to master it was a no-brainer. The Block Editor gives us the power of a page builder, with the ability to customize that only comes from using WordPress native tools.

For the latest on some of the cool things you can do with the WordPress Block editor, check out this post.

The top 5 benefits to using the WP Block Editor instead of Elementor or Divi for enterprise-level builds

1. The Block Editor makes it easier to assemble and customize content.
   Once you’ve built your library of blocks, you can create templates for different types of pages. Populating your site is as easy as choosing a template for each page, popping in the content, and hitting “Publish.”
2. It’s simple to update or add pages, which maximizes the ROI on our clients’ marketing budgets.
   Building an effective website is only half the battle. Our clients come to us for digital marketing strategies that will continue to drive traffic, create leads, and ultimately convert new customers or clients, year after year.
   To do that, we need to be able to continually create new landing pages, solutions and product pages, and more — in addition to testing and optimizing content on existing pages. The same blocks and templates that make it easier to build sites in the first place also make it simple to update and add pages. When our team is more efficient, our clients get more out of their digital marketing spends.
3. Page load times are faster.
   Building native means leaner code, which means faster page load times — and ultimately higher SEO scores.
4. It reduces “technical debt” by simplifying trouble-shooting and debugging.
   Technical debt is a phenomenon that occurs when a team is up against a deadline, so they complete a project to the best of their ability and plan to “pay back the debt” by fixing any problems later. Using the WP Block Editor instead of a page builder eliminates a potential “point of failure,” so you accrue less technical debt.
5. It eliminates the need for developer time spent on basic tasks, such as embedding videos and tweets.
   The native tools available in the Block Editor let you drag and drop embedded elements, and simplifies other basics that previously required a developer’s time and expertise.

WordPress Block Editor vs. page builders: Website Performance and Code Bloat

In his post, “Damn. Gutenberg Smokes Elementor,” writer and web designer Kyle Van Deusen conducted a head-to-head comparison of the performance of a landing page built in both Elementor and Gutenberg. When it came to Google’s PageSpeed Insights, the Block Editor dominated Elementor.

According to Van Deusen:

“Because I’ve had such poor luck getting any kind of decent scores with Elementor sites (especially on mobile), I’ve given up using [PageSpeed Insights]. Not because it’s not a valuable metric (in fact, it may be the most valuable since this is how Google sees things), but because there wasn’t much I could do about it.” — Kyle Van Deusen

The WordPress Gutenberg editor gave him something he could do about it. Here are the results of Van Deusen’s experiment:

Why should you care about Google’s PageSpeed metric?

• As of May 2021, Google introduced a new ranking signal for search.
• This new ranking signal is based on page experience, which Google measures using its Core Web Vitals metric.
• Page performance and load times have a huge impact on your Core Web Vitals.
• Therefore, a faster-loading page bumps your site up on the Search Engine Results Page. Sweet!

According to Google, page performance matters because “longer page load times have a severe effect on bounce rates.” As an example, Google says that, “If the page load time increases from 1 second to 3 seconds, bounce rate increases 32%.” Up that time to 6%, and your bounce rate goes up 106%.

Why the big difference in PageSpeed scores? WordPress developer Munir Kamal did a clever experiment in which he rebuilt Elementor’s own homepage using the Block Editor and compared the HTML markup generated by each. Here’s what he found:

What’s a <div> in HTML markup?

<Div> is a tag that defines a division or section of a website. In Kamal’s experiment, he used the number of <div> tags to measure the amount of code generated by blocks or widgets when adding content to a webpage.

In addition to speeding page loads, Kamal lists the benefits of “clean HTML markup.”

• Accessibility
• Readability
• Consistency and standardization
• Improved performance
• Effective SEO impact

Why the WordPress Block Editor rules for customization and efficient website builds

Imagine that, instead of building a website, we’re building a car. Before the WordPress Block Editor came along, we assembled each car out of several huge hunks of metal that we painstakingly built to spec, along with some moving parts, also built to spec.

If a client decided they wanted the passenger doors to open on the opposite side, we would have to build completely new doors. If they wanted a faster engine — well, we might have to build them a whole new car.

Dropping the metaphor: Pre-Block Editor, our developers built countless custom layouts for every conceivable version of content required for each clients’ site. If a page needed a section with two columns, an image, and a button, we created that section. If we needed a section with one column, two images, and a button, we created that, as well.

Enter the Block Editor. Now, we’re able to create almost limitless small components that make up each website.

• If we need to make changes, we can easily swap out parts, without rebuilding whole sections of the site.
• Now, each column is a block, each image is a block, and each button is a block.
• We can arrange these blocks according to the content needs of each page.
• We create a library of different block layouts that can be reused as needed.

We create a library of different block layouts that can be reused as needed.

Now, picture a bunch of LEGO® — just a big bin full of blocks, of various sizes, shapes, and colors. A typical page builder like Elementor or Divi is a lot like this bin of LEGO®. If you want to build a castle, you probably can, but it won’t look (or work) exactly like you want it to. You have only the blocks at hand, and none of them are specifically designed for your castle.

Building with the WordPress Block Editor is like creating a castle from a customized LEGO® set — and you’re the one who does the customization. Instead of trying to do the best you can with a bunch of random blocks, you can create exactly the colors, shapes, sizes, and other properties you need to make your ideal castle. Even better, if you need to rebuild the west wing later, you already have the blocks to do it.

The Block Editor makes WordPress the CMS of the future

We’ve done a lot of comparing building native with the WP Block Editor to working in WP with a page builder — but what about other, non-WordPress content management systems?

At Vital, we’ve been around the block (pun intended, actually) with pretty much every CMS there is. We consider ourselves proudly “tech agnostic,” which means we make the best recommendations for our clients, rather than pushing a particular tool or platform in exchange for commissions. We’ve either built or “inherited” client sites that make use of the major WordPress CMS alternatives, including Magento, Drupal, HubSpot, and Sitecore.

Even before Gutenberg came along, we preferred WordPress to other CMS, because:

• It’s open source, so we can build without fear of exorbitant licensing fees.
• Open source also means there are a ton of developers working in WP, giving us access to a huge ecosystem of plug-ins and widgets.
• It’s a secure platform, because its openness is a barrier to “sneaking” anything into the code.
• It makes integration easy. For example, every CRM out there already has an integration built for WordPress.

Now, enter the Block Editor. WordPress maintains all its original benefits, with the added power of an editor that lets us build more flexible, efficient, scalable websites. That’s why, according to Hosting Tribunal:

Says Vital’s Director of Development, Adam Walter: “WordPress is the number one content management system on the web — and for good reason.”

When comparing WordPress to other CMS alternatives, Adam writes:

“It’s almost a guarantee that if you have an expensive enterprise CMS, it won’t take long for current web best practices to leave it outdated. Your website should be constantly converting leads, and to do that, it needs to be generating traffic. And to generate traffic, your site needs to be publishing and delivering content, and meeting constantly evolving web standards. WordPress is up for the task.” — Vital Director of Development Adam Walter

How to get the most out of the WordPress Block Editor for enterprise-level websites

Since Vital started using the Block Editor, it’s radically changed the way we go about designing and building websites.

The old way
We used to take a top-down approach to building our clients’ websites starting with design and ending with code. That meant:

• Our designers created a comp, or visual representation, for each web page, using a platform like InVision.
• Once the client approved the design, we would separate each page into sections — for example, a Hero section, a three-column section with a CTA, and a two-column section with an embedded video.
• Our developers built the sections separately, and assembled them into the final product.

This did the trick, but the Block Editor has allowed us to develop a much more efficient, elegant approach.

The new way
The Block Editor lets us build from the foundation up. We start with brand guidelines, then compose those into a web page. In essence, this transforms the website into a design tool as well as a CMS.

This systems-based approach lets our developers and designers create consistent, replicable, robust sites with less time and effort than ever before.

Here’s how it works:

1. Vital creates a design system defining the parameters of how the website will look, feel, and function.
2. The team builds out each design system element in the Block Editor.
3. We create reusable “blocks,” or content areas, based on the design system elements.
4. We save the blocks in a library of pre-built layouts combining different content modules.
5. We build the site using these layouts, which eliminates the need to code or design pages from scratch. For example, a website with multiple product pages will reuse a single product layout made up of blocks that can easily be swapped out, rearranged, added to, or eliminated. For pages that don’t easily fit into an available layout, the Block Editor makes it simple to create customized pages using whatever blocks fit the content needs.

ACI Worldwide: a WordPress Block Editor success story

One of the most common complaints we hear from clients who come to us in need of a website rebuild is that their CMS’ backend makes updating their site a nightmare. Payments Processor ACI Worldwide was no different — and, they needed their new site to both reflect a recently refreshed brand and generate leads like no one’s business.

Vital used our systems-based approach with the WordPress Block Editor to redesign roughly 400 marketing pages, and over 2,400 pages total. Because the Block Editor empowered our team to build flexible, reusable, customizable layouts out of block elements, we were able to get the job done with maximum efficiency.

But building the site was just the beginning. To make sure we deliver on our promise of providing ongoing digital marketing strategies that generate leads, we need to be able to analyze the site’s performance and easily update and optimize content, as well as adding new marketing pages and features as needed. The Block Editor makes it simple to do all that in significantly less time, so ACI Worldwide can do even more with their digital marketing retainer.

Still on the fence about the WordPress Block Editor?

Joost de Valk, the founder and Chief Product Officer at Yoast, puts it this way:

“The Gutenberg project and with it, the block editor is literally where all the innovation in the WordPress space is happening. Think of it this way: the only car race you’re going to win by using old technology, is a classic car race. If you want to win in SEO in the next few years, I guarantee you’ll need to be on the block editor. If you’re not, and if some of your competitors are, they’re going to beat you.” — Joost de Valk

At Vital, we’re about much more than SEO, but the same holds true across the full range of digital marketing strategies. We’re continually impressed by what the WordPress Block Editor allows us to accomplish, and we’re always pushing the envelope to deliver better results and greater ROI for our clients.

Want to learn more about what the WordPress Block Editor can do for your website project or digital marketing initiatives? Contact us.