Gutenberg Page Builder: A September UI Autopsy

Matt Mullenweg has written a detailed post on Gutenberg, the upcoming WordPress PageBuilder plugin. Within the post  is a critical commitment by Matt:

WordPress has always been about websites, but it’s not just about websites. It’s about freedom, about possibility, and about carving out your own livelihood, whether it’s by making a living through your site or by working in the WordPress ecosystem itself. We’re democratizing publishing — and democratizing work — for everyone, regardless of language, ability, or economic wherewithal.

WordPress’s growth is impressive (28.5% and counting) but it’s not limitless — at least not in its current state. We have challenges (user frustrations with publishing and customizing, competition from site builders like Squarespace and Wix) and opportunities (the 157 million small businesses without sites, aka the next big market we should be serving). It’s time for WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities. The thing that changes the world.

Gutenberg.

Now lets be frank, as Matt acknowledges, Gutenberg is about playing catchup to rival Web Builders from SquareSpace, Wix and at least a dozen free and premium PageBuilders plugins which work very well now [and are fast improving]in WordPress. So an important question is what can the current crop of Web Builders do?

Current Web Builder/PageBuilder State of the Art

Sample of the WordPress PageBuilder Themify Builder being used to edit a loaded template.

In an earlier OpenSourcery post we described 13 essential features sported by most of the top WordPress PageBuilders:

1. Capable of being used by any WordPress theme;
2. Edit any and all WordPress Pages, Posts and Custom Post types;
3. Frontend, true WYSIWYG Interactive Page Design and Layout;
4. Scores of new UI elements and components available from vendor or 3rd party suppliers;
5. Templates with pre-built Page or Post layouts inserted anywhere  in a page;
6. Templates can be customized, saved and re-used later by user;
7. Ability to add complete or partial page designs [called sections] anywhere in a page/post edit;
8. Ability to auto-generate responsive tablet & mobile ready designs that resize/reposition layouts automatically;
9. Ability to customize the tablet and mobile layouts independent of the desktop layout;
10. Ability to create full-width and/or  full-page designs  with parallax scrolling for state of the art landing pages;
11. Ability to style/format any block or component for instant customizing of page designs as they are built;
12. Ability to undo work to any previous state by means of a revision history;
13. Ability to add scrolling, animation and conditional effects anywhere on a page;

This is a formidable list of UI Design features. As a WordPress Developer I can testify to the fact that the current crop of PageBuilders when combined with multifunction themes like Generate Press, Total, and Themify Ultra, one can be very productive in website development. So what will Gutenberg bring to the table?

The Gutenberg Promise

In his many writings on Gutenberg, Matt has begun to distill down the direction and promise of Gutenberg. As of June of this year Gutenberg has been available as a free dowloadable and eminently usable plugin. So do try out Gutenberg and see where Matt and the Gutenberg team are taking WordPress.

You will see that Gutenberg borrows many ideas from existing Web Builders – especially popular PageBuilders like Beaver Builder, Divi 3,  and   Elementor. Clearly WordPress PageBuilders have provided many ideas and components of which Matt refers to as design goals for Gutenberg. Here are some of Matt’s targets for Gutenberg:

• Blocks or  components that replace many custom post types and meta boxes;
• Templates are envisioned but full equivalence with  current versions in WordPress Pagebuilders is not clear;
• Promise to developers to reduce the current WordPress coding  mishmash of shortcodes, TinyMCE blocks, meta-boxes, and widget blocks into a unified Editor coding interface;
• The move to underlying JavaScript with a PHP wrapper  will bring a simplified Editor interface and performance improvements for both plugin and theme developers;
• Finally for web hosts and end-users, Matt is promising an Editor superior to anything that SquareSpace and Wix or the current WordPress Pagebuilders can deliver.

In sum , Gutenberg is to be the superior overall Website Building tool of the future. Gutenberg will go beyond PageBuilders and have the whole canvas – header, content blocks, sidebar and footer  – as the single, master  design surface as a web building  tool.

So given this ambitious target, the obvious question is how well does the current Gutenberg of September 2, 2017 meet these lofty goals.

UI Autopsy on Gutenberg vs WordPress PageBuilders

After obsserving the ratings for Gutenberg on the WordPress.org website, one had to take pause – but this  is admittedly early beta code.

Currently, the reaction of the WordPress community is clearly distressed at the partially completed state of Gutenberg. As we shall see below more than some skeptism is justified.

Now the TheOpenSourcery reviewed Gutenberg 10 weeks ago and declared presciently that this was the WordPress entry into the PageBuilder sweepstakes. However, Matt’s posting expanded the scope of Gutenberg to be a complete Website Builder with many WordPress toolmakers such as plugin makers, theme designers and hosting services expected to adapt to and wholly adopt Gutenberg into their offerings. So here is the second test of the plugin  based on the updated Gutenberg version.

One of the improved features has been  the text block in Gutenberg that allows users to create rows of text columns:

As you can see from the screenshot, this welcome Gutenberg feature has a number of caveats associated with it. The three most important shortcomings in the Gutenberg text block are :
(3) the lack of a full set of text editing options commonly available in other PageBuilders;
(5) the inability to easily add other objects such as images, video, galleries, etc into the text blocks;
(4) but most distressing is the inability to style/format the text block container as allowed in other PageBuilders.
Now hopefully these shortcomings will be eliminated as Gutenberg matures in the next 4-6 months; but how completely remains to be seen.

In general the text editing experience has been radically changed with some more sources of concern:
Edit options that one would expect to be grouped together are freestanding blocks with few properties and no styling options yet. This means users doing layouts will have more micro-steps. Gutenberg developers may have to rethink how edit blocks and options are grouped lest the current reviews of Gutenberg prevail.

Just as a contrast I developed in the Divi WP PageBuilder a sample of what can be done quickly [8 minutes]:
The key point in this example is how much styling of blocks and containers can be done in most WP PageBuilders.

There are also quirky shortcomings in Gutenberg. For example, one can drag and drop blocks vertically but not horizontally.
In comparison, the steps of block duplication and horizontal movement are commonplace features in most WordPress PageBuilders. In effect, Gutenberg is racing to catchup with a 3-5 year lead that most WordPress PageBuilders have right now.

So lets summarize the key points of comparison in our UI Autopsy of Gutenberg vs the existing WordPress PageBuilders.

1. Capable of being used in any theme – is available in Gutenberg now
2. Support for Pages, Posts and Custom Post types – should appear in later versions
3. Rows divisible into up to 6 columns- only text blocks, extension to other blocks coming very soon??
4. Frontend, true WYSIWYG Interactive Page Design and Layout – delivered now
5. Scores of new UI elements and features often from 3rd party providers- should happen if 3rd parties on board
6. Templates with pre-built Page or Post layouts which can be easily user customized- no sign of it yet
7. User template designs that can be saved and re-used – if templates are adopted, then user ones should follow
8. Responsive tablet & mobile ready designs that resize/reposition layouts automatically – not working yet
9. Full font set, icon set, and vector graphics support – some slight hints
10. Ability to create full-width and full-page designs  with parallax scrolling for state of the art landing pages – possibly
11. CSS Stylings for customizing block layouts and designs as they are built – hints this is coming
12. Ability to undo work to any previous level by means of a revision history – no hint of this
13. Ability to add complete or partial page designs [called sections] any place within a page or post layout – possibly
14. Ability to position or  resize a block wherever there is empty space on page  or with deliberate overlap – take a look at what Wix, Xara and sliders like Slider Revolution or Smart Slider 3  can do now
15. Popup Layers and animations of blocks – easy to do but no hint of this
16. Ability to apply Gutenberg Blocks to Headers, Footers and Sidebars – also starting to appear in WP PageBuilders

Now some may argue that this list  compares Gutenberg versus a composite of WP PageBuilder features. Not so, as recent reviews of Elementor and other PageBuilders show. And consider there is a whole new wave of major upgrades coming from Beaver Builder, Divi, Elementor, Thrive Architect, Wix, Visual Composer and their many 3rd party add-on suppliers.

So our UI autopsy  shows that Gutenberg is clearly well behind the WordPress State of the PageBuilding Art. True, one can see coding lynch pins falling into place for such features as multi-column rows being  able to contain any WP block or object. However, critical features like reusable templates or immediate and easy CSS styling of blocks seem much more distant. In sum, there is awful lot for the Gutenberg coders to do in the next 6 months to come close to the WordPress PageBuilder capabilities.

Now Gutenberg promises much more simplified Calypso/React.js coding replacing the evolutionary PHP-based widget, shortcode  and other trick scripts that have accumulated over the 13-14 years that PHP has ruled the WordPress Core. This should deliver greater speed as JavaScript out performs PHP7 in many benchmarks. As well Node.js server interface also presents more server interface opportunities.  Finally, Gutenberg’s whole UI surface approach consolidating header, content block, sidebar and footer coding in one tool is a direction already being picked up by current WordPress PageBuilders.

Summary

Matt Mullenweg has set the bar high for Gutenberg as a new Website Builder.  The goal that Gutenber apply to the whole web page canvas – header, content block, sidebar, and footer – is very commendable. But from a survey of 500 CSI Small Business websites I can say that WordPress has to build a much better PageBuilder for its WordPress.com users.Wix, Weebly, SquareSpace are showing very fast annual growth rates much higher than WordPress and WordPress.com. Also the WordPress PageBuilders are rapidly improving.

So it is no surprise that WordPress.com now offers a $32US/month Premium Business Plan that allows WordPress.com users to tap into the huge WordPress.org set of 4500++ themes and 45,000 plugins including the great PageBuilders. Thus  Gutenberg is a bold counter move with ambitious goals for the Gutenberg developers. So as we have seen in this UI Autopsy, the Gutenberg developers have much on their development plate – best of  fortune to them.