Gutenberg vs. Page Builders: 5 Things You Should Know

When it comes to getting up and running with a WordPress website, page builders often come to mind as a quick, do-it-yourself approach. With the release of WordPress 5.0 in December 2018 however, the WordPress landscape was shaken up by the debut of Gutenberg. 

More than just a new editor, Gutenberg laid the foundation for a completely revolutionised way of developing WordPress websites. It introduced a number of attractive features, including some key advantages over page builders like WPBakery, SiteOrigin and BeaverBuilder.

With that in mind, we’ve compiled five things about Gutenberg and page builders that you should know.

1. Performance, keep it in core!

There are many things that can impact and improve the performance of your website. File minification, using an image compression plugin, and making use of Content Delivery Networks (CDNs) are just the beginning. However, many page speed tests that compare Gutenberg and other page builders right out of the box, consistently show Gutenberg as a top performer. 

Page builders like BeaverBuilder, SiteOrigin and WPBakery are WordPress plugins that can often bring a lot of bloat in the form of unnecessary code that negatively affects page performance. Gutenberg on its own, and especially when combined with a powerful add-on like Advanced Custom Fields, can take your website to new heights without the need to compromise page performance.

2. Create your own beautiful layouts effortlessly

With Gutenberg and page builders alike, each of them come with various ready-to-use modules, elements of ‘blocks’ (that’s Gutenberg talk) with which you can easily put together custom layouts — as many as your heart desires! 

Gutenberg in particular includes over 60 block types and with each one, you are able to adjust the colours, formats, sizing, and more. 

Some of these ready-to-use Gutenberg blocks include:

  • Columns
  • Media and Text
  • Cover 
  • Paragraphs
  • Gallery
  • Group
  • Spacer
  • Headings
  • Lists
  • Tables
  • Videos

And the list goes on! The customisation options with Gutenberg truly are endless and best of all, they are incredibly straight-forward.

3. Gutenberg harnesses the power of modern technologies

Gutenberg is put together with React, a blazing-fast JavaScript library built and maintained by the Facebook team, ideal for building user interfaces. While Gutenberg blocks can be built in just JavaScript, we’ve demonstrated in one of our previous blog posts why you might want to consider writing your code in JSX — a syntax extension to JavaScript that is used when working with React. 

As Gutenberg uses a block-based approach in which blocks can be used and re-used throughout your website, it makes sense to utilise React and its component-based approach to building interfaces.

Page builders on the other hand, do not take advantage of this incredibly powerful tool. In the case of WPBakery for example, it is built with code that is very specific to it. So, pages that are built with WPBakery code will become an utter mess if WPBakery itself is uninstalled. Page builders and the code with which they are built, often lack the flexibility and reusability of code as is seen with Gutenberg.

Here at Make Do, we have embraced the recommended WordPress Gutenberg development process and it has optimized our workflow and allowed us to build more powerful, nimble and flexible solutions for our clients. 

4. Build custom blocks with the Gutenberg API

When it comes to the discussion on custom blocks for layouts, this is where Gutenberg truly shines and gets WordPress users and developers like us, truly excited! While the core offering of ready-to-use Gutenberg blocks is impressive, there will likely always be a situation wherein you’ll find yourself needing something custom-made that is not possible by the bundled blocks with Gutenberg. 

With the open-source nature of WordPress, customisation options by way of custom blocks are endless. Blocks can be reused within a given website, as well as in other WordPress websites! After all, it’s JavaScript under the hood, meaning it can be reused without needing to worry about things breaking, as seen with page builder-specific code.

5. Gutenberg is free, page builders often aren’t

As an open-source offering, Gutenberg and all of its features are free to use so you never have to worry about hitting any development obstacles along the way. On the other hand, while page builders do have free offerings, they typically include only a basic suite of features. Users wanting to implement more advanced customisations need to sign up for a premium subscription. 

With WPBakery, a license comes with one-year of updates and pricing begins at $45 USD. While SiteOrigin does have a free offering, for access to premium features yearly subscriptions begin at $29 USD and one-time purchases for a single-year license start at $38 USD. With BeaverBuilder, the most basic one-year license begins at $99 USD.

With Gutenberg being part of the WordPress core, you can get started right away without any additional costs or roadblocks. Better still, no need to worry about compatibility or integration issues — it’s all ready to go. 

Take it from us: if you are using some sort of Page Builder tool right now, say BeaverBuilder, WPBakery, or what have you, its time will be up! Gutenberg is the future of WordPress and it will grow to become more powerful and essential — learn it now, use it, love it!

At Make Do, we are ready to bring your idea to life…

Let us show you all the impressive things we can build with the power of Gutenberg and WordPress

Let's talk about you

Prefer to talk on the phone?
You can speak to Kimb by calling us direct on (+44) 01143 606660.

Email the team…
Send your requirements to hello@makedo.net and we’ll reply within 24 hours.

Get Your WordPress Website Gutenberg Ready

In this post our WordPress Engineer Charlie describes WordPress development best practice on how you can quickly get your older WordPress websites ready for Gutenberg.

Read more blog posts

Sign up to our newsletter