I Gave Gutenberg a Second Chance. Here's What I Learned.

David Sutoyo — Tue, 06 Oct 2020 23:31:10 +0000

Recently, I conducted an extensive review of 12 Gutenberg block plugins. Even though Gutenberg — now called the Block Editor — has been around since 2017, I haven't used it much beyond converting classic blocks to rich text blocks. Beaver Builder filled my need for a page builder, and I didn't see much reason to switch. But as Gutenberg gathers momentum, I felt like it deserves a second chance. Plus, I was curious to see how Gutenberg stacked up (no pun intended) to the competition. Here's what I liked, and didn't like.

What I Liked

Towards a better publishing experience

Gutenberg completely revamps the WordPress publishing experience. Prior to Gutenberg, WordPress relied on TinyMCE to power the editor. The classic editor assumes the user works with words with an occasional image, while Gutenberg opens the editor up to all sorts of content via blocks.

When using TinyMCE, adding anything besides text or images was an awkward experience. You had the choice between raw HTML and shortcodes, and neither option was particularly user-friendly. With Gutenberg's custom blocks, the user is able to add custom content using context-specific UI controls. Elements such as tables and sliders can now be added and edited right inside the editing screen instead of another admin page.

The world of web publishing is no longer satisfied with text and aligned images. It now demanded flexibility, responsiveness, and interactivity. Gutenberg is here to tackle that problem. While it may not be perfect, it is a giant leap in the right direction.

The JavaScript Revolution

The release of Gutenberg followed another major update to WordPress, namely the addition of the WordPress REST API. These two releases signaled a new paradigm shift in WordPress development. Prior to this, WordPress developers worked primarily with PHP with some Ajax. The advent of the REST API allowed developers to work with WordPress data without ever touching PHP. The introduction of React into Gutenberg brought JavaScript front and center in WordPress' architecture.

Personally, I welcome the move to embrace modern JavaScript. The addition of React means that front-end developers who dislike working with PHP can still find a niche in WordPress development. Diversifying the developer community also means new ideas and more innovation. It opens WordPress up to possibilities that were previously unattainable.

JavaScript development isn't without its drawbacks, of course. Personally, I'm not particularly fond of the massive toolchain required to write modern JavaScript, or the rapidly-changing standards that presents a steep learning curve for beginners. But JavaScript is here to stay, and it has proven its versatility. If learning JavaScript means I can apply it to multiple platforms, then I'm all for it.

What I Didn't Like

Identity Crisis

Back around 2016 and 2017, WordPress was already enjoying a dominant market share. Even as WordPress was eating up the competition, it was clear that the classic TinyMCE editor wasn't capable of handling complex layouts. Using shortcodes to display columns was a hot mess and encouraged theme lock-in. It was also evident that sites like Medium and Squarespace were offering a better writing experience. On the WordPress side, the core editor looks woefully outdated as more users began adopting page builders such as Elementor or Beaver Builder.

When Gutenberg was released in 2017, the similarities to Medium and Squarespace were hard to ignore. Sure, Medium was gaining in popularity at the time, but the decision to mimic Medium's interface seems shortsighted to me.

Medium's UI lives within an opinionated framework. There is flexibility inside well-defined boundaries. Yes, you can choose between image sizes, but you cannot change the font, the margins, or other settings that might fundamentally affect the site's design. It is clear that Medium's editor is just that, and not an actual page builder.

WordPress is now grappling with Gutenberg's identity. Is it an advanced editor, or is it a page builder? Right now, there is a big push towards full-site editing using Gutenberg. We know that a Medium-style UI works as an advanced editor, but can it work as a page builder?

Uncanny Valley

Though not exactly billed as a WYSIWYG editor, Gutenberg offers just enough preview power that it can be confused as such. I don't think WYSIWYG is an explicit, stated goal of the Gutenberg, but all the development around it seems to imply that it is, or will become, a WYSIWYG page builder.

In my opinion, one of Gutenberg's biggest user interface barriers is what I call the "uncanny valley" of WYSIWYG editing. By definition, the editing preview of a good WYSIWYG editor should look very similar to, if not exactly like, the final layout. Gutenberg faces several hurdles in achieving a useful WYSIWYG interface.

First, WYSIWYG in the editor is dependent on the active theme supporting editor styles. A good theme adds editor styles to help achieve WYSIWYG, but with Gutenberg it's not as easy. Not all themes provide proper admin styles, and this creates an inconsistent editing experience that is outside Gutenberg's control. Most other successful page builders bypass this problem by doing their editing on the frontend.

Second, the Gutenberg UI can be frustrating at times. Placed elements and drop targets lack clear, visible boundaries to help guide the user. For example, when working with multiple columns, you get floating “+” icons that look like orphans:

When moving blocks, your only visual guide is the presence of a thin line. There is no sense of where you are in the document, and the lack of a clear drop target makes the exercise extremely frustrating:

Finally, during my review of the major Gutenberg plugins, I consistently found UI bugs that hamper the editing experience. It wasn't clear whether these bugs originated from third-party plugins or from Gutenberg itself, but the fact that a number of them share the same bug makes me wonder if it originated from core.

Building for the Future

With full-site editing on the horizon, I believe Gutenberg needs to transition to a true WYSIWYG editor as the next step. While I may have my gripes with the Gutenberg UI, I am optimistic about Gutenberg's future. Gutenberg has expanded WordPress' horizon, and like WordPress, it will continue to innovate and adapt.

DEV Community: David Sutoyo