But It Is Theme And PageBuilder Vendors Who Are Currently Transforming How WordPress UI Design Is Actually Done

Let us be clear, Gutenberg is by itself having a profound effect on WordPress UI Design and Development. Here are some of the major trends.

1. Gutenberg brings the 3rd Generation JavaScript frameworks to WordPress. In the case of Gutenberg it is the React.js family. But the PageBuilders & Themes are also adopting the better performing JavaScript Frameworks. Brizy and Divi use React.js, Elementor uses jQuery and Backbone while there are a number of WordPress theme and plugin toolmakers using React.js, Ember.js and Vue.js.
2. Gutenberg makes the PHP to JavaScript transition in the sprawling WordPress coding system  more prevalent. On the WordPress backend, Calypso is built  primarily with React.js  which  drives WordPress.com and more of WordPress.org through operational plugins. On the WordPress frontend Gutenberg and the JavaScript driven theme, plugins and PageBuilders will give WordPress UI design  even more JavaScript presence And both JetPack and Woo-commerce use more JavaScript. But also old time JavaScript favorites like jQuery.js, backbone.js, colorpicker.js, hoverintent.js, masonry.js  etc can all be found in the wp-includes/js directory of the latest WordPress 4.9.6 download.
3. Gutenberg brings reusable, movable, customizable blocks to WordPress editing and the WordPress Core. Now PageBuilders have been providing reusable, movable and customizable “blocks” or elements for at least 5 years. But each PageBuilder element is a)built differently by its vendor and b)is not part of the WordPress Core. This latter point is vital.
4. Gutenberg works on all WordPress themes just like all of the top end PageBuilders.
5. Gutenberg delivers responsive page designs that work on desktop, tablet and mobile devices just like all of the top end PageBuilders.
6. Gutenberg does not yet deliver true WYSIWYG frontend design like all the top end PageBuilder can do. So in the case of Gutenberg users have to save the page and then view it to see if their edits work as they have intended. With top end PageBuilders that immediate WYSIWYG feedback  is one of their primary features.
7. Gutenberg intends to deliver multi-column layouts and has a simple text only version of the popular multi-column layout. All of the top end PageBuilders deliver multi-column layouts with easy adding, deleting moving and resizing of each column. In addition, all of the top end PageBuilders allow any of their widgets/elements to be included in their columns – a capability that Gutenberg has not yet mastered.
8. Gutenberg intends to deliver inline text-editing but its inline text-edit options are limited. The top end PageBuilders are well ahead of Gutenberg but still not equal to what is possible in Wix or Xara Web Designer Pro.
9. Gutenberg intends to deliver drag and drop,  moving, spacing or resizing of its blocks. However, the current Gutenberg  only allows moving blocks vertically while some image resizing currently works. For all of the top end PageBuilders moving their blocks up/down vertically and/or left right horizontally works. As for resizing and changing spacing the top end PageBuilders provide some some capabilities including spacer and divider widgets plus dragging edges to change margins and padding. But the completeness of the  feature set differs among the top end PageBuilders.
10. Gutenberg intends to deliver immediate and convenient  CSS styling of its blocks. But this CSS styling is  currently well behind what all of the major top end PageBuilders currently deliver.
11. Gutenberg intends to deliver the capability to layout a complete page with user designed header, footer, sidebar and content area. Gutenberg will enable users to deliver complete page or SiteBuilding features when used with the right multi-purpose theme . So running Gutenberg with  a MultiPurpose Theme like Astra or OceanWP  transforms Gutenberg into a beginner as SiteBuilder. But the Gutenberg tools do not match some of the top end PageBuilder’s capabilities which already deliver  Sitebuilding. Even more important the topend Page Builders deliver unique header, footer, sidebar and widget delivery capabilities.
12. Gutenberg intends to offer complete page and section of page import and save  capabilities. Top end PageBuilders already offer complete website, page and page section imports + save as templates capabilities. As well some Page templates can be marked as global so change to the Page template will be reproduced wherever it is used on the website.
13. Gutenberg delivers blocks of UI elements or widgets just like all the top  end PageBuilders. Gutenberg blocks are intended to work everywhere but just try to use a Gutenberg block in the Classic Editor or any of the PageBuilders. This is a crucial capability and its implementation will likely determine the success or failure of Gutenberg in the long haul – More on this later in the review.

But the bottom line is that Gutenberg by its sheer presence and long terms goals is having a profound effect on the WordPress UI Foundations. The existing PageBuilders are running scared that they could be put out of business and so they are delivering UI/UX features at a blistering pace. So in comparison Gutenberg has fallen further behind the capabilities of  even the free PageBuilders:

In sum clearly Gutenberg as it will appear in WordPress 5.0 is a lot less capable than most of the top end PageBuilders. Indeed,  Gutenberg is woefully behind the free versions of top end PageBuilders like BeaverBuilder Lite and all its free addon plugins, Brizy Free PageBuilder,  Elementor and all its army of free add-on plugins, SiteOrigin PageBuilder and its free addon plugins and Visual Composer plus its many free addon plugins.  In fact, for many users Gutenberg will be hard pressed to outperform free TinyMCE Advanced with its many add-on plugins or free WPEdit as free upgrades to the Classic editor. How can one explain this situation?

Gutenberg Comparison:  Target is set too Low

In this comprehensive look into Gutenberg at Kinsta, the review is a thorough look at the Gutenberg features to date [like the PageBuilders, Gutenberg is upgrading at a fast pace]. But the target of the comparison is set too low. The goal of Gutenberg is said to be to match the Medium Editor. However, admirable the Medium Editor is, it is no match for what  can be achieved with any of the free PageBuilders [take a look at Brizy for a potent example of what Medium and Gutenberg should be as editors].

In fact, the current edition of Gutenberg has gotten a bye on 4 crucial UI features:

1. Gutenberg is only a backend editor – it does not show users in frontend, WYSIWYG fashion how a page or post will look.
2. Gutenberg still does not have a full multi-column feature. The ability to add any block including a nested multi-column block to a row still does not work in the June-end Gutenberg.
3. Gutenberg does not have a templating system so groups of blocks can be either imported or saved by users for later re-use.
4. Gutenberg blocks are not made re-usable so they can be used in other widgets, editors, popups, forms, and other PageBuilders.This is passingly strange as blocks become a part of the WordPress Core but can only be accessed and used by Gutenberg and its proxies.

Now the Kinsta review is unfair for a second reason. For the past 4-5 years Wix, SquareSpace and other Website Builders have cut the growth of WordPress.com considerably. The situation had gotten so bad that WordPress.com had to create a top price package of $C33/month to compete with the Wix, SquareSpace etc by enabling the use of  Frontend PageBuilders like Visual Composer and Site Origin PageBuilder on WordPress.com. This  helped prevent a WordPress usage rout. Automatic and WordPress should be working to harness that type of  innovation with some well designed Gutenberg co-operation and integration with these creatives.

Gutenberg Integration

On the question of integrating Gutenberg and its block with other tools, I have read two different points of view. One says the PageBuilder vendors should go it alone and continue to rapidly innovate at a rapid pace.  Build their tools into an unassailable set of features and functionality. For example most of the topend PageBuilders are issuing updates at pace matching Gutenberg. Will they be able to create a critical mass of users and developers, such that their position in the market is unassailable? If Automattic makes core Gutenberg blocks unavailable for use by PageBuilder vendors – will they be large enough to fork WordPress like MySQL was forked by the MariaDB community

So Integration will be a continuing vital  issue. Already the there is some movement in two ways. Site Origin PageBuilder has a version that integrates into Gutenberg and which allows SiteOrigin multi-column layouts to be used in Gutenberg blocks. But this requires a special release of SiteOrigin PageBuilder which winks on and off depending on the current Gutenberg release. Also SiteOrigin has promised that its widget bundle will work in Gutenberg. But it is no-go with our test of  the 3.1..1  version of Gutenberg

Two of the most popular PageBuilders, Beaver Builder and Elementor, have announced that they will deliver some Gutenberg integration. But neither have  disclosed how they will do so in any detail. More interesting is the case of Brizy and Divi both of which use React.js. Because of the React connection, both PageBuilders would be in good position to utilize a “open” Gutenberg blocks in their page designers. Likewise they should be able to follow the SiteOrigin example and add layout or page template functionality to the Gutenberg editor.  How Gutenberg and Automattic plays this out will be  a test of the depths of the Open Source roots of all the WordPress players.

The Gutenberg Intro

Gutenberg is not ready for prime time, especially  if it is released in September-October back-to-school time frame. Gutenberg will create a lot of disruption on WordPress websites globally. Gutenberg has 10,000 active installs at June-end compared with 900,000 for Elementor which was introduced at roughly the same time as Gutenberg. Can you imagine what 29,990,000 website users are going to do when they discover they are placed into a never-seen-before-and-non-operationally-intuitive editor? Remember a substantial number of WordPress websites are now auto-updated when a new core upgrade is introduced.

Here is hoping when WordPress 5.0 comes out it will be very well organized:

1. 1. A 3-5 week WP 5.0 release candidate with fixed Gutenberg features so developers and venturesome end users can become comfortable with all its features and operational nuances.
   2. The Classic Editor plugin is part of the core and a clear option on the Page/Post editor top menu.
   3. There is a superbly designed video+text intro to using Gutenberg editor.
   4. All existing pages, posts, custom posts will open in the editor that they were originally developed in. No being thrown willy-nilly into the Gutenberg editor.
   5. All new pages, posts, and custom posts will open not in the Gutenberg editor but a header form that asks what editor the user wants to employ.
   6. That a background survey be done of all edits used on site documenting what editors were used. The user is then asked to contribute their results to a global poll of editor usage. Make a summary report available to users on the global editor usage on a quarterly basis for user selected download.

There is no doubt WordPress 5 with Gutenberg is the major upgrade of the past 5 years. Given the fragile state of Gutenberg relative to the existing Classic Editor and a stable of excellent PageBuilder/SiteBuilders, WordPress 5+Gutenberg demands a well thought through rollout from Automattic and WordPress.

Summary

WordPress developers and end users are faced with a problem with the upcoming WordPress 5.0 update. The star feature of the update, the new Gutenberg Editor, is not ready for prime time in two regards. First, most WordPress users and many WordPress developers simply do not know how to operationally use  Gutenberg. And there is a non-trivial learning curve versus what they have done before. Second, Gutenberg is currently the lowest features and ease-of-use editor  versus popular PageBuilders and even fortified versions of  the Classic Editor like TinyMCE Advanced or free WPEdit.

But make no mistake Gutenberg has stimulated huge changes in how WordPress UI is done. Because Gutenberg said they were going to do it,  PageBuilders have actually done it  – transformed their tools into SiteBuilder or ThemeDesigners. Now Beaver Builder, Brizy, Divi, Elementor and Visual Composer  are all ThemeDesigners. This means for any and all pages and posts, a ThemeDesigner user can create a unique layout with a new header, reused slider banners, novel content layout, slide-in sidebar and standard [or maybe not] footer.And then there is Gutenberg aspiring to these lofty  UI heights  – but how many years away?

Resources

Topend PageBuilders in Alphabetical order:

1)BeaverBuilder Lite and all its free addon plugins
2)Brizy Free PageBuilder is brand new but offers wealth of novel features
3)Divi is working to make site wide editing easier.
4)Elementor has a vast array of add-on plugins.
5)Oxygen is a powerful theme designer
6)SiteOrigin PageBuilder is an active pioneer in Page Building
7)Themify Builder version 4 just hit the streets
8)Thrive Architect is building a Design Building ecosystem
9)Visual Composer plus its many free addon plugins

Vital to changing a PageBuilder into a SiteBuilder/ThemeDesigner are  multipurpose themes. Here are five of the best  listed in alphabetical order:
1)Astra  is free and Pro edition has added Beaver Builder and Elementor page connections
2)Generate Press is free and has a packed Pro pack
3)OceanWP has best free feature set plus some nifty
4)Total provides fine control of layout options, has 2 slider plugins and Visual Composer PageBuilder.
5)Xtheme has a huge set of plugins including 2 PageBuilder,  3 slider, and 2 gallery

Finally try using  Gutenberg with a good, free multipurpose theme, OceanWP.