10 Gutenberg Hacks Your Digital Agency Shouldn’t Miss

WordPress’ Gutenberg editor has gained some mixed reactions since its release in 2018. While its purpose is to make content-making easier, some users still prefer the Classic Editor’s familiar interface.   

Whether or not you’ve already swept the block-based editor under the rug, there’s no denying the convenience it brings.  

In fact, we’ve listed down 10 Gutenberg hacks (plus a bonus tip!) that’ll make you spin web pages faster and boost productivity pronto.  

10 Gutenberg Hacks Your Digital Agency Can Benefit From  

1. Explore keyboard shortcuts  

If keyboard shortcuts don’t make work easier, we don’t know what will.  

Generic keyboard shortcuts still apply in the Gutenberg editor. But the new interface also comes with its own set of dedicated ones.  

With this, you don’t have to click and scroll your way to find a specific function.  

To view the full Keyboard Shortcuts list, key in Shift + Alt + H.  

Here are some keyboard shortcuts you’ll find most useful to your business:  

• Duplicate a block: Ctrl + Shift + D  
• Delete a block: Shift + Alt + Z 
• Add a line break: Shift + Enter  

Aside from keyboard shortcuts, these markdown syntax inputs also take the hassle off work:  

• Quick insert blocks: /  
• Create a heading: ## 
• Add a quote: > 
• Create an unordered list: * 

See how quickly you can create pages:  

Now you’ll have more time for the more important aspects of your enterprise.   

2. Transform block types 

Want to change a block type into another? Skip deleting and adding another block. 

Convert a block to another type in Gutenberg. For example, change a regular paragraph into a quote, heading, or a list. Aside from text, you can also convert image blocks, like turning a single image into a photo collage.  

To transform blocks, click on the Transform to option on the block’s toolbar.   

3. Drag-and-drop images from your desktop 

In this fast-paced world, the fewer the clicks, the better. This is why WordPress users love Gutenberg’s drag-and-drop feature.  

To insert an image, you don’t need to create an image block and upload the file from your computer. 

Simply drag an image from your desktop and drop it into the Gutenberg editor. Place it wherever you want it to appear on your page.  

Say you’re curating your web design agency portfolio. This time-saving feature will help you organise screenshots of your past projects without breaking a sweat.  

4. Set a fixed toolbar 

The elusive toolbar is one key feature Gutenberg users either love or hate. It just appears and vanishes as you go from block after block.  

But don’t fret, you get an option for that. Set your toolbar to fixed so it’s always accessible in your editor.  

Turn this mode on by selecting Top Toolbar. You can find this option by clicking on the [⋮] icon in the top-right corner. 

5. Use the Columns block 

Get more creative with your page layout with Gutenberg.  You only need to select the Columns block.  

Once you add a Columns block, input some text or place another block inside it. You can even put another Columns block inside it to better layout your content.  

Here’s an example you might find useful when setting up or updating your website.  

That's less coding effort and more time on your plate for other business priorities. 

6. Reuse block templates   

Save blocks and reuse it on other pages using Reusable Blocks. You’ll thank this feature when you must use the same block on multiple pages.  

Whether it’s a quote, a CTA, or an author’s bio, reusable blocks significantly cut down your daily load.  

To save a block as a template, do the following: 

1. Click on the [⋮] icon in the block toolbar.  
2. Select Add to Reusable Blocks and type in a name 
3. Click Save.  

From then on, you can insert the block template on your future posts in a few clicks! 

Here's another exciting thing. Say you want to use your block templates on your other websites — Gutenberg’s got your back.  

You can import or export block templates as JSON files. Here's how: 

1. Click on the [⋮] icon on the top-right corner of the editor.  
2. Select Manage All Reusable Blocks.  
3. From there, import block templates from JSON files or export them as JSON.  

7. Edit your URL slug 

The Gutenberg sidebar still has the same settings as the Classic Editor, where you add categories, featured image, etc.  

See something missing, though? A lot of users have pointed out it took them a while to find the URL slug. It's easy but tricky to find.   

To edit your post’s URL slug in Gutenberg, you’ll need to click on the post title first. The URL slug will then appear on top of the block for you to change.  

8. Explore third-party block plugins  

There’s so much that the Gutenberg editor can do. But if you're looking for a certain function that’s not in the editor itself, there might be a plugin for that.  

Block plugins work like plugins do — just plug and play. Install and activate a block plugin and you get a cool new feature on your Gutenberg interface. 

There are tons of useful Gutenberg block plugins out there. But here are ones that your digital agency should leverage: 

Gutenberg Blocks Design Library  

Creating page layouts can take a long time, especially through a new WordPress interface.  

So if you want to quickly prototype a webpage for a client, install the WPDesignHub plugin. It’ll give you access to sleek, ready-to-use page layouts made from default Gutenberg blocks.  

No need for any JS or CSS skill on your end. And the best thing is that the plugin is compatible with any Gutenberg-ready WordPress theme.  

Editor Blocks for Gutenberg  

Editor Blocks adds new content blocks to your regular Gutenberg editor. Whether you’re creating your clients’ websites or your own, you'll find the plugin convenient at best.  

Explore and use the pre-made sections, such as testimonial, pricing table, team members, and brands (where you can place partners or client logos).  

You can also directly use a Hero block, which conveniently puts together your hero image and CTA in a single block.  

9. Switch to the Code Editor for HTML edits  

Back with the Classic Editor, you’re free to hop over to the Text tab for quick HTML edits. But did you know you can still access the HTML Editor in Gutenberg? 

Head over to the [⋮] icon in the top-right corner and select Code Editor. Or use the shortcut Ctrl + Shift + Alt + M.   

10. Convert old posts into Gutenberg blocks 

Good news for Classic Editor fans! The Classic block allows you to create content with the Classic Editor toolbar.  

You’ll also notice that when you edit pre-Gutenberg pages, the entire post falls under a single Classic block. This way, you'll still be able to edit the post with the Classic Editor features.  

But if you already prefer the Block Editor, you can convert old posts into separate blocks. Click the [⋮] icon on the block toolbar and select Convert to Blocks.  

This will automatically dissect each element of the page into its own block. From there, go on editing with the all-new Gutenberg features.  

Bonus Tip: Not satisfied? Deactivate the Gutenberg Editor  

If none of these tips work for you — or if you don’t have the time to try out the new WordPress editor for production — no worries.  

You can deactivate it and go back to using the Classic Editor. For that, you'll need to install and activate the Classic Editor plugin.  

Make the most out of WordPress  

Gutenberg is all about seamlessness and efficiency, and you have all the means to leverage it. Use these hacks to boost productivity and focus on the more important things — like scaling your business.  

And make sure to get a reliable WordPress hosting provider to better support (and gain) clients!