20 Things You Might Not Know About Gutenberg WordPress Editor

The Gutenberg WordPress Editor is perhaps a complicated writing workspace at first glance. In fact, its whole structure can be very intimidating to explore especially for someone who is totally comfortable with the classic editor.

Some of you may have been using it already but are still quite alienated with the Gutenberg’s overall setup. Working with the “blocks” and the unfamiliar structure can be even more frustrating than writing the article itself.

In contrast, did you know that there are several ways to lighten up your Gutenberg experience through executing some hacks?

Here, let me give you a few things you might not know about Gutenberg, which can be of great help to your writing experience.

1. Edit using Classic Editor through Classic Block without worrying about backward compatibility.

If you are not that satisfied with the toolbar Gutenberg is offering, you can always switch to a classic block. A classic block allows you to change a block’s toolbar to the classic editor toolbar, which you are accustomed to.

To do this, click the plus (+) button on the upper left side of your editor, and select classic.

You will then notice that the block itself will be changed. This will greatly depend on the classic visual editor plugin you have installed and activated. In the particular block shown below, the TinyMCE Advanced plugin is being used.

The system will automatically detect the classic plugin you have activated. Hence, you will not have to worry about any compatibility issues.

2. Looks better when admin menu is collapsed.

If you want to have more writing space and a distraction-free writing experience, you have the option to constrict the admin side menu of your writing interface.

Just hover over your side menu on the left, scroll down to the bottommost part, and click that collapse menu option. You can always expand it again by clicking the same portion.

Here’s what will happen if you collapse that admin side menu:

3. Use a slash (/) for inserting shortcut options.

If you want to add block elements instantly, just type a slash (/) on a particular block you want such elements to be added. Using this function, you can get an instant access to the commonly-used block options.

4. Information button to check word count and structure

Curious about how much words you have made within your article? You can check it by clicking the information (i) button on the top left side of your editor.

By doing such, you can also determine the number of headings, paragraphs, and blocks you are currently having in your write-up. The overall structure or the document outline will also be shown based on the headings that you have made.

With this, it will be much easier for you to review and revise sections of your write-ups. By clicking the headline, you will be automatically directed to the particular segment of your content without scrolling the whole thing.

5. Fix Toolbar to the top if you prefer to manage options in a single location.

Instead of having the toolbar shown in each block you are working on, Gutenberg WordPress Editor allows you to fix such toolbar to the topmost part should it be more convenient for you to control options in one specific location only. To fix the toolbar at the top, just click the three vertical dots at the top right part of your editor and select Unified Toolbar.

6. Show and hide settings sidebar shortcut.

Clicking the gear icon on the top right part of your WordPress writing interface lets you show or hide the settings for the whole document or for a certain block.

You can also use a shortcut function while holding the shift, control, and comma keys simultaneously ( Shift + Ctrl + , ) to show or hide it for Windows; or shift, command, and comma keys ( Shift + CMD + , ) for Mac.

7. Use Shift + Tab to show more options for the selected block.

In order to obtain more options from your toolbar in a particular block, you can simply show it by holding shift and tab keys simultaneously. You can also select other block options while continuously holding the shift key and pressing the tab key one at a time.

8. Use Spacer Block to add a gap between paragraph/ elements.

A spacer block allows you to increase the gap between blocks. To add a spacer block, just insert a new block, hit the add block option on the left side, scroll down and click layout elements, and choose spacer.

The height of the spacer block is exactly 100 pixels. To change that, just drag the blue circle at the bottom of the spacer block and drag it to change its size. You can also input the exact pixel height on the settings sidebar depending on your preference.

This is how your content preview will look like before adding any spacer blocks:

9. Add hash marks to make an existing block as a heading.

If you want to change a particular block into a heading, you can just put hash marks at the first portion of the sentence, and then, hit the space key.

The Gutenberg WordPress Editor supports three heading sizes: H2, H3, and H4. Take note that as the heading number increases, the heading font height decreases. And the number of hash marks you have to put corresponds to the number of the heading.

Adding two hash marks corresponds to H2; three hash marks to H3; and four hash marks to H4. Just don’t forget to hit the space key after putting hash marks.

You might want to see the difference of these three headings:

10. Just add image block and upload the images later for better distraction-free writing.

Adding images on your content can sometimes break the momentum of your writing experience. Nonetheless, with Gutenberg WordPress Editor, you have the option to just leave an image block on certain parts where you are planning to add some images.

Just insert a block, choose the image block option, and worry about uploading your images later either through uploading or inserting URL.

11. No need to select embed block; just paste the link and it’ll automagically turn into embeds.

Instead of adding an embed block, you can just input URL sites directly to your content without having issues of linking different content sources such as videos or tweets from external sites.

All you have to do is to copy the specific URL of the content you want to add, and paste it directly on a new block.

The Gutenberg WordPress Editor will automatically detect the URL you have inputted and convert it into a viewable content as part of your write-up. You can also add some captions at the bottom of the element you have inputted.

12. Shortcut to inserting new blocks

To insert a new block before or after the block you are currently working on, you can automatically add one by holding the control, alt, and T keys (Ctrl + Alt + T) for inserting a block before; and control, alt, and Y keys (Ctrl + Alt + Y) for inserting a block after the selected block.

13. Use Shortcode Block when pasting shortcode to resolve rendering issues.

If you opt to put complex pieces of elements to your content through shortcodes, you can simply add one by creating a new block, scrolling down to the widgets portion, and clicking the shortcode.

Simply copy and paste the shortcode you want to add on the space provided.

14. You can paste a single image; no need to drag and drop. It’ll automagically be uploaded.

There are instances when you want to add an image from Google or from your social media accounts, but instead of downloading and re-uploading the image to your write-up, you can just copy the image and paste it directly to a new block.

You can do the same to the image files from your computer without dragging and dropping them.

15. Shortcut to selecting multiple blocks

Selecting multiple blocks can be difficult, especially if you are including special elements like videos or images.

Thus, instead of simply clicking and dragging blocks of your choice, you can just perform the shortcut function by holding the control, shift, and arrow keys (Ctrl + Shift + Arrows) simultaneously for Windows; and command, shift, and arrow keys (CMD + Shift + Arrows) for Mac.

16. Transform block to other block is available for grabs.

If you have mistakenly configured or you just simply want to change the format of the current block you are working on, you can transform it to other block types by clicking the double arrow icon located at the top left side of each selected block.

17. Manage block visibility per device and user login state using “Block Options” plugin.

If you want to restrict specific blocks to particular devices, then you have the option to use the Block Options plugin.

To get access to this free plugin, just go to your admin side menu bar, select ‘Plugin‘, and click ‘Add New‘. On the search bar, type “block options” and choose the one with the “B” logo. Click ‘install now’, and then, activate it.

Once you go over your Gutenberg WordPress Editor, select the particular block that you want to restrict, and on the settings sidebar, look for the “block options” to control the block’s visibility on each device.  You also have the option to restrict such particular block to the users of your site.

18. Full-screen mode

To those who prefer to have more space in their Gutenberg workspace for a distraction-free writing experience, you can do so by enabling the full-screen mode. Just click the three vertical dots on the top right part and select Fullscreen Mode. You can go back to the normal setup by clicking the same option.

19. Spotlight Mode

Gutenberg WordPress Editor’s spotlight mode allows you to focus on a particular block that you have selected while decreasing the opacity of the other blocks. Being in this mode lets you increase your concentration in a particular block especially when writing or editing.To enable the spotlight mode, just click the three vertical dots on the top right part and select Spotlight Mode.

20. Keyboard Shortcuts for the Gutenberg WordPress Editor (Shift + Alt + H)

Knowing some keyboard shortcuts will not only help you refrain from clicking that mouse. It can also help you become more efficient when it comes to writing and editing your content.

To know the available keyboard shortcuts that you can use, select the three vertical dots on the top right part of your editor, and select the Keyboard Shortcuts under the Tools option; or you can simply show it through holding the shift, alt, and H keys (Shift + Alt + H) simultaneously.

The Gutenberg WordPress Editor offers jam-packed functionalities enabling you to come up with a more sophisticated content layout without installing too many plugins. If you take some time to master it, your efficiency in laying out your content may incredibly improve by maximizing the capabilities of this new WordPress editor.

Do you know other helpful tips to make the Gutenberg editor experience a lot easier? If you do, kindly share it in the comment section.