The WordPress Year long race to launch the Gutenberg Block  Editor in 2018 has triggered a whole Christmas bag  of related WordPress UI developments. And many of those UI tricks and plugins have been either introduced or refined and released for a year end Holiday treat. But perhaps the singular WordPress Christmas present has been Gutenberg and its associated UI Project Roadmap for 2019 announced by Matt Mullenweg at WordCamp US in December.

In effect, the WordPress 2019 Roadmap is committing to the reality that 3rd party PageBuilder and MultiPurpose themes have already brought to the WordPress UI world – PageBuilders have become SiteBuilders. This means  all of the diverse WordPress objects such as menus, widgets, sidebars, breadcrumbs, banners,  headers and footers can now be developed and delivered by using versatile PageBuilders like Divi and Elementor. Actually two early PageBuilders, Headway and Ultimatum, pioneered the idea that a)every page could have a unique layout position for headers, footers, banners etc and b)the contents of those layout blocks could also contain diverse objects.

In effect the idea of responsive containers with any content blocks had been percolating in the WordPress UI ecosystems for a long time. Now it is official. So lets see what else Santa brought the WordPress UI Developers.

Gutenberg Editor Is A Train Still Arriving

The following screenshot of Themify Builder used within the Gutenberg editor tells the Christmas “Coal” story:
The Gutenberg Block Editor is still far from completely debugged and feature complete.

1. The MultiColumns block still presents too many errors – especially if you use 3rd party add-on blocks
2. Even without use of the  MultiColumns block the editor is constantly warning: There is an autosave of this post that is more recent than the version below.View the autosave. This is an absolute time drain trying to figure out what has gone wrong. It is a nagging delay in editing penalty seriously impacting workflow and willingness to try edit features – in short, code and design  risk taking is curtailed.
3. The editor is still constantly changing – between WP 5.00, WP 5.01, and WP 5.02, the Gutenberg  editor changed notably in layout, blocks available, and bugs incurred [drop in some bugs, but increased Autosave discrepancies].
4. Sarah Gooding at WPTavern has cited the problem of  configuring Gutenberg Editor for fewer distractions. Echoing Sarah’s concerns, I have clients that will only work with the Classic Editor – “wait a quarter or two to get the writing layout right and the bugs out“.
5. The issue of Gutenberg Accessibility compliance is an on again/off again problem that will impact meeting Canadian AODA and US WCAG standards deadlines.
6. But the most significant weakness of Gutenberg is that it is not close to the current WordPress PageBuilders in 5 crucial UI features:
   • the Gutenberg Editor simply does not deliver WYSIWYG design – when users save and view their edits they get surprises in sizing, positioning and spacing of Gutenberg blocks on a page. Yes, Gutenberg delivers fairly good mobile responsiveness; but it is far from Pixel Perfect in moving from the editor to the webpage. And Gutenberg does not come close to matching the true front-end real page layout that PageBuilders deliver. Working with PageBuilders like Themify Builder which work within Gutenberg one can clearly see the Pagebuilder’s WYSIWYG advantage.
   • Gutenberg lacks  many styling options immediately available in every popular  PageBuilder. This makes it hard to correct for the above  non-Pixel Perfect webpages. But some Gutenberg proponents argue that bulk of casual users  do not want to address these styling options. Rather they would prefer to leave these issues to Web Designers and/or special CSS Edit tools. There is indeed a management of UI Complexity issue here which all UI Web Development tools have to address. More on this later.
   • Gutenberg does not have native blocks that match PageBuilder’s widget/object choices. Yes, there are 18  Gutenberg 3rd party add-ons with 8-20 block each available now[and more coming]. But our review of the addons showed that more than half of the 217 blocks are redundant with minimal styling options.
   • Gutenberg has only a basic templating system for re-using pages and sections of pages. In contrast, PageBuilders allow exporting pages or sections of pages for reuse with two edit methods. Users can import prebuilt templates or  templates created on and exported from another of their websites. Finally, PageBuilders [but not yet Gutenberg] have  template management tools that aid in importing, exporting, and editing their templates.
   • Gutenberg is improving rapidly but so are the PageBuilders. For example, one of the UI Christmas presents will feature the new Divi Search and Go popup that expedites workflow with the Divi Builder.

So clearly the Gutenberg Editor as it stands now is a lump of Trump Coal. But at WordCamp Toronto 2018,  WPCrafters Gutenberg Review, and at least two Gutenberg vs PageBuilder reviews [CodeinWP and Themeum] the idea has been advanced that Gutenberg Editor is now Horseshoes Close enough  to matching the current WordPress PageBuilders features while constantly improving. The reasoning is that this will be “good enough” for millions of DIY/casual WordPress users. So the argument is that Gutenberg being in core and winning thousands of developers will gradually replace most of the PageBuilders as the new missions for Gutenberg slowly but surely encompasss all of the PageBuilder features. However, in the three weeks since WordPress 5.0 and Gutenberg was launched with literally millions of new users, the Gutenberg WordPress plugin rating has dropped from 2.31/5 prior to launch to a current 2.06/5 – ouch. The new users have spoken. 

So this is the Gutenberg bad news – or lump of Christmas coal. But there is some Gutenberg good news.  For example, Gutenberg blocks have helped to revitalize the CSS Style Editors fortunes as seen in this review. And as follows there are some Gutenberg Christmas surprises.

Gutenberg’s Christmas Surprise

The good news is that Gutenberg’s 2019 Roadmap makes it official. Gutenberg Editor will again be following in the footsteps of the PageBuilders  – it too will become a SiteBuilder as declared in Matt Mullenweg’s 2019 Development RoadMap:

• Creating a block for navigation menus.
• Porting all existing widgets to blocks.
• Upgrading the widgets-editing areas in wp-admin/widgets.php and the Customizer to support blocks.
• Providing a way for themes to visually register content areas, and exposing that in Gutenberg.
• Merging the site health check plugin into Core, to assist with debugging and encouraging good software hygiene.
• Providing a way for users to opt-in to automatic plugin and theme updates.
• Providing a way for users to opt-in to automatic updates of major Core releases.
• Building a WordPress.org directory for discovering blocks, and a way to seamlessly install them.
• Forming a Triage team to tackle our 6,500 open issues on Trac.

The ability to edit to replace the default theme headers, footers, widgets, sidebars and menus  with user customized versions has been a calling card for the top end PageBuilders over the past two years. So clearly Gutenberg Editor is on its way to becoming a PageBuilder/SiteBuilder. No longer will it be just a better Medium or Classic Editor as argued for the past year. Gutenberg is out to play fully on the WordPress PageBuilder/SiteBuilder stage.

So Gutenberg will become more of a WYSIWYG PageBuilder, adding more styling options to its blocks [or deferring to the many good WordPress CSS Styling Editors]  and will have increased templating capabilities for storing and reusing blocks and block sections. But it is still not clear if and when Gutenberg will  match 3rd party  PageBuilder’s frontend WYSIWYG editing  and CSS Styling capabilities. So the Christmas goody from Gutenberg is that it has resulted in a more explicit development Roadmap for 2019 including Gutenberg becoming a PageBuilder/SiteBuilder. Speaking of Christmas Goodies, the Classic Editor has some very nifty plugins  for WordPress developers

Classic Editor’s Christmas Goodies

 To an extent, the Classic Editor has been ignored or downplayed in the Gutenberg rush. But no longer. With Gutenberg falling short on distraction free editing and accessibility, attention has turned to how well  the Classic Editor can serve in the pinch. And as covered in this review, the Classic Editor, when assisted with one or two plugins is really quite capable.

But as if just in time for Christmas, two relatively new plugins have given the Classic Editor a lead in adding sophisticated layered designs to Classic Edits. The first, Zedity, has already been featured at TheOpenSourcery.com as seen in a review from this past August.  What Zedity allows developers to do is layered sections perfect for Calls-to-Action or Banner ads like so:

Note the overlapped images and the use of two fonts with the heading text-shadowed. When used in combo with Themify Builder or Visual Composer one can place the Zedity-designed banner just about anywhere on a page with added animation, padding, etc. Zedity has added insertion of Video, HTML, Microsoft Office  and PDF files to its text, image, and shape elements. In short, Web Designers have robust opportunity for their banner design layouts with Zedity.

But there is more in the Classic Editor layered look arsenal  for Christmas – ImgMCE.

ImgMCE, as the name implies, is a premium  image editor [$26US/website unlimited updates]that works in the Classic Editor:
Here we are creating a call to action for a review of the latest Themify Builder features. This edit can be done either in the Classic or Gutenberg editors. And like Zedity, ImgMCE banners can be used with popular PageBuilders anywhere on a page.

Users of popular sliders like Layer Slider or Smart Slider 3 will find the ImgMCE layer interface familiar. On the left-side element bar, designers choose which element among background color, text, image, shape, or HTML to add to the developing banner or poster:
The layers allow designers to add both in and out animations with user customized timings. The result is this poster ad:
Again, there are lots of design touches such as overlapped images with drop shadows, titling on top of a yellow shape, and use of two fonts plus different animations for the text. ImgMCE’s control of layers and animations is a touch up on Zedity; but Zedity provides more video, HTML, and document features. However both plugins do not have revision/rollback capabilities [even Ctrl Z does not work] and there are some clumsy Text block movement workflows in both plugins.

But clearly both ImgMCE and Zedity show off the advantages of layers in WordPress UI design. In effect, users can have Wix-like page designs. So I fully expect to see Gutenberg and/or the PageBuilders incorporating layered features in UI Interfaces in the future. Speaking of which our last Christmas present is Nimble Builder.

Nimble Builder hints at the Customizer UI Direction

The last Gutenberg Christmas present is the plugin Nimble Page Builder. Now Nimble Builder has 10,000 active installations and gets a 4.8/5 WordPress plugin rating – robust for a new plugin. And truth be told Site Origin had been using a Customizer like interface for the Wireframe part of its Page Builder for at least 5 years.

However, Nimble Builder functions inside the Customizer and it gives insights into how the “Gutenberg Customizer” will work:
What we see here is that the Nimble Page works inside the Customizer creating text content in a section at the top of the post. But this section is “invisible” to the regular Post editor – be it Gutenberg in this case or Classic Block editor. Here is a screen shot of the post being edited in the Gutenberg editor:
And as predicted the Nimble Builder section is invisible in the Gutenberg Editor. Yet when the post is displayed the “invisible”  Nimble Builder section becomes visible as shown:
Now why would someone want to have invisble content in a page or post. One use case is to hide content from casual user editors who could create problems by editing more than they authorized too. Another use case for Nimble invisible sections is to have content only to appear to designated post/page visitors – every body else gets the simple content.

And Nimble Builder is very capable of adding content above and below the “regular page content as shown in this example using the Classic Editor. First the results – a simple one line in the Classic editor with Nimble data above and below:
Now this post was built in the Classic Editor with only one line. The Nimble Builder used two sections:
Note that the Nimble Builder has a group of prebuilt sections that canbe used and then edited to match users needs. As well Nimble Builder has 13 modules which are pretty sophisticated with several optional settings for each. Now there are three cautions with Nimble Builder that users must consider. First, on a very fast connection, the Nimble Builder customizer added about 7-9 seconds to the Customizer load. Second, with some themes which are already heavy Customizer users like Astra and OceanWP, the load times with Nimble Builder were in the 15-18 second range with browser timeout warnings. Third, some portions of Nimble Builder are still in beta and it showed as Nimbl bUilder had to be deactivated and then reloaded to get WordPress working again. But this is valuable information as Autommatic and the Gutenberg team work on the second phase of the project, adding significant block-based SiteBuilding capabilities to WordPress..

Christmas Goodies Summary

So  lets look at the Gutenberg Christmas Goodies. Gutenberg itself is working but falls well short of the existing top Pagebuilders. This becomes obvious when users work with Site Origin PageBuilder or Visual Composer jointly with the Gutenberg Editor – so much gets done so much more quickly in the ageBuilder. It is almost embarrassing.

But with the next phases of the “Gutenberg” UI project clearly designated to become better PageBuilders and SiteBuilders than the current incumbents – the top end PageBuilders/Sitebuilders – lets hold Gutenberg developers feet to the fire and demand that they deliver comparable performance and capabilities as the top end PageBuilder tools deliver right now. And none of this Horsehoes-Close-Enough WYSIWYG, CSS Styling options and full scope templating claims.

Likewise, it is implied that Gutenberg Blocks will be pure and not duplicated like the many different competing PageBuilder widgets. Not really. Just two weeks ago our review of the Gutenberg addons marketplace found 18 multi-block Gutenberg add-ons where more than half of the blocks were duplicated at least 4 times. I suspect within 3 months there will be  double the number of Gutenberg add-ons and the same proportion of duplications/redundancies.

Finally the Classic Editor and CSS Style Editors have both been rejuvenated with the intro Gutenberg. The very good WordPress CSS Style Editors will help shore-up the minimal styling options found in native and 3rd part Gutenberg blocks. Likewise all the attention on the Classic Editor will have users looking at the very fine crop of TinyMCE add-on including the layering stocking stuffers introduced. Not a bad hall for a Gutenberg Christmas.

 

 

 

 

 

.