Gutenberg has been out for quite a while, but you’ll find that there are still plenty of new skills to learn and features to discover. Plus, the editor receives updates pretty frequently, which means there might be an abundance of details you aren’t even aware of.
Though Gutenberg promotes itself as an easier way to build websites than the classic WordPress editor, there’s still a learning curve to it. Discover all these hidden features, though, and you’ll be well on your way to mastering the tool.
1. Slash Commands
Starting off, we have a cheat that’s super easy to miss, but will revolutionize your writing experience. Ever been working on something in the post editor and had to completely ruin your flow to go hunt down the block you needed?
No longer! Just type / and a drop-down menu with Gutenberg blocks should instantly appear. Want to add an image? Try /image. A heading? /heading has got you covered. It’s that easy.
2. Spotlight and Fullscreen Mode
If you’re finding the Gutenberg workspace a bit too distracting, the Spotlight and Fullscreen mode features will likely come as a blessing. You can enable and disable both of these by tapping the three dots in the top right of the screen.
In Spotlight mode, all blocks other than the one you’re working on are grayed out, and visual cues from other blocks are disabled as well. If you find the interface overwhelming, definitely turn this one on.
3. Document Outline
Look for a circled i in the top left corner that’s marked as Content Structure. Click it and along with basic information such as word and paragraph count, you’ll see the Document Outline. This shows your headings, properly structured.
4. Reusable Blocks
Do you always end your article with the same paragraph? Or find yourself reusing the same gallery, quote, or table in various places across your site? Reusable blocks are for you. No more copy-paste; now you can insert a pre-made customized block wherever you are.
To save a single block, click it, tap the three dots on the bar above it, and add it to your custom blocks.
Give it a name and you’re good to go. This is perfect if you always include a disclaimer, social media plugs, or anything like that at the end of your post. You can find reusable blocks in the block menu (the plus button in the upper left corner) under Reusable.
5. Copy and Paste from Google Docs
This is one of the Gutenberg features that’s easy to miss because it’s not even an option. If you’ve ever tried to copy and paste content across different platforms (from Word to a website’s text editor, for instance), you know that more often than not it turns into a mess.
Not if you’re writing in Google Docs. Just paste your content in, and everything arranges itself nicely into its own block. The paragraphs, images, and everything else should all appear correctly. I know it works, because I actually copied this very article over from Google as well.
6. Drag and Drop Images from Desktop
Did you know that you can drag and drop images right into Gutenberg, and they’ll automatically make it to your media library? There’s no need to deal with the slow process of image uploading anymore.
All you need to do is grab an image on your desktop or in Windows Explorer, then drag it from there right into the Gutenberg window. You’ll see a little box showing you the image placement, and when you let go it will automatically turn into an image block.
7. Block Transform Previews
Gutenberg comes with the ability to transform one block into another. For instance, you could turn a paragraph into a quote, an image into a carousel, or anything else compatible. To do this, select a block and click on the icon showing its block type on the left to see the transform menu.
For a long time this feature did not have any sort of preview, so it was very clunky to use. But now you can finally preview the transform by simply hovering over the option you want.
8. Global Styles
Want to try something a little experimental? Global styles is an experimental feature, part of the Full Site Editing initiative. Soon Gutenberg can be used not just to edit posts and pages, but to design entire sites and themes.
Global styles enables you to change visual aspects of your site right in the Gutenberg editor. These show in both the front and back end, and are universal except for blocks with individual styling applied to them.
9. Add Media via Copy and Paste
Besides images and Google Docs content, you can also easily copy and paste links into Gutenberg. These will be automatically embed as viewable content. For instance, social media posts show up as proper embeds, news articles display their image and sample text, and videos become playable.
10. Robust Block Pattern Options
Block patterns work very similarly to reusable blocks. The difference is that these come pre-installed with your theme or can be added as features by downloading Gutenberg plugins. Themes, such as Twenty Twenty-One, can also come with their own block patterns.
You can insert them into your content at any time via the plus symbol in the upper left corner and then choosing the Patterns rider.
11. Vertical Button Layouts
Previously the button block lacked much customization, especially if you wanted your buttons to be in a column rather than a row. It was quite annoying getting your layout to look the way you wanted.
Now all you need to do is select the button, click the Transform to variation drop-down, and select Vertical.
12. Block Themes
This one is for the theme editors out there. Block Themes are specialized WordPress themes designed entirely around the block system. Full site editing is still an experimental feature, but you can start playing with it right now.
13. Navigation Block
One of the Gutenberg features you may have missed is the Navigation block. This allows you to create a nav menu either based on the ones you’ve already configured, or filled with new links of your choosing.While this isn’t very useful within a typical blog post, when full site editing makes its full debut, this little block is going to be a big deal.
14. Block Variations
Block variations are basically preset settings you can easily switch between on any block. Only a few of the blocks, like the column blocks, have them. After you insert a column block, you have the option to choose between a few different styles.
Now you can transform between these variations easily. Before, it was impossible to change between them after choosing, as they were essentially considered separate blocks.
15. Widgets Function as Blocks
Remember Appearance > Widgets, where you manage areas like your sidebar and footer? It’s just gotten a big overhaul. Now instead of Widget Areas, you’re working with Block Areas.
What this means is that areas like the sidebar are no longer excluded from the new block system. Everything works together now, so it’s easy to insert blocks into widgetized areas on your site. These are of course dependent on your theme.
16. Media & Text
One often overlooked block is the Media & Text block. It’s a simple one that allows you to add media (such as an image or video) and text side by side. You can use this to spotlight media you want to draw extra attention to or to caption an image.
17. Convert Multiple Blocks to Columns
So you have a bunch of content, but now you’ve decided that you want to display it in columns. Before you’d have to copy and paste your content into a new column block, but now it’s easy as a snap to just convert your blocks into columns.
All you need to do is highlight the blocks you want either with the mouse or by clicking with shift held down. Then bring up the menu and click to transform to a column block. They should evenly separate into the proper amount of columns.
18. Cover Blocks
The cover block is an underused but magnificent way to make your posts or pages pop. These function similarly to the cover image you assign blog posts, but with so much more customization. You can add text, insert unique styles, and even turn on a beautiful parallax effect.
19. Query Block
Last but not least is the Query block. At first you might be confused about what this one does. It’s simple: it’s a block-based form of the post loop, or the code that displays a list of your latest blog posts.
Of course you can customize what posts show up; change the ordering, the amount of posts it shows, and how many columns it displays as.
Any Gutenberg Features We Missed?
Gutenberg strives to make editing your WordPress posts and pages (and soon, your entire site) a fully visual process. And while getting the hang of the builder itself is fairly intuitive, there’s just so many options that a few are likely to float under the radar.
Hopefully this article will have helped you gain an understanding of some Gutenberg features you might have still been in the dark about. Follow our pointers on how to make the most of them, and you’ll be Gutenberg master in no time.
For more information contact us at the link given below.
Eastlink Cloud Pvt. Ltd.
Tripureshwor, Kathmandu, Nepal
Phone:166001-95985
Mail:info@eastlinkcloud.com
