How WordPress Gutenberg will impact designers

4 min read
Emily Esposito
  •  Apr 30, 2018
Link copied to clipboard

This year, WordPress will release its biggest change in several years with Gutenberg. It will bring a more modern, simplified content creation experience to users with some big changes to the editing interface. But, these changes will also affect the way we create, design, and think about WordPress.

What is Gutenberg?

Gutenberg is the upcoming overhaul of the current WordPress TinyMCE editor (the WYSIWYG text editor). Named after Johannes Gutenberg, who invented the printing press more than 500 years ago, WordPress Gutenberg also hopes to revolutionize the publishing experience.

Photo via WordPress

The mission is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts. According to WordPress, the kickoff goal was described as the following: “The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has ‘blocks’ to make easy what today might take shortcodes, custom HTML, or ‘mystery meat’ embed discovery.”

The Gutenberg editor will revolve around blocks, a unified way to style content with a clear, consistent user experience. These blocks can be anything: regular text, images, video embeds, buttons, tables, and more.

For a quick overview of Gutenberg, take a look at this live demo presented at State of the Word 2017 by Matt Mullenweg, co-founder of WordPress.

Gutenberg will be merged into WordPress 5.0, expected to be released sometime in 2018.

What does WordPress Gutenberg mean for designers?

Gutenberg has stirred up quite a debate among designers, developers, and content creators. Some are ready to see a more updated, modern WordPress editor, while others are worried about how the changes may affect current websites and plugins. And, as with any major change to something we’ve used for so long, it can be scary and uncomfortable to relearn a completely new process.

To get ready for these changes, here are some ways that Gutenberg will impact designers specifically:

1. More unified way to mix text and multimedia into your content

WordPress’ original purpose was to function as a blogging platform. And when it was first released in 2003, blogging was pretty simple.

Fast-forward to today. Users have come to expect diverse, rich types of content, like multimedia and more advanced design elements. This is something that the original editor did not handle very well.

On the other hand, Gutenberg was created to handle rich content, with no plugins, custom fields, or HTML required. Each block of content—images, audio, video, embedded media—is a self-contained block. If you make changes to one block, it won’t affect other blocks.

This new editing experience makes it much easier to add rich, complex visuals to pieces of content, without needing plugins nor the help of developers.

2. New alignment options for today’s device and screen sizes

For years, the standard visual editor let you align left, align center, align right, and assign no alignment. Gutenberg offers new alignment options for large resolution screens, full-width templates, and responsive sites, making it easier to optimize content for today’s device and screen sizes (and resulting in a better customer experience!).

And, as an added bonus, the Gutenberg editor itself also works well on mobile. Need to insert an image or make a quick change on the go? Gutenberg makes that much easier than before.

3. More consistent design experience

This new block-style approach of creating and editing content provides an opportunity for structure and consistency across everything you do. These blocks can remain constant from site to site and from theme to theme, without your having to relearn new themes or plugin hacks. This can result in a consistent, standard user interface for you and everyone else working in WordPress.

Image via WordPress

4. Risk of repetitive design and layouts

While designing with blocks creates a more standard interface experience, it also carries the risk of looking like every page was built from a block. For example, every page on your website will be created from the same set of block types. It may be difficult to avoid the same blocky, repetitive look and feel right out of the gate.

The good news is that developers can build custom blocks for unique needs, helping to diversify your available options.

Try Gutenberg as a plugin before it launches

You can prepare for these changes and share feedback with the WordPress team by downloading Gutenberg as a plugin here.

Collaborate in real time on a digital whiteboard