- \n\t
- A Brief Introduction to the Gutenberg Block Editor<\/a><\/li>\n\t
- Feature 1: Copy-Pasting Google Docs to Gutenberg<\/a><\/li>\n\t
- Feature 2: Insert Blocks with the Slash Command<\/a><\/li>\n\t
- Feature 3: Drag and Drop Images from your Device Directly to Gutenberg<\/a><\/li>\n\t\t
- Feature 4: Adding Links by Pasting<\/a><\/li>\n\t\t
- Feature 5: Top Toolbar, Spotlight Mode, and Full-Screen Mode<\/a><\/li>\n
- \n\t\t
- Feature 5.1: Top Toolbar (Started as Unified Toolbar)<\/a><\/li>\n\t\t
- Feature 5.2: Spotlight Mode<\/a><\/li>\n\t\t\t
- Feature 5.3: Full-Screen mode<\/a><\/li>\n<\/ul>\n\t\t\t
- Feature 6: Reusable Blocks<\/a><\/li>\n\t\t\t
- Feature 7: Keyboard Shortcuts<\/a><\/li>\n\t\t\t
- Feature 8: HTML Anchor to Create Anchor Links<\/a><\/li>\n
- Feature 9: Content Structure and Block Navigation<\/a><\/li>\n\t\t\t
- Feature 10: Button blocks<\/a><\/li>\n\t\t\t
- Feature 11: Use Drag and Drop to rearrange the Blocks<\/a><\/li>\n\t\t\t
- Feature 12: Copy All Blocks<\/a><\/li>\n\t\t\t
- Final Thoughts<\/a><\/li>\n\t\t<\/ul>\n\n\n\n
A Brief Introduction to the Gutenberg Block Editor <\/h2>\n\n\n\n
Gutenberg was available for testing before its official release<\/a>. Since its release with WordPress 5.0, it got some mixed reviews from the community. It\u2019s important to remember that people tend to overlook some things, especially when they don\u2019t know much about them. Since we were all beginners at Gutenberg when it was introduced, it was a little unfair to come to any conclusions about whether it\u2019s good or bad. <\/p>\n\n\n\n
Content creators are not fans of daily routine changes, because it turns the productivity down a notch. This happens especially during the transition to the Gutenberg block editor because there are some \u201ctricks\u201d that not everyone knows about. Those hidden features could be beneficial when it comes to the overall workflow speed. We are listing a few of those secret features in this post, along with various workarounds to assist all Gutenberg users during its development.<\/p>\n\n\n\n
With this post, we are assuming that you at least had a look at Gutenberg and WordPress version 5.0. In case you haven\u2019t done that yet, we encourage you to go ahead. Also, you can take advantage of the fact that we have previous posts about both WordPress 5.0<\/a> and Gutenberg<\/a>, which entail some useful information. <\/p>\n\n\n\n
We are aware that many users choose to disable Gutenberg and continue on with their Classic WordPress editor<\/strong>. As we mentioned, change can be hard, and some people need more time than others. Because the Classic Editor is going to be supported through 2021, some users simply schedule their move for later.<\/p>\n\n\n\n
Let\u2019s move on to the list of Gutenberg \u201chidden features<\/strong>\u201d that you came for. <\/p>\n\n\n\n
Copy-Pasting Google Docs to Gutenberg <\/h2>\n\n\n\n
With Gutenberg, we can easily paste any content into WordPress, and it would need only minor tweaks to become great again. There is no unwanted and messy source code. All the headers, paragraphs, and images are neatly placed into their tailored blocks. If you write a lot, and you haven\u2019t yet made the transition to Gutenberg, all of this could be a compelling reason.<\/p>\n\n\n\n
If you often write content and use Google Docs<\/strong>, moving to Gutenberg is something you should consider. It\u2019s great for copying all types of content from Google Docs. Nevertheless, we would still recommend you to upload images separately for better SEO.<\/p>\n\n\n\n
Insert Blocks with the Slash Command<\/h2>\n\n\n\n
One of the most useful hidden tools in Gutenberg has to be the Slash Command<\/strong>. Using the slash command is going to trigger the Block Inserter and its search, so you won\u2019t have to interrupt your flow of writing. All you have to do is begin a new line with \u201c\/<\/strong>,\u201d and you will get a drop-down menu that helps you set up the new block in a matter of seconds:<\/p>\n\n\n\n
![\"Insert](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/insert-blocks-with-the-slash-command.png\")
<\/figure>\n\n\n\nAdditionally, there are some key combinations that you can find out when you hover over anything in the editor.<\/p>\n\n\n\n
Drag and Drop Images from your Device Directly to Gutenberg<\/h2>\n\n\n\n
Since time is priceless, here is another quick Gutenberg trick when inserting images. Yes, it\u2019s good old Drag&Drop. You can use it with Gutenberg, and it works perfectly. There is no need to go through the upload procedure and then browsing in the Media Library. You don\u2019t even have to pre-make a block. When you drop your desired image in Gutenberg, a new block is created automatically. The image is also uploaded to the Media Library. A real-time saver, don\u2019t you think?<\/p>\n\n\n\n
Adding Links by Pasting<\/h2>\n\n\n\n
Pasting links is another awesome feature that you get with Gutenberg. You can just copy-paste the desired link in the editor and Gutenberg automatically make a new block from it.<\/p>\n\n\n\n
The block editor will also detect your URL and convert the link into viewable content.<\/p>\n\n\n\n
This would be helpful when you need to add multiple links in your content. It will save you some time and help you with getting everything done faster.<\/p>\n\n\n\n
Top Toolbar, Spotlight Mode, and Full-Screen Mode<\/h2>\n\n\n\n
Three new features for customizing your writing space were introduced with version 3.8 of Gutenberg. The Top Toolbar<\/strong>, the Full-Screen Mode<\/strong>, and the Spotlight Mode<\/strong>. You can use all of them either together or separately.<\/p>\n\n\n\n
Top Toolbar (Started as Unified Toolbar)<\/h3>\n\n\n\n
It can be strange for each block to have its own formatting toolbar on hover and cover the content in the block above. The Gutenberg team came up with a solution for this, and its name is Top Toolbar<\/strong>. <\/p>\n\n\n\n
![\"Turn](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/turn-top-toolbar-mode-on-off.png\")
<\/figure>\n\n\n\nWith it, you get the same toolbar as for every block, but now it is above the editing area and does not cover any of the content you are working on:<\/p>\n\n\n\n
![\"Top](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/top-toolbar-in-gutenberg.png\")
<\/figure>\n\n\n\nSpotlight Mode <\/h3>\n\n\n\n
In Spotlight Mode<\/strong>, all blocks except the block you are currently working in, are grayed-out. <\/p>\n\n\n\n
![\"Gutenberg](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/gutenberg-spotlight-mode-preview.png\")
<\/figure>\n\n\n\nAdditionally, the spotlight mode makes writing less distracting by delaying all the visual clues about all separate blocks. The downside here is that features for individual blocks are harder to find. However, you can turn spotlight mode OFF<\/strong> with two mouse clicks:<\/p>\n\n\n\n
![\"Turn](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/turn-spotlight-mode-off-gutenberg.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Full-Screen mode<\/h3>\n\n\n\n
With version 3.8, Gutenberg now has a full-screen mode as well. You can switch it ON<\/strong> and remove the admin toolbar at the top, alongside the left admin menu. Once you\u2019ve removed the sidebar, all that you see on the screen will be the Top Toolbar (if you have enabled it) and your content. <\/p>\n\n\n\n
Reusable Blocks<\/h2>\n\n\n\n
Gutenberg has a new feature under the name Reusable Block<\/strong>. It allows users to define a specific block or a block combination and save them for reuse anywhere on their site.<\/p>\n\n\n\n
You might ask: \u201cWhen am I going to use that?\u201d There are various cases where you could implement reusable blocks. Maybe you would like to highlight a product of yours on more than one page. Perhaps you have some particular posts that need a disclaimer at the beginning or at their end. Instead of writing the same paragraph every time, you simply write it once and then save it as a reusable block, ready for use whenever you need it.<\/p>\n\n\n\n
Save blocks to your reusable blocks by clicking More Options<\/strong>, and then Add to reusable block<\/strong>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/gutenberg-save-blocks-to-reusable-blocks.png\")
<\/figure>\n\n\n\nOnce you do that, you will find the reusable block whenever you are adding a new one. It will be at the end of the list under the tab Reusable with the name you chose for it.<\/p>\n\n\n\n
Keyboard Shortcuts<\/h2>\n\n\n\n
Gutenberg developers came up with a new concept: a new line as a command line.<\/p>\n\n\n\n
By pressing enter in a paragraph, you can write another line to execute a few shortcut commands:<\/p>\n\n\n\n
- Feature 5.2: Spotlight Mode<\/a><\/li>\n\t\t\t
- Feature 1: Copy-Pasting Google Docs to Gutenberg<\/a><\/li>\n\t
![\"Add](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/add-anchor-links-in-gutenberg.png\")
<\/figure>\n\n\n\n![\"Add](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/add-a-new-post-in-wordpress.png\")
<\/figure>\n\n\n\n![\"Content](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/content-structure-and-document-outline-in-gutenberg.png\")
<\/figure>\n\n\n\n![\"Add](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/add-blocks-in-gutenberg.png\")
<\/figure>\n\n\n\n![\"Add](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/add-button-in-gutenberg-768x614.png\")
<\/figure>\n\n\n\n![\"Button](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/button-with-url-example.png\")
<\/figure>\n\n\n\n![\"Button](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/button-blocks-color-settings.png\")
<\/figure>\n\n\n\n![\"Drag](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/drag-and-drop-blocks.png\")
<\/figure>\n\n\n\n![\"Copy](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2019\/08\/copy-all-blocks-in-gutenberg.png\")
<\/figure>\n\n\n\n