alogo

Gutenberg will be THE WordPress Visual Editor

Late October  2017 the latest 1.6.1 release of Gutenberg, the new WP Visual Editor => PageBuilder => SiteBuilder being created by Automattic for WordPress, appeared in the WordPress plugin library. This is about 8 weeks from the previous upgrade and there are clearly many new improvements. But also Gutenberg has a long way to go  to match current top of the line WordPress PageBuilders like Beaver Builder, Elementor and Thrive Architect.

If we look back just  to September, the state of the Gutenberg art was woeful in comparison to not just contemporary PageBuilders but also the TinyMCE or WPEdit Visual Editors. So this 8 week hence late October update is a vital sign of the status of Gutenberg as the primary WordPress Visual Editor.

And the bottom line is that Gutenberg is already an improvement on both TinyMCE and WPEdit. Will it get better for its WordPress 5.0 release first quarter of 2018 ? Given the monthly improvements seen so far – a definite yes.

Gutenberg as the emerging new WP Visual Editor

The single most important addition to 1.6.1 is a fully functional Classic Text Editor block:
This is just like what is available in most current  PageBuilders  – a full copy of the functionality of the TinyMCE Visual Editor. This a large step forward for Gutenberg to match current Visual Editing capabilities. Note below we have added a video block that displays a .MP4 file. As we shall see most of the Gutenberg widget embeds are functional; but Gutenberg widgets still cannot be used in a multi-column row or section so popular in contemporary WP PageBuilders.

The next screenshot shows CSS styling options currently available in  Gutenberg:
As noted in the screenshot, only paragraph blocks support block styling for  font-color, background-color and text-align which is a small set of styling options[margin, border, padding, animation, etc options]. Even the text-columns block command only has more alignment options. This lack of full styling support is one of the major drawbacks of Gutenberg when compared to popular WP PageBuilders.

The next Gutenberg block tested was the preformatted block. One of sore needs in WP’s Visual Editor is for better preformatted blocks with extensive user control – tabs, blankspaces, inline breaks, drop caps, before and after icons. A suitably empowered and customizable preformatted block would cover the need for a quote block and and icons block.

What is also notable in this screenshot is the new Gutenberg taskbar across the top of the screen with block sensitive options. Also there is a block sensitive pulldown, so users have two Gutenberg sources for block customizing options.

The next two Gutenberg embeds tested were Heading and WordPress blocks.

Frankly the Heading Block was a disappointment. Heading did not support logo images, search fields, nor menu items. Clearly if Gutenberg is going to be used as a Sitebuilder tool, these deficiencies will have to be covered. In contrast, the WordPress embed  worked well.

Another embed block that worked well was TheMeetup embed as seen below.


But our testing of embeds showed that some were still not ready to roll as in the case of the Spotify embed seen above.

However a welcome sight was the Code block not mangling Web code like HTML, CSS, and JavaScript.


However, programmers cannot rejoice because color highlighting, alternating code line colors, and  line numbers  have yet to appear. Being able to illustrate code will probably require either Crayon or Code Prettify plugins for awhile yet. Meanwhile we tested 3 column text blocks and they performed cramped  for space but well. Again gutter width and the ability to customize column widths is still not in the cards. Columns blocks in WordPress are well behind the WPEdit feature set.

Another major improvement was the Gallery block. Our first tests in June were not encouraging.


However, again gutter width, background colors, justified layout, lightbox zooming and filtering of images are not available. But adding  these features will be getting close to current state-of-the-art plugins like  the free Foo Gallery and the premium Justified Grid plugins.

A big test was to see if shortcode blocks and the Classic Text block would support plugin shortcodes.

And as the screenshot shows, a Smart Slider 3 with full width settings worked fine in Gutenberg posts. But this required the multipurpose Astra theme where we could make a no-sidebar setting.

Finally we engaged in a small scale Gutenberg vs Elementor Page builder test. In Elementor we built an alternating 2 column row with special divider post as seen below:

The Elementor post took 5 minutes to do. The purpose of the exercise was to see if we could build the equivalent in Gutenberg and how long that would take. Our first tries used the Gutenberg Table  and the  Shortcode blocks:
The Table block came closest to matching the Elementor design. But CSS styling proved to be insufficient at this time. I suspect the styling fixes will be arriving soon in Gutenberg. The Shortcodes block just would not work with WPEdit or Shortcodes Ultimate code. Constantly Gutenberg rejected code that worked in the regular Visual Editor.  This first design foray took about 3/4 of an hour.

Our next using the Columns Text + Image text blocks was much closer to the Elementor design:
It took a little while to figure out how to get the Columns Text blocks to accept images. The trick was to switch to HTML View available  as shown in the screenshot below:
First we set up two  Text-Column rows in Visual mode. Then we switched to HTML edit mode and inserted the paragraphs and images in alternating blocks. finally we added the divider images at the top of the post. It took a bout 25 minutes to figure out and test the strategy which worked the first time in each step.  So Gutenberg can match a very good PageBuilder sort of – there are a lot more stylings and features quickly  available in Elementor which are still not to be found in Gutenberg.

Summary

It appears that Gutenberg will likely be ready for WordPress 5.0 by the first quarter with Visual Editor capabilities as good as if not better than TinyMCE Advanced  or WPEdit, two of the most popular free Visual Editor plugins. But matching the current top 6-8 PageBuilders is simply not close. See our review as too why. More seriously, the WordPress Development community especially  for themes and plugins are justifiably leery of the change that Gutenberg and Calypso will bring to their businesses.  Just look at how many are sponsors at WordCamp.US.

Pin It on Pinterest