Gutenberg

1. The term “page builder” often conjures a preconception. In this context, page builder is the most generic version of the term; the interface used to create web pages.

2. Common WordPress page builder alternatives to Gutenberg include, but are not limited to: Beaver Builder, Divi, Elementor, Visual Composer, or Enfold. SquareSpace, WebFlow, Duda, or Wix are non-WordPress page builders.

3. The devil is in the details, and a test drive is recommended. If you are considering WordPress as your CMS, contact me to try out any of the following page builder options:

• Gutenberg, with my recommended additions, reductions, and “improvements”
• Gutenberg, unaltered and as it ships from WordPress
• Beaver Builder
• Divi
• Elementor
• Visual Composer
• Enfold

The “factory” or OEM (Original Equipment Manufacturer) solution

Gutenberg comes with WordPress. Disabling this solution in favor of another page builder is akin to purchasing a Toyota and promptly replacing the engine with one from a Chevrolet.

Save Once

Gutenberg uses a simple, “save” button. Some page builders require opening/editing/saving a module and then saving the page. The “save twice” process often results in un-saved work, confusion, and frustration. Gutenberg’s single save approach is more intuitive.

Seamless keystroke editing

The ability to “type” a page into existence is incredibly efficient.

Makes the simple things incredibly easy

Headings, paragraphs, lists, images and the like can be added to a page with the ease of a “basic” document creation software. I.e. Gutenberg works like Microsoft Word or a Google Doc. Going one step further, you can add sections and aside with ease. Pro tip here I use a tiny vanilla JS script to label the sections based on the first heading (essentially always an h2).

Makes complicated things easy

Specifically speaking, the React-based custom blocks open up a world of really complicated functionality that is also easy to use, maintain, etc.

Seamless copy/paste

Individual blocks or entire page layouts can be copy/pasted. Similarly, copy/paste from various sources (documents, email, etc) works out of the box. As long as you use standard markdown (not an extended format) you can copy/paste markdown and instantly have well-formatted HTML.

Rearrange objects via drag and drop or click to move

The drag and drop approach works well for simple pages. Click to move is the obvious solution for robustly structured pages. Making both available allows for greater user choice and the right tool for the job.

Rearrange one or multiple objects

Single elements, rows or huge chunks of a page can be selected and moved via drag and drop or click to move.

Insert before and after

Quickly and easily add content before or after existing page content – via select from menu or keystroke. When editing a complicated page, insert before or after is a tremendous help.

The same editing experience across pages, posts, widgets, patterns/reusable blocks

Facilitates “FSE” (full site editing) in a particularly efficient way. There is only one interface to learn. Parts and pieces from any area of the website can be copied to any other area of the website.

Patterns/reusable blocks with overrides

Patterns/reusable blocks with overrides make “templates” that are incredibly flexible and maintainable.

Has a basic responsive framework included

The simplified built-in approach to responsive is intuitive and easy to learn.

Does not rely on a specific front-end framework

While front-end frameworks like Bootstrap are popular, they are not an ideal choice for everyone/everything. Gutenberg’s agnostic approach lends itself to working with any front-end solution.

Supported by thousands of developers

WordPress remains one of the largest open source development projects in the world. While many page builders have a community that supports them; none hold a candle to the WordPress community that collectively maintains and expands the Gutenberg editor.

Developed in a transparent and interactive way

You (insert Smokey the Bear) can join WordPress.org/Github and actively contribute to the development of Gutenberg. At the very least, you can watch with relative transparency as discussions around bugs and features unfold.

Developed according to the 80% rule

While just a rule of thumb, WordPress core is intended to only have functionality that 80% of users will appreciate and use. Gutenberg, as a WordPress community project, follows this same rule. The WordPress development philosophy may not be perfect, but it is public and generally adhered to (including Gutenberg).

Readily supports custom development

From JSON files for block settings, to block alterations (modifications), or complete custom blocks – Gutenberg is built to be extended and customized. Without creating custom blocks, remarkably robust functionality can be achieved.

Custom development has multiple paths

For the next level of complex functionality, custom blocks are the solution. Custom blocks can be built via: React “full build” with JSX syntax, Basic React (“no build”) or PHP (ACF Blocks).

Custom development is highly portable

Gutenberg’s use of React means that custom blocks do not require any database work. Custom blocks, therefore, can be moved from one site to another by simply moving as little as 1 file and a code snippet. Custom blocks can move from dev to live with incredible ease.

Custom development is subject to database search

The ability to search, or search and replace the database is critical to large website maintenance and expansion. Due to the way Gutenberg stores custom blocks; custom development is just as maintainable and expandable as ordinary, run of the mill website content.

Efficient use of the database

Most page builders are incredibly wasteful in how they store information in the database. Gutenberg stores page content in relatively compact yet intuitive way.

Offered by WordPress and Drupal

Drupal vs. WordPress has been hotly debated by developers for years. The fact that Drupal developers admit that Gutenberg is pretty good, and created a Drupal version, is an incredible testament.

Elementor had a Drupal version, but it is no longer maintained.

Not a front-end editor

Many folks have become accustomed to “true” front-end editors that look exactly like the page you are building. Gutenberg is not like that and is more of an interface, which some clients do not like.

Steep learning curve

Gutenberg brings a lot to the table and that can be overwhelming. I tackle this issue with three main approaches.

1. Reducing back-end options helps a lot
2. Examples via a (normally private) Website Components page goes a long way
3. Storing reusable components (“templates”) via reusable blocks simplifies page creation

Relies heavily on JavaScript

Anyone who maintains the website must occasionally clear their cache or face admin-side errors.

Built-in front-end framework is flex-based and mobile/desktop in nature

The built-in front-end approach is fairly limited for anything beyond a very basic website. My solution here is to add a very lightweight, home-grown grid-based framework and a breakpoint indicator.

Ugly, inline styles and excessive classes

Fortunately, these can be disabled.