Gutenberg 101: What the New WordPress Editor Means for Designers
By paying tribute to the man who invented the printing press, WordPress clearly has lofty goals for its much-anticipated update to Version 5.0.
More than 500 years ago, Johannes Gutenberg introduced movable type and set the stage for the Renaissance and Age of Enlightenment. Sometime this year, WordPress will officially unveil an overhaul to its WYSIWYG text editor — a significant update to the world’s most popular content management system.
The Gutenberg editor aims to simplify the process of building pages and posts for users who aren’t savvy in HTML or creating shortcodes — but how will it change how experienced designers and developers interact with WordPress?
As WordPress experts ourselves (click here for proof), here’s our take on all things Gutenberg.
Our automatic updates and strong security defenses take server management off your hands so you can focus on creating a great website.WordPress + DreamHost
First Off: What is Gutenberg?
WordPress is one of the best content management systems you’ll ever get your hands on — and all for free. But it’s not perfect. The CMS can be difficult for new site owners to acclimate to despite the bevy of resources available.
The Gutenberg project is out to address an issue that has limited WordPress for a while. Gutenberg, like so many third-party plugins before it, is seeking to improve an already great product by making the design and publishing process more visual.
Creating your dream website takes time, even with a fantastic platform like WordPress. Even if you find the perfect theme, your site may not look exactly as you had envisioned in your head — and likely has some theme options and functionalities you don’t even know how to use. Getting that tailor-made look typically means investing a lot of time.
Here’s where Gutenberg comes in: you’ll be able to easily customize the finer details that make your site just right all inside the new visual editor. Gutenberg will operate a little more like a drag-and-drop website builder with movable building blocks.
To be clear, however, the update will not completely replace the classic TinyMCE editor. The familiar text and formatting customizations will continue to be available to users, just in different places.
The Good: An Updated, Modern WordPress Experience
Gutenberg allows you to drag and drop blocks of content onto the page or post that you’re editing.
What are they, you ask?
Without getting too deep into the nitty-gritty details, blocks are sections of design elements and information that can be modified from a single, unified interface.
The blocks, formatting options, and other features of Gutenberg give the user control over where everything on the page lines up. The interface even supports multi-column layouts that (as with the page builder plugins in page builders like Divi and Visual Composer) have important advantages.
This will give you the added functionality you desire and ultimately cut down on the use of widgets, shortcodes, and plugins that can slow down your site. In turn, that means less time spent updating plugins (and no more praying that the theme you love so much releases a patch to fix that bug you and thousands of other people have complained about).
And since this will be a part of the WordPress platform, you can rest easy knowing a community of millions will be there to lend support and advice (that is, of course, assuming our rock star support teams haven’t already solved the problem for you).
Related: What Is WordPress Full-Site Editing? And How Will It Affect Your Site?
The Bad: Big Changes and Fears of Compatibility
For those who have worked with WordPress for many years, Gutenberg will feel weird for a while. Designers and developers who are already comfortable with modifying WordPress themes, pages, and posts will likely spend a lot of time with trial-and-error experiments to figure out how to make the blocks and other features do exactly what they want.
Workflows stand to change dramatically. With Gutenberg, you won’t have to switch over to the Widgets interface under the Appearance section in the WordPress navigation menu every time you want to tweak a sidebar or figure out where a plugin’s settings and interface are stored. Experienced users will have to retrain their instincts and learn new processes. This learning curve could put off users who either don’t have the time or patience to figure out a brand new editor.
As with any new platform, Gutenberg’s drag-and-drop editor has limitations and quirks. Adding a new element to a page is likely to affect the layout of a page in a way you didn’t see coming, as the editor doesn’t make it clear where you will be putting an object when you drag it around the page. This can be an amusing part of the creative process, but more than likely it’ll kick off a tedious process to troubleshoot and fix the design. Although Gutenberg is powerful, it still requires some finesse.
Theme support is also currently an ominous question. Although most themes are expected to update and adapt their styling to accommodate the new block elements, there’s no telling how quickly each theme developer will make this move. Realistically, there are probably going to be strange and broken layouts across the internet as this transition unfolds.
Because blocks are more focused on content instead of styling, Gutenberg is still a ways off from offering the precision and control over a layout that most designers, developers, and page builders provide users. So far, the layouts created in Gutenberg will only apply to the page or post in which it was created. Even if you make a particular page look dynamic and amazing, you’ll likely have to recreate the designs elsewhere — unless you dive into the JavaScript or PHP in the Block API.
What Blocks Mean for Consistency and Usability
Blocks are the foundation of the Gutenberg editor. We touched on this earlier, but now it’s time to dig deeper. Using the Gutenberg editor for a standard post or page is akin to working on a giant Word document — and for the most part, that’s how the editor functions.
Gutenberg breaks down pages and posts into smaller, more manageable blocks of content. Here are some of the most useful and common blocks to keep in mind:
- Paragraph
- Image
- Gallery
- Heading
- Quote
- List
- Cover image
- Video
- Audio
As you can see, pretty standard functionality. The advantage of blocks, however, is apparent when users need to format and style content or adjust layouts. All of these block types produce results previously available only to those who know how to write HTML:
- Pull quote
- Table
- Preformatted
- Separator
- Button
- Text Columns
These are not exhaustive lists, but they give you a great idea of what you’re able to simply add and arrange on a post or page. More daring users can even create custom block types.
The most amazing addition in Gutenberg has got to be the ability to drop widgets directly onto a page or post. Most templates currently relegate widgets to the sidebar and footer; this is definitely a game changer.
Gutenberg hasn’t completely taken over layouts and styling from designers and developers. The Block API enables users to create their own blocks or import third-party blocks. This will make for a more effortless use of most plugins and widgets, and we’ll likely see cumbersome WordPress add-ons shifted into a more easy-to-use block format.
The duplicate and share functions will help you with pages and posts you’ve customized. Maybe you’ve found the dream settings for your cover images and you’d rather not recreate them every time — duplicate the block and simply insert a new photo. Or use the sharing function to share blocks of content you want to keep the same on multiple pages or posts.
Related: From the Experts: 20 Great Blogging Tips for 2020
The Nuts and Bolts of Formatting Text and Multimedia
The editor has two settings available: document and block. In the document view, you’ll find all your usual WordPress publishing settings — such as visibility, author, categories, and tags — that trail the length of the sidebar. The block view is more dynamic and will show settings for the specific type of block you have selected on the page. This helps keep your screen less cluttered and centralizes the formatting options in one location (you don’t have to hunt for icons anymore).
When selecting a specific block, the toolbar holds a lot of information and enables you to duplicate, edit, change, or share certain configurations. The duplicate option is pretty straightforward and is best used, as I mentioned before, with blocks for which you’ve already found the perfect settings.
You can always edit and update the information in a duplicated block. For a shared block, however, you cannot modify the content after you’ve shared it. This is perfect for things you may not want to change, such as an advertisement you have on multiple pages or posts.
Interestingly, you can convert blocks into similar types. If you decide your cover image works better as a heading, that takes a grand total of three clicks to accomplish.
The image blocks, specifically, are what we consider some of the best features of the new WordPress editing experience. You can upload an image and quickly switch the area from a single image to a photo gallery. Before Gutenberg, this would have required adding a plugin and all sorts of extra steps to style efficiently. With Gutenberg, simply select the images you want, and, poof, there is your gallery right on your post or page.
Guidelines for Gutenberg: 7 Tips and Ideas
Gutenberg is still in beta testing, and its release date is somewhat murky. That being said, some best practices have emerged as people become more familiar with the new interface:
- Test with a Gutenberg-compatible theme. While Gutenberg is technically compatible with pretty much all themes, try it out with something built specifically with the new editor in mind to enjoy a hassle-free experience. You can always switch back later.
- Break up your content. Although this seems obvious for a block-based editor, it’s hard to break old habits for designers accustomed to thinking of posts as one solid chunk of text. Copying one block of text at a time is best, whether for a header or a paragraph.
- Never leave a block empty. This will probably be the fastest lesson you learn with this editor. Always use filler text and placeholders for images, or you’ll have a page full of empty blocks, which automatically shrink to a size that’s difficult to find again.
- Use a mock layout. Before transferring your content, toying around with blocks filled with dummy content will make perfecting your layout much easier. It’s a great design principle in general, but this works especially well for the visually-oriented Gutenberg interface. (If you do have to delete anything, you’ll cringe a little less.)
- Unselect your blocks. Blocks have two states in Gutenberg: selected and unselected. By simply clicking on neutral space in the editor, unselected blocks will give you a great idea of what your post or page will look like once published — no more dealing with opening and refreshing previews.
- Keep an eye on your editor settings. It’s easy to get a bit lost with the addition of a few extra screens and more spots to look for information. The right side of the Gutenberg editor is more than just the publish status now, so don’t forget to look there if you’re searching for some new feature.
- You can switch to TinyMCE anytime. Until you’re fully comfortable with Gutenberg, you can toggle back to what you know. WordPress 5.0 will include the “Classic Editor,” which restores the familiar TinyMCE interface.
Test the Waters and Give Gutenberg a Try
So, what do you think? Have we convinced you or are you still skeptical? To help designers dip a toe into the Gutenberg wading pool, WordPress has made Gutenberg available via a plugin.
We recommend installing Gutenberg on a staging site to avoid any compatibility issues. Alternatively, check out a live demo where you can play with the system and not affect your current site setup. Happy learning!
