It’s been many years WordPress replaced the Classic Editor with the controversial Gutenberg editor. There are whooping 9+ million users still hold on to the Classic Editor plugin to continue creating content in old fashioned manner. In addition, there are also many plugins to disable Gutenberg editor on WordPress installation. However, this can’t go too far as many plugin and theme developers start making blocks for Gutenberg to integrate the functions. Yoast SEO is one of the good examples that supports Gutenberg starting from the beginning. It also does not make sense to have plugins to disable the core WordPress feature. In this article, let us explain useful Gutenberg tips so that you can switch to this editor permanently.
Gutenberg Tips for WordPress
If you are planning to stay with WordPress for longer time, then you should start using the Gutenberg editor effectively forgetting the odds. Frankly, there are plenty of visually clean and beautiful stuffs available in Gutenberg. You can adjust the typography, colors, and spacing for individual elements and use cool blocks like Accordion, Cover, Math, Social Icons, etc. Below are some of the most useful tips you should try – you can try on a dummy localhost site or in a staging environment before start using Gutenberg on a live site.
1. Gutenberg Keyboard Shortcuts
The old keyboard shortcuts with Classic Editor will no more work with the Gutenberg editor. You can quickly get all available Gutenberg keyboard shortcuts by pressing Control + Alt + H keys in Windows and Control + Option + H keys on macOS. Alternatively, go to “Options (three dots icon on top right corner) > Keyboard shortcuts”.
You will get a handy pop-up showing all available shortcuts.
2. Use Block Manager
Gutenberg has many default blocks categorized under different groups. However, it may be annoying to have so many blocks when you don’t need to use many of them. The best example is the “Embeds” having more than 30 blocks.
We are pretty sure that you don’t need to keep all these embedding options showing every time you try to search for a block. Click on the “Options” (three dots) icon on top right corner and choose “Preferences” menu. Navigate to “Blocks” section, which will open up a pop-up
showing all available blocks on your site. Check and disable the blocks that you don’t want to use on your site.
Note: Hidden blocks will not show when searching or in the conversion (Transform to) list.
3. Distraction Free Writing
Gutenberg offers multiple ways to use distraction free writing and focus on your work.
- By default, it shows the relevant formatting options only when you click on an element.
- Click the “Options” and select “Fullscreen mode” to see the editor in full screen mode. Otherwise, select “Distraction free” to hide all tools and menu (you can also collapse the left sidebar menus using “Collapse Menu” on bottom left).
- The “Spotlight mode” option will help you to focus only the element you are currently working. This is useful when you have to focus on creating a list or typing lengthy paragraph.
4. Use Call to Action
As mentioned, Gutenberg has very useful functions that were not available with the old Classic Editor. You can easily add colors to paragraph’s background to create an attractive call to action boxes. You don’t need to modify any CSS or use third party plugins for this purpose.
Similarly, you can add buttons and customize with different backgrounds inside the editor.
5. Patterns or Reusable Blocks
One of the beauties with Gutenberg is the reusable blocks, now called patterns. You can customize a paragraph, button or list and click on the three dots options button for that element. Choose “Create pattern” and provide the name for that block.
Later anytime you can insert that pattern block on any posts in your site. You can either modify the pattern locally on that post or use it as a global element. We use the reusable blocks for inserting affiliate links throughout the site. With few clicks, we can update or modify the reusable block with different content that appears on various posts.
6. Duplicating Blocks
Similar to reusable blocks, you can easily duplicate a block on the same post and reuse. Let’s say, you have customized a button block and wanted to duplicate the same button and update with a different text/link. Click on the “Options” button for that element and choose “Duplicate” option to create a copy. You can also use “Copy Style” to copy the block’s source code including styles and use “Paste Styles” to insert the block on the same or different site.
7. Disable Pre-Publish Checks
WordPress will ask you to confirm and suggest before you publish a post every time. However, you can disable this pre-publish check if you think it is annoying. Go to “Options > Preferences” and uncheck “Enable Pre-publish Checks” under “Publishing” heading. Alternatively, you can also disable the check when publishing a post.
8. Edit Elements as HTML
Earlier with Classic Editor, you need to toggle visual and text mode to edit the source HTML on the editor. This is kind of similar process in Gutenberg that you can switch between code and visual editors using keyboard shortcut or from the option panel. In addition, you can also easily edit the HTML code of any element separately. Click on the “Options” icon on the element’s toolbar and choose “Edit as HTML” to view the code. You can toggle to the normal mode by clicking “Edit visually” button. This is useful when you want to add attributes to hyperlinks or any other blocks within the editor.
9. Use Widgets Blocks
The “Widgets” category contains many useful blocks that are not possible before. You can insert latest comments, latest posts, archives, calendar, categories, RSS, search, tag cloud and shortcode inside the post content.
In addition, you can also insert custom HTML inside post content using “Custom HTML” block available under “Formatting” blocks.
10. Use Document Overview
When you are working with a long article, it is difficult to navigate to the sections on the bottom. Click the “Document Overview” (three horizontal lines) icon on top toolbar on top left. Use the “List View” to check the detailed view of each block or use “Outline” to view the headings structure. Click on any element or heading to quickly navigate to that section.
Gutenberg also shows if there are any mistakes in the heading levels used under “Outline” view. For example, if you have used H4 after H2, there will be an “Incorrect heading level” warning. You can change H4 to H3 to fix the document’s structure and remove the warning.
11. Use Hidden Features
There are many new features available in Gutenberg. You can try for few weeks to switch over from classic editor and we think you may not return back any time.
- The paragraph block has a “Drop Cap” option to make the first letter with drop cap style.
- You can add additional CSS class to any individual element and add the CSS style definitions under “Appearance > Customize > Additional CSS” section.
- Change elements from paragraph to list and convert many others.
- Create simple, striped and fixed width tables using “Tables” block.
- Use “Columns” and “Cover” blocks to create content that was not possible with Classic Editor.
12. Stop Using Page Builder Plugins
Most people who hate Gutenberg use a custom page builder plugin like Visual Composer, Elementor, Spectra, or SiteOrigin page builder. Though these plugins are useful, content created with these page builder plugins will work only when the plugin is active on your site. The moment you disable the plugin, your content will become unreadable in the frontend and it is a daunting task to migrate the content out of these page builder plugins.
Therefore, we strongly recommend not using custom plugin for building hundreds of posts. You can use custom plugins for building only few pages (like front-page, contact page, etc.) that can be easily updated when switching the plugin. Otherwise, you can still create decent page layouts using Gutenberg blocks and patterns. Good thing is that content created with Gutenberg does not need any update when switching your theme or plugin.
Conclusion
If you are not convinced or habituated with old Classic Editor, then Gutenberg also offer a “Classic” block. We recommend stop using a page builder and turn your focus on using Gutenberg as your default editor. This will help you to get familiar with new changes that will come with future WordPress upgrades.
