If you’ve updated your WordPress version in the last five years, you may have already used the Gutenberg editor to make changes to your WordPress website.
Many members of the WordPress community lamented the change from the classic editor to the new editor, but plenty of novices and experts alike have been won over by its functionality.
For the uninitiated, we’ll go over the benefits of the Gutenberg editor, and for those who are already using it, we’ll provide some top tips for improving your WordPress workflow.
What is the Gutenberg Block Editor?
WordPress’s Gutenberg editor (aka, the block editor) is a system for creating, formatting and publishing content on WordPress, the content management system of choice for 43.1% of all websites.
It replaced the original (now called “classic”) editor as the default editor on WordPress in 2018 with the release of WordPress 5.0.
Note that the classic editor is sometimes incorrectly referred to as the TinyMCE editor. In fact, the classic editor is based on TinyMCE, and Gutenberg still uses TinyMCE for editing rich text.
The difference between the classic editor and the WordPress block editor relates — as you might have guessed — to the use of blocks.
While the classic editor looks like a blank canvas text editor, the block editor looks and functions like a drag-and-drop editor.
The block editor’s key components are its inserter (for inserting blocks), content canvas (for editing content) and settings sidebar (for altering block settings).
Various block types are available, the most important of which are text/content blocks (e.g., paragraph blocks and lists). You can also make use of media (e.g., images), design (e.g., buttons), widget (e.g., calendar), theme (e.g., site logo) and embed (e.g., YouTube) blocks.
Benefits of Gutenberg
Gutenberg has many advantages for those willing to ditch the classic editor and embrace modularity. For one, it continues to be regularly updated and expanded, with the key goal of further democratizing web publishing.
At the time of writing, the Classic Editor plugin, which is officially maintained by WordPress, will be supported until 2024, although this probably isn’t a hard deadline.
Beyond future-proofing your site, here are the top reasons why you should make the switch to using the block editor.
Free to use
Like its predecessor, Gutenberg is completely free and open-source — meaning you don’t need a paid subscription to unlock all its functions.
Other page builders also have free versions, but the features of these versions are often limited to encourage you to upgrade to a premium plan.
Beginner friendly
Although many bloggers have resisted the change because they prefer the classic editor, Gutenberg is considered to be user-friendly. No coding skills (e.g., HTML, CSS) are necessary, and the various block types have easy-to-use customization options.
Because of the block format of Gutenberg, you’ll have an easier time implementing complex layouts to make your website stand out from competitors.
If you still prefer the classic editor over Gutenberg, that’s okay. You can use the classic block and toolbar to edit your webpage as you would in the original editor.
Improved editing experience
One of the benefits of the Gutenberg editor is that it offers a better user experience than the classic editor.
For example, you can choose between various viewing options, allowing you to simulate how your website will look on different screen sizes. This makes it so much easier to make a mobile-ready WordPress website.
Plus, Gutenberg comes with more advanced features, like custom blocks and easier embedding. And if that weren’t enough, the menu layout is practical and intuitive.
In 2022, the WordPress team expanded Gutenberg to enable full site editing, meaning you can use this WordPress editor to alter all parts of your website rather than just posts and pages.
Compatible
Since it’s the default editor in WordPress, the block editor shouldn’t have compatibility issues with the majority of website add-ons like WordPress themes and plugins.
That said, once you get the hang of Gutenberg, you shouldn’t need as many themes and plugins compared with the classic editor anyway.
However, some tasks like search engine optimization (SEO) may require a plugin, like Yoast SEO.
Yoast was quick to ensure integration with Gutenberg blocks. Its schema blocks (e.g., FAQ and how-to blocks) capitalize on the capabilities of Gutenberg — these schemas cannot be fully implemented in the classic editor.
Based on these advances, it’s easy to see why we ranked Yoast as the best SEO tool for WordPress in 2023.
Faster page loading
Because it’s a built-in editor on the WordPress dashboard with wide functionality, Gutenberg could cut down on your use of WordPress plugins and themes, too many of which can slow down your website.
To further optimize your website’s speed, use the latest version of WordPress and choose a web host that provides these 10 essential features.
How to improve your workflow efficiency
with the Gutenberg Editor
Still trying to figure out the benefits of the Gutenberg editor?
You’re certainly not alone.
The WordPress plugin library shows that the Classic Editor plugin, which restores the classic editor, has over five million active installations.
While the Gutenberg editor’s ever-expanding functions might not be for everyone, they can make some trickier tasks in WordPress a cakewalk.
After you’ve read our primer on using the Gutenberg block editor, try out these tips to improve your workflow efficiency.
Take advantage of all the different blocks
Among the most widely used blocks are the paragraph and heading blocks. To get going, open your WordPress dashboard and navigate to Posts. Here, you’ll want to click Add New.
If you’re a photographer, you’ll find the gallery block to be useful. And if you interview subject matter experts as part of your blog site, then the quote block could come in handy.
Poetry writers and lyricists can make use of the verse block, while the audio block is great for musicians wanting to share their work online.
Increase efficiency with pre-built templates and patterns
Premade block patterns are useful if you need design inspiration. Instead of starting from a blank canvas, you can save time by choosing from various pattern categories, such as posts, text, gallery, call to action and banners.
Create a reusable block
Custom-made reusable blocks are great for saving time and maintaining a consistent website design. To make a block reusable, navigate to the toolbar above the blocks and select the three-dot settings icon.
Now, click Create reusable block.
Use block editor keyboard shortcuts
If you type forward slash (/), you’ll get the option to use various block types without navigating to the block inserter.
If you click the three vertical dots at the top right corner of the editor, you can scroll down to see all the keyboard shortcuts for Gutenberg.
Alternatively, type Shift+Alt+H if you’re using a Windows machine (or Ctrl+Opt+H on a Mac).
You’ll see a list of shortcuts that can streamline your content editing tasks, such as toggling between the visual editor and code editor.
Find your preferred view type to increase productivity
If you click the three vertical dots on the top right corner of your block editor dashboard, you’ll see various view options, such as Fullscreen and distraction-free modes.
Play around to find out which view is most efficient for you, as this may be task dependent.
Save time by using WordPress shortcodes
A shortcode is a basic WordPress code inside square brackets. Many plugins have their own WordPress shortcodes that you can enter on your webpage to easily add elements like buttons and forms.
These shortcodes are great for saving you time you might otherwise have to spend coding. And they’re customizable, so you can tailor them to match the needs of your business and website.
If you type “/” and enter “shortcode,” you can directly paste your chosen shortcode into the box that appears below.
Drag and drop images from your computer
One of the benefits of Gutenberg is the ability to drag and drop images directly from your machine. When you do this, Gutenberg automatically creates an image block, saving you time that normally might have been spent uploading an image and trying to insert it into the classic editor.
To add an image with Gutenberg, simply drag the picture to the editor and drop it when a horizontal blue line appears. What’s more, if you drag and drop several images at once, Gutenberg will automatically add them to a gallery block.
Lock a block to prevent anyone from changing it
By locking a block, especially on certain high-touch pages or posts, you easily communicate to your team members that a certain block shouldn’t be moved or removed. This ensures block consistency and saves you time redoing changes a team member has made to essential blocks.
Select the three-dot icon above the block you want to lock. Now, select Lock.
After this, you’ll be asked whether you want to simply disable the movement of the block, prevent its removal or both (lock all).
Alter your preferences to clean up your block dashboard
After selecting the three-dot icon in the top right corner, scroll down to Preferences.
You can now change your general, block and panel preferences.
Here, we’ve toggled show most used blocks on so that our frequently used blocks appear first. This saves you time, so you don’t have to scroll through blocks that are irrelevant to your website every time you want to find one in particular.
Make use of list and outline views
After you’ve mastered basic blocks, it’s time to get started using intricate web page structures. To prevent things from getting too complicated, you might want a snapshot of your document that’s easy on the eye.
Here’s where list and outline views come in. Navigate to the three-line icon to the right of the redo button on the top toolbar. You’ll see that the shortcut for this is Shift+Alt+O.
In the outline tab, you can go through the structure of longer blog posts easily and spot heading errors.
Final thoughts: How to improve workflow efficiency using the block editor
Now that you’ve learned how to harness the benefits of Gutenberg to improve your workflow efficiency, you might be thinking about other ways to tweak your website, like diving into its analytics or looking at ways to boost its speed.
At Bluehost, we offer various WordPress hosting plans that give you the tools you need to do just that, along with several other add-ons like a free SSL certificate and daily website backups for the first year.
And now, designing an eye-catching website is even easier with WonderSuite. Each of our WordPress plans comes with a host of additional features that’ll help your website shine.
Contact us today to find out more about how Bluehost’s plans can take your site’s design and functionality to the next level.
