Gutenberg vs. WordPress Page Builders

Recent improvements to Gutenberg spell doom for page builders.

Since its release with WordPress 5.0, Gutenberg has improved by leaps and bounds as a page editor. Our development team are fans of its flexibility, scalability, and the swiftness it has brought to website builds. 

If you are hoping to replace a page builder like Divi, WP Bakery, or Elementor with Gutenberg, you may find that Gutenberg lacks some of the drag-and-drop simplicity of powerful page builder plugins. But, we prefer it that way. 

Seven reasons we prefer to build websites with Gutenberg

1. Flexible and easy to use. Clients, bloggers, and non-developers will appreciate how easy it is to create complex layouts, group blocks together, and move content around a page.   
2. Reusable blocks. With Gutenberg, you can create a block one time, and then reuse it across your website. These blocks are great for repeatable global elements, such as a CTA above the footer. What’s great about them is you can embed a reusable block, switch it to a normal block, and then customize the content to suit the page. 
3. Custom blocks. Using JavaScript, any programmer can create a custom block that can be used by any WordPress user. Many plugin developers already have custom blocks that extend functionality of their plugins. 
   1. Gravity Forms has a block to easily add a form to a page without using a shortcode. 
   1. Our team programmed our own accordion block to use for content such FAQs. 
   2. WooCommerce has blocks for featured products, sale products, and many others. 
4. Hooked blocks. A lesser known feature of Gutenberg blocks is how they can interact with WordPress hooks. Blocks can be hooked into anywhere your WordPress theme has a hook. We’ve used these several ways:
   1. To create “Popup Blocks” to feature announcements or as CTAs
   2. To add a block before the header, after the header, above the footer, or other areas. Consider how easy it would be to add an announcement above your header just by creating a Gutenberg block. 
5. Blocks are ideal for global elements. Sliders, testimonial carousels, buttons, hero content, and other common elements can be easily created as blocks. Rather than rely on a clunky slider plugin, we have found it easier to build one by grouping images together and adding a .slick-track class to create a simple slider (that can also be added to your reusable block library).  
6. Less code bloat than page builders. Editors like WP Bakery, Divi, Elementor, and others, add too much code to a website, often nesting divs, inside divs, inside divs. For SEO, it’s bad to have a high HTML to content ratio, also known as an excessive DOM size in Google speak. For an average sized page around 500 words, it may be impossible to have better than a 2:1 HTML to content ratio. 
7. It’s part of WordPress core. Being part of WordPress core means Gutenberg will have continued support from the entire community, including security and feature updates. Unlike page builders, it’s free, which means you never need to pay for any features or updates.

Gutenberg vs WordPress Page Builders

There are many things page builders can do that Gutenberg can’t (yet). Page builders are powerful tools, especially if you are an amateur developer or building a site for a client who wants more control creating their own design and layouts.

Drag-and-drop editing

Gutenberg let’s you reorder content, but unlike WP Bakery or Beaver Builder, it isn’t a true drag-and-drop editor. In fact, until the release of WordPress 5.3, adding columns was limited to just equal widths, e.g. 50/50 or 33/33/33. Creating columns in Gutenberg is much more flexible now, but page builders still allow for greater control in page layouts. 

Custom styling without CSS

One other area where page builders allow more flexibility is in design. Most page builders give you the option to completely override your theme’s style, including:

• Font type
• Font size
• Margin, width, padding
• Borders
• Background colors

In Gutenberg, you can customize colors to some degree, or use block styles, but if you want to create a new design it generally needs to be done with CSS. 

However, I’d argue that too much flexibility can lead to a website that lacks a cohesive design. Instead, if you (or your client) use the building blocks you created, you’ll end up with a more consistent design that stays within brand guidelines. 

Security and compatibility

Gutenberg block content is saved as html in the post_content database field. Page builder plugins either use shortcodes or save the content in custom fields, which can lead to other plugins having difficulty working with their content.

Also, more plugins generally means less security. By adding a page builder, you are increasing the amount of plugins your website relies on, therefore decreasing the security of your website. 

Gutenberg has come a long way since 2018. 

We have a lot of experience developing with Gutenberg, and we definitively prefer using it over page builders. If you’re a developer who still uses page builders, we’d encourage you to take the time try Gutenberg for your next WordPress project. We think you’ll be surprised by how powerful of an editor it is. It has enough of the features you rely on from page builders, without the compatibility issues and excessive code.