,

Gutenberg: The Obligatory Review

The WordPress content editor has been, for a long time, the biggest achilles heel in regards to new WordPress users. I’m a huge fan of ambitiously designed articles, like the infamous NYTimes Greenland piece, which is now two years old. To achieve that effect in WordPress now is no easy feat, but the current focus of development aims to change that.

I’ve spent some time eagerly testing the new Gutenberg editor. Let’s note upfront that this is beta software. It isn’t perfect yet, far from it. It’d be easy to get caught up in the numerous bugs, glitches, and inconsistencies, but I don’t think that’s as important. Those issues will get reported and ironed out as needed. As I write this, there are approximately 300 open issues on the official Github repo. Taking a look at the open pull requests, we can see plenty of fixes and enhancements moving forward.

Instead, I’m trying to think about Gutenberg from a few other vantage points.

First, as a blogger. How practical are these tools? How seamlessly do they inject themselves into my writing experience? It’s no secret that Medium is a much nicer writing experience, but then again Calypso (the other clear forefather of Gutenberg) is pretty nice, too. More often than not, I find myself jumping into WordPress.com (via Jetpack) to do my writing. Where will Gutenberg fit in to my writing workflow?

Second, as a freelancer and theme author. How will Gutenberg work with existing themes and plugins? What extra steps will I need to take to accommodate for Gutenberg? What about my past clients whose themes I designed years ago? Are they left in the dust unless I go back and rework my theme?

And third, as a WordPress stakeholder. What’s the real priority here? Why are we really doing this? How much of the community is on board with this approach? I remember watching the 2016 State of the Word with the impression that block-based editing was one of several ideas for replacing the editor. Now it’s the de facto approach. Furthermore, is WordPress 5.0 (scheduled vaguely in the next 6 – 9 months) even a realistic goal for this (even though it does sound cool)?

With that context in mind, here’s a few thoughts I have about Gutenberg.

Options for Theme (and Moral) Support

Let’s take a look at something like ‘wide width’ images, a setting which allows you to specify an image size that is wider than the actual text/content of the blog post. As a theme author, do I just need to always account for this? What if there isn’t any space in my design? What if I use a sidebar? Not to mention, we haven’t even addressed the concept of ‘responsive design’ yet.

What I’m hoping for is a number of add_theme_support() options that toggle visibility of certain features. Or just one add_theme_support() option for Gutenberg as a whole. What if ‘wide width’ images just don’t work in my theme? Can I easily disable it? Similarly, will add_editor_style() work for more customization of Gutenberg?

As we get further along in development, I’d like to see clearer guidelines of how Gutenberg will affect theme development in the future, but also in the past for themes and website that are already out in the wild.

What the PostSettingsSidebar is going on in here?

In the Gutenberg editor, take a look at the right-hand side of the screen, the Post Settings Sidebar. This is the clearest Calypso influence I’ve seen yet. The right hand sidebar alternates between overall post settings and similarly block settings, even though the button to toggle it only uses the limited term Post Settings. So far, only a few blocks even take advantage of the sidebar, though many display other settings elsewhere on the page.

Contextual settings or actions are typically displayed in one of three ways:

  • A fixed header/sidebar whose contents may adapt (e.g. Microsoft Word, MacBook TouchBar)
  • A floating toolbar near the element (e.g. right clicking a mouse or a long press on the iPhone)
  • A modal window hidden behind a settings button (e.g. most apps, Beaver Builder)

There’s no right way to display contextual settings and actions, but there can be consistency. Inserting an image block gives us the standard media modal, where we can edit the image title, caption, alt text, and which image is selected. After we’ve made our choice, we’re stuck with a very limited fixed sidebar, a floating toolbar, and no way to change which image we’ve selected.

Realistically, how easy will all these be for new writers to grapple with?

In a similar vein, Gutenberg displays the Post Title as if it were part of the content, but not the featured image. How does this relate to the actual front end design? Can WordPress or at least the theme authors make intelligent choices about these sorts of settings, how they’re displayed and in what context?

Drag and Dropping the Beat

I’m assuming drag-and-drop is on the roadmap, but I didn’t see it. I know that someone out there is tweeting that it’s 2017 and we deserve drag-and-drop. And they’re right.

The larger question for me is what about layout in general? Some tend to report that Gutenberg will allow for more advanced layouts, including rows and columns. It doesn’t look like this is the case, yet. If so, this could be a big issue, especially if Gutenberg is bringing in its own css-grid, nested inside the grid of choice for the theme.

Whether it’s drag-and-drop, or simply a block based design, the Gutenberg editor is making implications about design, implications that may be hindered by the theme. Gutenberg is writing checks that its front-end can’t cache. (see what I did there?)

For example, one of the most annoying aspects of the current WordPress editor is inline images, or images that allow the subsequent content to wrap around it. It never really works the way you want it to, it never looks the same on the front end.

When I imagine a revolutionary, block-based editor for WordPress, I imagine this being the first issue that gets fixed. But it doesn’t. In fact, I’m not even sure there’s an idea of how it will get addressed here at all.

Blog Posts + Landing Pages = Blanding Pages?

I tend to agree with Chris Lema’s take on the issue, which is that we all seem to be missing the point. Is Gutenberg supposed to bring us closer to the front-end of the site? If so, it’s not really doing a great job, because we’re still abstracting the content-creation away from the final context of our site’s design. With the overwhelming amount of buttons and settings that the average user has in the TinyMCE editor and the lag between clicking ‘preview’ and loading a new page- the big complaint is that they don’t want to guess what the final product will be. 

I also agree with Lema that for a solid ‘landing page’ build, Beaver Builder is the place to be. I think that what makes Medium, Squarespace, and the like so popular is because they embraced WYSIWYG and actually made it more or less come true. Beaver Builder brings the same experience to WordPress, and it does it well. Ultimately, maybe Project Gutenberg- which really seems to be Matt/Automattic pushing Calypso into the WP-Admin- should remain optional, like a plugin or a setting in Jetpack.

Also, if you haven’t had a chance yet, read Mark Root-Wiley’s thoughts on Gutenberg, in which he brings up Matt Mullenweg’s shifting views on some underlying philosophies of WordPress, like accessibility and backwards-compatibility.  It’s a tough issue, because WordPress does need to evolve and adapt to stay current- but where those evolutions take place will deeply alter the fundamental tenets of WordPress culture.

It would be easier to get behind these radical changes if we were all on the same page in terms of the purpose and in terms of the data. Morten Rand-Hendrikson makes a strong case for telemetry, a strong alternative to ‘because that’s how Medium does it’ and ‘because Matt says so’ that we’re seeing now. This is more important than ever now that these potential changes to core mean giving up a lot of previously held beliefs without the motivation of a clear sense of purpose.

Final Thoughts

Most of my thoughts here centered on simple content and images, still the standard building blocks of a good blog post. We could go deeper, but I think that the main issue is not how each and every block works, but what the actual metaphor of design we’re going to use is. Are we really concerned with the front-end? Are we WYSIWYG? Are we making layouts and settings any easier than before? Or is Gutenberg just a pretty facelift on an otherwise aging philosophy of how we write content on the web? Has the relationship between Gutenberg and theme development been properly explored?

A joke loses its impact when it has to be explained. I know. I’ve made a lot of bad jokes in my life. Gutenberg is the result of a lot of hard work, focusing on one of the most important and challenging aspects of current WordPress usage, the editor. It’s no joke. And the fact that there’s so much that’s still unexplained about Gutenberg isn’t funny.

The best we can do as a community is support the development team with thoughtful analysis, intelligent conversation, and plenty of real-world testing.

Learn Modern WordPress Development

I’m sharing the best resources and tutorials for developers building in and on the block editor.


3 responses to “Gutenberg: The Obligatory Review”

  1. […] that he sees the current editor as one of the biggest Achilles heels of the WordPress platform. In his review, he tries to look at Gutenberg as both a blogger, theme author and stakeholder in […]

  2. […] that he sees the current editor as one of the biggest Achilles heels of the WordPress platform. In his review, he tries to look at Gutenberg as both a blogger, theme author and stakeholder in […]

  3. […] that he sees the current editor as one of the biggest Achilles heels of the WordPress platform. In his review, he tries to look at Gutenberg as both a blogger, theme author and stakeholder in […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.