WordPress Gutenberg Editor Episode

The Columns Block was the cliffhanger in the rollout of the Gutenberg Editor with WordPress 5 a week ago. It simply did not was glitchy right  through WordPress 5 RC3. So when WordPress 5 was announced for release in two days, this reviewer had some concerns. But lo and behold, the Columns Block appeared to work in the WordPress 5.0 release.

The WYSIWYG Promise

This reviewer has been having some vigorous debates since the release of WordPress 5.0 and the Gutenberg Editor. My essential argument is that the Gutenberg Editors blocks are only horse-shoes-close to WYSIWYG. This means that graphic designers used to the pixel perfect delivery of the top end PageBuilders are going to be pulling their hair on the UI Style Misfittings of the Gutenberg Blocks.

A colleague who is doing a project using the Columns Block has had a problem with WYSIWYG performance of the Gutenberg editor, particularly when using the Columns Block. The following test screenshots shows the nature of the problem:
In the Gutenberg Editor the Columns Block shifts the Author Profile block to the left – but a free Caxton Layout block does the right thing and shows the two blocks properly centered. Then when you go to display the post, users get another surprise:
It is this kind of Gutenberg editor misfits that is going to drive WordPress Designers and Developers wacky. Sure the Caxton block is an essential and free substitute for the still misfiring native Gutenberg Columns Block. But there is a broader issue brought up by this episode.

The Styling Options Gap

Right now several of the top end WordPress PageBuilders work directly inside Gutenberg. The best two are Themify Builder and Visual Composer which allow users to intersperse their PageBuilder sections right between Gutenberg blocks. So  for WordPress Developers that take advantage of these PageBuilders they will get to see live the difference between the many CSS Styling options  available in every PageBuilder widget versus the scarcity of CSS Styling in Gutenberg is available in many Gutenberg blocks. Now in our review of the new Feast of GutenbergAddo-on  blocks we found a very few new 3rd party Gutenberg blocks which more  than the minimal CS styling options.

This lack of CSS Styling options in Gutenberg will be a recurring issue necssitating use of CSS plugins like Stylist, CSS Hero or Yellow Pencl until Gutenberg blocks fill in the gap. In contrast, PageBuilders like Divi and Elementor have added commands that allow CSS Stylings  to be copy and pasted between their widgets accelerating design work for developers.


Gutenberg advocates are arguing that Gutenberg Editor is WYSIWYG or “close enough”. But the evidence that being horseshoes-close to WYSIWYG rather than Pixel Perfect adds to designers and developers workload. But the broader issue is how well Gutenberg does CSS Styling. And all the UI Editors [PageBuilders as well Gutenberg] are faced with the problem that the  Ease of  Use with “no programming required” presents a complexity problem. As users demand new and better features like animations, pop-up or slide-in messaging and conditional styling and dynamic actions – the UI Edit Interfaces become increasingly complex as well. And so familiar workflows become different and demanding. In sum, Gutenberg and the WordPress Pagebuilders are both embarking on a challenging task of making ever more Complex Edit Tasks easy to design, develop and deliver.

1 thought on “WordPress Gutenberg Editor Episode”

Comments are closed.

Pin It on Pinterest