It’s been a while since WordPress launched its most awaited Gutenberg update. This update comes with the all-new Gutenberg editor that brings block-based editing replacing the old TinyMCE editor.
Gutenberg editor has opened its gates to an all-new approach of creating content. The block-based functionality also allowed developers to build their own blocks which resulted in some awesome Gutenberg plugins.
But, for those who are having a hard time using this new editor, I have put together some time-saving tips and tricks.
These 10 Gutenberg tips and tricks will help you get productive and use the platform more efficiently.
Let’s get started.
- 1. Copy/Paste from Anywhere (Google Docs, Microsoft, etc)
- 2. Use Slash (/) To Add A New Block
- 3. Add Images By Dragging Them From Your Desktop
- 4. Add Links By Just Pasting Them
- 5. Learn Gutenberg Keyboard Shortcuts
- 6. Create Reusable Blocks To Use Later
- 7. Transform Blocks Into Different Blocks
- 8. Hide The Sidebar For Full-Screen Editing
- 9. Jump Around Your Post’s Sections From Document Outline
- 10. Use Ultimate Blocks To Get Access More Blocks
These Gutenberg tips and tricks are for everyone using Gutenberg. Whether you’re a novice user or someone experienced, these tips and tricks will help you a lot.
1. Copy/Paste from Anywhere (Google Docs, Microsoft, etc)
This is my favorite feature of the Gutenberg editor.
If you’re some who writes content on Google Docs or Microsoft Word, you can directly copy and paste it to the Gutenberg editor.
The classic editor of WordPress didn’t have this feature and it was a very time-consuming process to copy the content and then upload the images.
With Gutenberg, you don’t have to worry about any of that.
Just write your content in Google Docs or Microsoft Word and then paste it directly.
2. Use Slash (/) To Add A New Block
Since Gutenberg is a block-based editor, you’ll have to add anything in the form of block. And Gutenberg comes with many blocks.
Finding and adding blocks can be a time-consuming process sometimes. Not to mention, if you have Gutenberg block plugins installed, this task gets even difficult.
Instead of finding and adding blocks, you can simply type ‘/’ and type the name of the block you want to add.
What’s even better is that Gutenberg gives auto-suggestions so that you don’t have to type in the full name of the block.
This will save you from finding the block you want and help be more productive.
There are many Gutenberg shortcuts but I think this is the one you should start using right away. And saves a lot of time.
3. Add Images By Dragging Them From Your Desktop
One of the worst thing about WordPress’s classic editor was how images were added.
To add an image you will have to add a media and then upload it. Even if you dragged and drop the image, it wouldn’t be uploaded instantly.
With Gutenberg in the picture, now you can simply drag images from your desktop and add them to your content.
And, this feature is not limited to your computer. You can copy and paste images from the Internet easily.
The image gets uploaded without requiring any confirmation or additional steps.
4. Add Links By Just Pasting Them
Pasting links is another awesome feature in Gutenberg.
You can copy and paste the link in your editor and Gutenberg will automatically paste it into a new block.
It will also automatically detect the URL and convert the link into viewable content.
This is helpful in cases where you have to add multiple links to your content. It will save you time and help you get things done faster.
5. Learn Gutenberg Keyboard Shortcuts
Slash (/) is just one useful keyboard shortcut in Gutenberg. There are many more you should start using right away.
While there are the general WordPress editor shortcuts that have been there for a long time. WordPress introduced some new dedicated shortcuts for the Gutenberg editor.
You can view the list of keyboard shortcuts by pressing Shift + Alt + H.
There are many great and easy to remember shortcuts for Gutenberg. Some of them are:
- Switch between Visual Editor and Code Editor: Ctrl + Shift + Alt + M
- Delete a block: Ctrl + Alt + Backspace
- Duplicate a block: Ctrl + Shift + D
- To create a heading: ##
- To create a quote: >
There are many shortcuts in Gutenberg and you should start getting a hand of them one by one.
6. Create Reusable Blocks To Use Later
Reusable blocks are blocks that you can save and use on other pages as well. You should utilize this feature in instances where you have to use the same block on different pages.
Examples of reusable blocks can include a CTA, quote, or a button.
The reusable blocks are saved as a template in Gutenberg. To save a block as a template, click on the three dots on the block and then select ‘Add to Reusable Blocks’.
You can give a name to your reusable block and then save.
Once your reusable block is saved, you can insert it to your pages just like any other block.
Gutenberg also lets you manage all the blocks and import or export them as JSON files. You can also delete your reusable blocks.
7. Transform Blocks Into Different Blocks
Added a text that you want to convert it into a heading, quote, or a list?
Instead of deleting and creating a new block, you can transform your existing block to other forms.
To transform a block, click on the transform icon. It will give you options to choose from. Select your desired transformation and your block will be converted to the new form.
I have found this very helpful when I wanted to convert my text into headings. You can use this Gutenberg trick any time to save your time.
8. Hide The Sidebar For Full-Screen Editing
Want a distraction-free environment for writing?
You can turn on the full-screen editing mode for a more focused and productive experience.
Full-screen mode in Gutenberg hides the left sidebar to give more real estate to the editor and to eliminate distractions.
You can enable this mode by clicking on the dots at the top right corner. There, you’ll see an option to enable full-screen editing.
9. Jump Around Your Post’s Sections From Document Outline
Previously, the classic editor of WordPress didn’t have any great features to help you view the document outline or any other information.
With Gutenberg, WordPress introduced the ‘Content Structure’ feature. This feature displays the entire document outline along with the number of words, headings, paragraphs, and blocks.
You can view the content structure by clicking on the information icon.
What’s great about this feature is that it lets you jump around different sections of your post by clicking on any part of the outline.
This quite a useful feature for pages with a lot of content. Instead of scrolling your way down to a section, simply click on the content structure and jump to your desired section.
10. Use Ultimate Blocks To Get Access More Blocks
Gutenberg is really a powerful tool. But what makes it even more powerful is that you can install third-party plugins to extend the functionality of this editor.
One such plugin that will help you do more is Ultimate Blocks.
Ultimate Blocks is a Gutenberg blocks plugin developed by us. This plugin comes with some really awesome blocks that you can use in your content.
While many other Gutenberg plugins add fancy blocks that can’t be used everywhere, Ultimate Blocks comes with 18 blocks focused around content.
Some of the blocks that come with the plugin are:
- Content Filter
- Review (Schema Enabled)
- Table of Contents
- Tabbed Content
- Content Toggle (Accordion)
- Image Slider
- Click to Tweet and more.
We are working very hard on adding new blocks to our plugin. This plugin will help you elevate your content and be more productive with Gutenberg.
So, these were the 10 time-saving Gutenberg tips and tricks you should definitely use. There are many ways you can use Gutenberg to increase your productivity.
These 10 are my favorite tips and have helped me use Gutenberg in a productive way.
What are your favorite Gutenberg tips and tricks?
Share with us in the comments section below.