loading

Introducing Gutenberg

[You're reading part 2 (of 2). Read part 1.]

Recently, I wrote a post on the Oxide blog about the future of WordPress. Big changes to the web’s most used content management system are getting closer and closer (yet we still don’t know exactly when the changes will officially be part of the WordPress core).

If you had the chance to read that post, you’ll know that I laid out some ideas and predictions on the impact of WordPress’ new editing experience, aptly named Gutenberg (after the inventor of the movable type printing press). Now that I’ve had some time to use Gutenberg (I’ve already built a client site using it), I thought I’d share some of my initial impressions.

What is Gutenberg?

First and foremost, Gutenberg is an updated content editor. It is a big step in improving the post and page editing experience. With Gutenberg, users will have greater control over the overall editing experience. We’ll now have control over basic things like page layout directly from the editor — something that was nearly impossible before if you had no experience with PHP and CSS.

Gutenberg is named after the inventor of the movable type printing press

Why do we need a new content editor?

For as long as I’ve been developing WordPress websites, the content editor has been a WYSIWYG editor (What You See Is What You Get). With the classic WYSIWYG editor we’re all familiar with, you’re probably aware that what you see on the back end is hardly what you get on the front end. Creating posts and pages is an exercise in patience: Save out on the back end; flip to the front end to see if how your content is appearing; flip back to the back end; make adjustments; flip back to the front end; rinse and repeat.

With this old model, the editing experience is inherently flawed. It encourages hacking together solutions to fix the problems with the classic WYSIWYG editor. Out of the box, the post and page editor gives you a very limited set of options. You’ve got the standard content editor (i.e. the WYSIWYG editor) with capabilities limited to headings, paragraphs, lists, and media. There is no way to manipulate page layout. That’s totally fine if you want every page and post to be one single scrolling column of content, but I find that is never the case.

If you want to build a page with a little life to it, you have to resign yourself to alternatives. I go with custom fields to make up for the shortcomings of the WYSIWYG editor. They offer a ton of flexibility and unlimited options for the amount of content I can fit into a page. With a fair amount of coding, I can leverage custom fields to build beautiful page layouts and reuse the code and custom fields on pages throughout a website. But this requires a whole lot of custom code to get the front end to look like a well-designed page with content that is easily editable. And content creation gets a little rigid about where it can go. This method has its drawbacks, but it gets the job done in most situations.

It’s imperfect because it takes some control of content out of the hands of our clients. For instance, let’s say I have a subhead custom field. The client has little control over where this field shows up on the front end.

How does Gutenberg improve the editing experience?

Gutenberg (left) beside the classic editor (right)

Gutenberg gives us a well-rounded sense of control over layout, all within a single encapsulated editor. It reimagines how we edit content with blocks — or different types of content that you can move around (like building blocks) to build a page. My favorite Gutenberg block is the columns block. I often build pages with sections that have three columns, something that required a fair amount of coding to show up on the front end correctly. Now columns come out of the box. With a few CSS modifications, I can make a perfect set of columns anywhere on a page that utilizes a CSS grid.

The Gutenberg editor makes the back end look very similar to the front end. As I develop a custom theme for a website, I build out a companion CSS stylesheet for the Gutenberg editor that pulls in the same styles as the front end. In other words, when you’re editing a page you will know almost exactly how it will show up on the front end purely by how it looks on the back end. I think this will help our clients truly feel like they know how to use their website once we hand it off to them, with a whole lot less fear that making a change to a page will “break things.”

Is this something to get excited about?

Gutenberg is a monumental change for WordPress. This post doesn’t serve it justice for how big of a change Gutenberg is for WordPress. I think there will be some serious resistance to changing over to Gutenberg once it becomes part of the WordPress core, but I encourage anyone who uses WordPress to embrace it. It virtually eliminates the need for some of the most cumbersome features of WordPress. I don’t see a need for shortcodes once Gutenberg is more mature. Blocks should be able to handle everything shortcodes handle.

Gutenberg is obviously still in its infancy. It has a lot of kinks to work out before it overtakes the classic editor. But it’s a big leap from the classic editor. It really brings WordPress into the present as far as the web is concerned. It utilizes React, which I suspect will lure a lot of a really talented web developers into the WordPress space.

What I’m most excited about is where WordPress will go after more developers get their hands on Gutenberg and push it into new and exciting territories. If you’re interested in learning more, here are a few articles that go in-depth on Gutenberg:

Gutenberg, or the Ship of Theseus

Gutenberg Handbook – Design Principles

Gutenberg on Github

13 Nov 2018

‘Enter’ to submit

WordPress 5.0, or How I learned to stop worrying and love the future

At Oxide we use WordPress to build client web projects. We love WordPress because it’s such a versatile tool to build websites. It comes right out of the box with a very mature content management system that’s simple to hand off to clients to maintain themselves. One of our main goals with any web project is to make it as extensible as possible for clients so they don’t have to come back to us to maintain content or make small…