Redefining WordPress content with Gutenberg

Demystifying the latest WordPress Gutenberg editor and how it’s meant to be used.

I’m a total advocate for it. Sure, it might have broken some existing WordPress sites (as new technology always does) but I’m absolutely convinced it was the best thing for WordPress moving forward.

Here’s why I love it now and so should you.

What is Gutenberg?

We have to start here first because this still isn’t clear for many people.

• For the average person, Gutenberg is the annoying new content editor for WordPress that makes you take extra clicks to make the same amount of content.
• For others, it’s the bastard editor that broke their existing WordPress sites, wrecking layouts and content design.
• For the most experienced professionals, Gutenberg neither helps nor hurts us. If there’s any inconvenience, it’s that we have to educate clients on one more thing.

For me, Gutenberg is more than just a new content editor. It is the redefinition of what we see as “content”. The way the old “classic” WordPress was made, we thought of content as being mostly just text. And that the classic content editor was just a text editor.

Content of the old days

And no surprise, the old content editor was built similar to other tools at the time…like word document editors. Rows of buttons at the top for text size, color, styling, alignment. And then a little button for images if you needed to add that. And it was perfect because that literally was the only kind of content we had at the time.

Go back even further, and we’ll really start to see the history of “content” in full context. Before websites, we had only “printed” content. That is, newspapers, magazines, flyers, brochures, etc. They were just text and images (as you can’t really have videos or interactive elements like comments.) And for the most part, internet content of the old days was built just like printed content…just text and images.

The future of content

Bring ourselves back into the future and what do we see? Content is no longer only text and images. It is also no longer one shape and layout. It can re-shape or reflow into constantly-adjusting containers. It’s much more alive and dynamic than the static content decades ago. And to harness the limitless potential of new content, we need a new content editor.

Gutenberg no longer sees a content as being only text but as “content blocks”. So instead of a glorified text box with mainly text-styling options, we now see a big content container in which we can add “content blocks” (aka “Gutenberg blocks). You want to add text? There’s a Gutenberg block for that. You want a title? A video? An image gallery? There are Gutenberg blocks for those, too.

Whatever type of content you want to add, there is a “Gutenberg block” for it. And depending on the type of block you choose, you will be presented with different options to edit it. There are limitless possibilities as to what kind of content a Gutenberg block can hold. Developers are creating new ones everyday.

Gutenberg is the future of content editing

Current problems in CMS usability

Most usability problems in WordPress today revolve around “what is content” and “how you edit content”. There is a massively blurred line between the content, the content styling, the content shaping. Don’t believe me? Try asking a beginner to explain to you the difference between a post and a page, or a plugin and a widget.

Then ask them how to style the content. Should it be done from the editor? Or from the customizer? Or in theme options? Or hard-code? Or hell….just install a whole new plugin just to edit content (*cough* PAGEBUILDER *cough*). Or how about installing a plugin that creates a new kind of content, but then having to embed that content into your pages using a shortcode? Hahaha! What a mess.

This isn’t only a WordPress problem but for all content management systems, really. It’s even more confusing when they design their interface differently and use different lingo for thinks. I remember Joomla using “extensions”, “modules” and “sections”, whereas WordPress had “plugins” and “widgets”.

And to be honest, I’m not sure I could have designed it any better. The world keeps evolving in how we interact with one another, requiring new confusing terms to be made up or re-using an familiar existing term but in a new manner. (Like the word “widget” to describe a WordPress content block position.) But I digress.

Gutenberg helps you manage content in WordPress, natively

Go to your editor and you’re presented with a blank screen where you can fill it with content. Want to add something? First you have to decide what type of content you want to add. (WordPress calls them Gutenberg blocks.) GENIUS!

It no longer assumes you want text. You can start with an image, a slider, a video, a giant block quote, whatever the heck you want. This is incredible in helping users understand web design and content management differently. It’s game-changing, life-changing, just fantastically clever stuff.

What if you want to add a new type of content?

• Like a list.
• A table.
• Or the latest scores from last night’s basketball game.
• Or the weather forecast.

Simple…install a plugin that then enables a new Gutenberg block for you. Once the plugin is activated, you can now add that content into any page. It’s so sad because the new generation of WordPress isn’t even going to appreciate it because they don’t remember the pain of the soon-to-be old WordPress days.

Back in the days, you had to install a plugin. Let’s say a recipe plugin, and it would like create its own of kind of “recipes pages”. Which might be great if you were happy showing recipes on their own separate page. But what if you wanted to embed those recipes into existing pages? It’d be a mess. Lots of copy-paste, or using shortcodes. Conflicts with CSS styling and JS scripts.

It was always a giant mess between WordPress and its plugins, neither side knowing how much responsibility to take for the custom content and its styling. You were always between either something that had tons of design and functionality conflicts, or something that didn’t have enough features to make it useful or user-friendly enough.

Now with Gutenberg, you have a much more graceful way of adding content because the content editor allows for so many more different types of content to be added. All plugin developers have to do is make the custom content that their plugin creates to be compatible with Gutenberg and that’s it. You can think of the Gutenberg editor as a super-flexible toolbox that can hold any kind of tool for any kind of project.

Gutenberg helps you shape content in WordPress, natively

What if you know what content you want to add, but don’t know how to shape it to your liking?

I’ll give you an example…pretend you have a video and some text. And you want them to go side-by-side instead of one above the other. How would you do it?

• For this simple task alone, many (if not most) people would install a darn pagebuilder. ARGH!! Drives me crazy. They’re such massively bloated plugins and tons and tons of code just for something so simple.

With Gutenberg, you can now add “containers” to your content. Instead of just dumping content out into the blank space and trying to reshape it with custom CSS or another plugin or complicated buffoonery, you could just throw in a container first to control it’s shape, size, layout, etc. Maybe you want it in columns. Or in a zig-zagged shape. Or a block with a background image. Or a scrolling block. Or full-width. Whatever you want.

All you have to do is install a plugin that gives you the custom block container you want. How awesome is that? No more installing a bloated pagebuilder plugin that takes over the entire page just to have a custom container effect.

What Gutenberg means for the future of WordPress

I think Gutenberg standardizes not only the content editing experience but the overall user-interface for all content management (even for plugins). If you really think about it, all WordPress plugins (relating to content) are really doing is just either giving the option of new content or new content layouts. That’s it! Ok…actually, they also give new content editing and also content organization but let’s keep this simple, ok?

It’s a massive step forward as we have too many confusing interface takeovers due to WordPress themes and plugins that try to offer users a more customized way of creating and editing their website. Indeed, people do want to create more unique websites. But they don’t actually want a unique page/content editor each time!

Benefits of Gutenberg to users:

• WordPress can natively add and edit more content from its standard editor. Less clicking back and forth to other screens and settings to manage simple things.
• Easier to manage and edit content. (No more having to remember where to go to edit things.)
• Faster websites (due to fewer and cleaner-coded plugins being used).
• Fewer chances of things breaking due to WordPress core or theme/plugin updates.

Benefits of Gutenberg to web developers:

• Less work to create custom designs and layouts.
• Less work to teach clients how to edit their site.

Benefits of Gutenberg to plugin developers:

• Less work to create new page layouts to accommodate custom content.
• Less styling and scripting conflicts for custom content.
• Less documentation needed to teach users how to add new content. (Most will instinctively know to look for the Gutenberg block.)

What can you do to embrace Gutenberg today?

BLEGGH! I hated hearing myself talking about theory after theory waxing Gutenberg praise. Here are some actionables for you:

• Enable Gutenberg editor on your site – it’s the future. Just do it. Get rid of the Classic Editor and get used to Gutenberg now. Most content will convert to Gutenberg blocks easily.
• Start playing with custom Gutenberg blocks – there are tons of plugins out there that basically give you more options in your editor (called “Gutenberg blocks”). Have fun and see what you can do.
• Rethink your page layouts – Gutenberg opens up a world of possibilities for your content layout and design. You can design your content in much more different ways with only the standard WordPress editor. Time to unleash your creativity.
• Phase out unnecessary themes/plugins – you no longer need bloated themes and plugins to have custom layouts/designs.
• Phase out your pagebuilder – you don’t need a whole pagebuilder just to have colored background sections and a slider on the homepage. There are smaller separate plugins that can give you each specific feature using far less code (and page weight).

Yes, you can actually have a much more customized WordPress site while being easier/simpler to edit, using fewer plugins, and less code weight (page-load effect), all because of Gutenberg!

• Play with the new Gutenberg editor here.
• Search for “blocks” or “custom blocks” in the WordPress plugin repo.