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.
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.
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?
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.
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.