Gutenberg: The WordPress Post/PageBuilder

WPTavern has alerted readers to the first beta delivery of Gutenberg – the new Visual Block Editor for  WordPress.

Now do not confuse this with Project Gutenberg which is a eBook archival project. In fact Gutenberg is Automattic taking the WordPress Visual Editor to a new level well beyond the Tiny MCE and WP Edit plugin implementations commonly used in many WordPress websites. Gutenberg is called a Block Visual Editor because it is similar in features and functions to the growing number of WordPress Page/Post Builders like Beaver Builder, Elementor, SiteOrigin PageBuilder, Thrive, Themify Builder, Visual Composer, etc [there are over 20 WordPress Page/Post Builder plugins available now]. In fact WPTavern suggests that Gutenberg is more broadly targeted to match such popular Website Builders as Medium, Weebly, Wix , SquareSpace, etc as well. So with a beta version of the Gutenberg available as a downloadable WP plugin[users must have WordPress 4.8 installed ] – it is time to do a review of Gutenberg Editor.

Whats in Gutenberg

Okay the most interesting thing about Gutenberg is that is written in PHP and JavaScript:

Unlike WordPress.com which has gone Calypso and JavaScript primarily, Gutenberg still has PHP managing code. However, if you carefully peruse the Gutenberg plugin files you see that JavaScript and React.js are key ingredients in the code. So Gutenberg provides a view of the scaffolding for moving Calypso JavaScript features into WordPress.org’s PHP core.

The next important factor is that like many other WordPress PageBuilders, Gutenberg delivers both Visual and Text edit modes. Here is the Visual Edit:

As you can see the editing of a text block allows for links, text decoration, and alignment. But not yet  font-type, font-size, font-color,  and background color. Likewise the block itself does not yet have padding, margin, or background color or image as provided by many WP PageBuilders like Beaver Builder and Visual Composer.

But Gutenberg does provide  a fairly rich set of UI elements that can be inserted into a block:

But notice what the problem is here in Gutenberg – it does not yet have the capability of adding a row which can be split into a user selected number of columns which is so popular with WP PageBuilders. In the example, I want to create a row with two columns for images centered in its column. To do this I have to create a table with 1 row and 2 columns; then switch to the Text mode of Gutenberg and add the <img> commands. But I also can add padding, margins and explanatory text if I want as well.

But the Gutenberg Insert command has some of its own extra goodies in the form of embeds and widgets. WordPress 4.8 added  Text, image, Audio, and Video widgets to the full selection of widgets. As you can see these options allow for some nifty embed/widgets:

In our example we add a slideshare Powerpoint presentation – there are over two dozen embeds and depending on the theme you are using, likely an equal number of widgets that you can add to your post. But the downside is that these embeds and widgets each stand in a block by itself – there are few text or styling options yet available. But of greater impact is what is is likely to appear in  the Gutenberg Block Editor.

Finally, see the test post developed in Gutenberg and moved to TheOpenSourcery.com by simple copy and paste operations. The Gutenberg Post is here.

Whats Coming in Gutenberg versus popular WP PageBuilders

Here is a list of essential features from our review of Popular WP PageBuilders and our guess when they will appear in Gutenberg:

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 except for WYSIWYG Frontend design 
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 block wherever there is empty space on page – take a look at what Wix and Xara can do now
15. Popup Layers and animations of blocks – easy to do but no hint of this
16. Ability to apply Gutenberg Block Edits to Headers, Footers and Sidebars – starting to appear in WP PageBuilders

What this list shows is that Gutenberg is well started into becoming a Post/PageBuilder for WordPress. But Gutenberg currently lacks many of the key features that make premium  WP PageBuilders so popular. But WPTavern states that Gutenberg has a priority for beta updates with a target appearance in WordPress 5.0 later this year. For this reason, Gutenberg will have a major impact on Website development

Gutenberg is a Very Big Deal

Over the past 15 years WordPress has climbed to the number one position in content management systems with 59.1% market share. This position has been attained due to open, low cost, easy to operate, and WYSIWYG Page and Post development. But in the past five years with sprouting of backend page designers using dozens of shortcodes,  and/or code snippets, WYSIWYG page/post design and “no coding required” got pushed to the sidelines especially among premium plugin tools like Divi, Fusion Builder or Visual Composer 1.

As a result Website Building tools like Weebly[20% annual website usage growth], Wix[74% annual website usage growth], SquareSpace[50% annual website usage growth] and others which delivered true WYSIWYG, “no coding required” page and post creation – all are growing much faster than WordPress.com. Indeed, these rival Website Builders have started to grow very fast in the small business website marketplace. Fortunately for WordPress,  the Premium WordPress PageBuilders  like Beaver Builder, Divi, Elementor and Visual Composer have responded with frontend PageBuilders that deliver true “no coding required”, WYSIWYG website development.

Enter the Gutenberg Block Editor. It has possibly 3 purposes. First, it has the PHP+JS scaffolding to make the Calypso code being refined over at WordPress.com available at WordPress.org. Thus Gutenberg marks a technical bridge to the WordPress future of JavaScript rich development.

Second, as we have seen Gutenberg has all the makings to become a very competitive Post and PageBuilder. Will Gutenberg slow the rise of Website Builders like Weebly Wix, Squarespace and others? Also  how will Automattic deliver it to a very competitive and fast growing free and premium PageBuilder market place? Will Gutenberg remain a completely free PageBuilder plugin? Or will Automattic like other premium PageBuilders like Beaver Builder and Elementor have a lite version for free and add-on premium version for a price. Automattic’s owned Woo Commerce suggests a lite+premium marketing approach. In short, Gutenberg raises a number of market questions.

Third, the fast progressing premium WordPress PageBuilder market has turned the WordPress Theme market on its head. The emergence of MultiPurpose Responsive Theme Builders has made it possible for developers and end users to  build multiple different Website designs [compelling portfolio, magazine, restaurant, and/or business layouts]using one theme. Ditto the need for multiple different landing pages on the same website  can be done with Multipurpose Themes plus their premium PageBuilder companion tools. So instead of having to search through hundreds of themes, WordPress users and developers will search through maybe 10-20 Theme + PageBuilder combos. It means a lot less work and worry. In effect, Gutenberg confirms the importance of PageBuilders in the overall website design space.

Summary

Gutenberg is more than a new Block editor for WordPress. It represents the confirmation of the importance of “no coding required” PageBuilders in general Website design not just WordPress. It also offers a glimpse into the world of transitioning WordPress from PHP primarily to joint PHP+JS code. Finally it will certainly shake up the WordPress theme and plugin markets.