5 Tips to Maximize Your Productivity with the WordPress Gutenberg Editor

WordPress is hands down the most versatile Content Management System on the web.

It doesn’t matter if you’re trying to build an online store, a travel blog, or a simple online photography portfolio. Regardless of the possible lucrative business ideas, you’re thinking of pursuing, WordPress is guaranteed to have the tools you need.

As a free, open-source CMS, one of the most impressive aspects of WordPress is the fact that it continues to get updates. This enables users to keep up with the ever-changing web design industry.

This time, however, we’ll take a look at one of the biggest updates to a staple feature that WordPress users have come to love — the Gutenberg content editor.

What is the Gutenberg Editor?

For those who don’t know, the Gutenberg editor is one of the core offerings of WordPress 5.0, which was released on December 6, 2018.

The update overhauled the classic, What You See Is What You Get or WYSIWYG content editor. It gives the editor a more modern interface and a much more robust arsenal of features.

For WordPress veterans, having a new feature that completely changes your workflow can be intimidating — if not frustrating. That’s why it’s understandable why there were mixed reactions when the Gutenberg WordPress editor was announced.

The good news is, we already got our hands on the Gutenberg editor and there’s definitely a huge improvement productivity-wise. You just need to get the hang of its new features and understand the best ways to use them.

Without further ado, here are five tips that will help you maximize your productivity with Gutenberg.

1. Familiarize Yourself with the Editor

This may seem like a no-brainer, but it bears repeating.

WordPress is hands down the most popular platforms for freelance blogging, business, ecommerce, and others, if you want to have complete control over your website design.

With the new editor, designing is now much easier.

In order to appreciate what Gutenberg can do, you need to spend some time with it and get to know the interface.

Unlike the classic WYSIWYG editor, the Gutenberg editor chops down your post into smaller content blocks. You’ll also notice that the main toolbar where you can insert hyperlinks, set the paragraph alignment, create bullet points, and so on is gone by default.

Don’t worry, you can still restore this toolbar for a particular content block by clicking the “Add Classic” button.

You can also enable a lightweight version of the toolbar for the entire editor by expanding the three-dot settings menu and selecting “Top Toolbar.”

To add more content blocks, you can simply click on one of the two “Add Block” buttons on the interface.

Lastly, the right panel shows the usual settings you can access from the classic editor. This includes the post’s visibility settings, post format, tags, and featured image.

There’s also a new “Block” tab that allows you to change the color settings of the current content block, modify the font size, and add a new CSS class.

2. Understanding Content Blocks

If you got excited and clicked the “Add Block” button mentioned above, then you should already know that Gutenberg has dozens of content block types — ready to spice up your WordPress content in one click.

Unfortunately, explaining each and every one of these content blocks would warrant a full-length article, so let’s just do a quick roundup of some of the cool things you can add in an instant:

• Image galleries
• Quotes
• Videos
• Audio clips
• Columns
• Page breaks
• Buttons
• Comments
• Social media

Bear in mind that some WordPress plugins enable content blocks once activated, such as form builders, carousels, and so on. Not all plugins, however, implements this feature.

Still, that’s just because Gutenberg is fairly new and there are still a plethora of plugins that aren’t updated in months. But it’s only a matter of time before you can easily embed new content elements, be it your trainer certification, security logos, or even your own custom widgets.

In any case, mastering these content blocks will definitely supercharge your productivity with WordPress — especially once you learn how to use the keyboard shortcuts.

3. Use Keyboard Shortcuts for Content Blocks

Although content blocks themselves could save you time piecing together your WordPress content, you can speed things up even further with shortcuts.

All you need to do is enter a slash (“/”) and type in the name of the content block you want to use.

For example, if you use Ninja Forms and would like to add a simple form, simply type “/ninja” and the content block should pop right up.

Using this shortcut is considerably faster than clicking the “Add Block” button and manually searching for the content block you want to add.

Aside from this, you can also use all of the keyboard shortcuts from the classic editor — along with a few new ones from Gutenberg. You can press Shift + Alt + H to view a full list of the keyboard shortcuts.

4. Dragging and Dropping

One of the innovative and loved features to expect from Gutenberg is its drag-and-drop actions that make rearranging content blocks even more effortless.

Highlighting a specific block would display the six-dot icon to the left, which allows you to drag and drop a block to wherever you want.

Other than content blocks, you can also drag and drop images from your desktop straight into Gutenberg — saving you the trouble of uploading the image and manually selecting it from your media library.

You can also write a caption, adjust the image’s scaling, embed a link, and insert an “alt text” tag from within Gutenberg.

5. Use Markdown Syntaxes

Finally, just like with the classic editor, the Gutenberg editor also supports markdown syntaxes for quick formatting options.

For example, if you want to create a heading, you simply need to type in two hashes or “##,” hit space, and type your desired header. Gutenberg will automatically change the format of the text once you press Enter.

Here are some of the markdowns that Gutenberg supports:

• > — Quote
• 1. — Create a numbered list
• – — Create a bulleted list
• ** — Bold wrapped text
• * — Italicize wrapped text

Conclusion

There you have it — five easy ways to maximize your productivity with the new WordPress Gutenberg editor.

You may be one of the users who felt uneasy with the idea of learning an entirely new content editor in your CMS. But it only takes a couple of minutes with the Gutenberg editor to know that it’s one of the best updates included in WordPress 5.0.