How to Operate the WordPress Gutenberg Block Editor
Using Gutenberg might seem difficult at first because it’s very different from the previous Classic Editor. But don’t worry, here I will show you how to operate the WordPress Gutenberg block editor, which offers many cool and easy-to-use features.
After reading this article, you’ll feel ready to start working with Gutenberg. Of course, you’ll need to use the new Block Editor a few times before you can master it. Let’s dive in and explore!
A Brief Introduction to Gutenberg Block Editor
WordPress Gutenberg was launched back in 2018 with the goal of offering a better content editing experience for users.
The launch of Gutenberg was aimed at making it easier for users to manage the appearance of their website, as WordPress created a set of tools that allow users to build an entire website using blocks.
The most significant difference between Gutenberg and the previous Classic Editor is Gutenberg’s block approach to creating content. You can read and learn about the comparison between Gutenberg Editor and Classic WordPress Editor here.
If you’ve ever used a page builder like Divi or Elementor, you’re probably familiar with modules or blocks. They help you create layouts that might seem complicated to be easy on your posts and pages.
So even though it might be hard to use at first, Gutenberg is very convenient. Before you learn how to use it, let’s take a brief overview of the editor layout so you understand how to navigate it.
The Gutenberg editor can be divided into four sections: content, sidebar, topbar, and below the content area.
Content Area
The area at the top of the page is meant to fill in the title. The body of the page is where you store the content. You can insert content or media using blocks, and blocks can be added by using the add (+) button.
Sidebar
The sidebar located on the right side has two tabs – Post and Block. You can easily navigate between these two tabs, depending on your needs.
The Post tab allows you to configure post settings like publication date, permalink structure, featured image, categories, tags, etc.
The Block tab allows you to configure your chosen block. For example, if you’re using an image block to insert an image into your post, the Block tab lets you set the alt tags, adjust dimensions, and add CSS classes to the image.
Toolbar
Using the top toolbar, you can insert blocks into the content area. Additionally, you can undo or redo, edit the article code, toggle between the visual editor and preview mode, publish drafts, and save your activity.
Below Content Area
In the area below the content, you can view the plugins installed on your site. Of course, not all plugins appear here, only the ones necessary to optimize your post or page, such as Yoast and Rank Math, which help make your posts and pages SEO-friendly.
In short, that’s the breakdown of the areas in the Gutenberg editor. Now, let’s take a look at some tips and tricks that you can apply when using the editor.
Tips and Tricks to Speed Up Your Workflow
The tips and tricks explained below will help you as a reference when you start using the Gutenberg editor. Let’s dive right into them.
1. Use Keyboard Shortcuts
Shortcuts are meant to speed up your workflow, and there are many shortcuts you can use in Gutenberg. As a start, use “/” (slash) to call a block. You will use this shortcut more often than others.
Here are some shortcuts you can use:
- Delete the selected block – Shift+Alt+Z
- Turn selected text into a link – Ctrl+K
- Remove a link – Ctrl+Shift+K
- Insert H1 – #+Enter
- Create numbered list – 1.
- Create bullet list – *
You can get a full list of shortcuts in your Gutenberg editor. Simply open the editor and press Shift+Alt+H. An easier way to access this option is by clicking the three dots in the top right corner of your screen.
2. Use Free Gutenberg Block Plugins
As mentioned earlier, Gutenberg allows you to use blocks to create visually appealing posts and pages. WordPress offers default blocks like paragraph, quote, heading, image, gallery, audio, file, spacer, shortcode, etc.
Some website owners may require more blocks. For instance, if you want to add a review site, you might need a star rating or review block.
Websites selling products and services might need FAQ blocks and countdown blocks to notify visitors about upcoming sales.
One plugin you can use to solve this problem is FirePlugins, which provides you with a customizable block library for designing better posts and landing pages.
3. Create Reusable Blocks
If you’ve ever used visual editors like Divi and Elementor, you know they allow you to save your designs as templates for future use. Now, something similar can be done with Gutenberg.
All you need to do is select a block and click on the three dots to bring up options. Then choose the option to save the design as a template. You can then add it to the Blocks and make it reusable. This feature is especially useful when creating landing pages.
4. Try Different Writing Modes
The Gutenberg editor lets you use three different writing modes, each with a different purpose. The top toolbar manages the toolbar at the top of the screen and directs it to each block you’re editing.
Focus mode allows you to focus by highlighting the block you’re working on while all other blocks turn gray.
Full-screen mode is the default editor mode. When you open the editor, you see the full screen. Disabling full-screen mode will allow the WordPress menu to appear on the left side of your dashboard.
To access the visual mode, you need to point to the three dots in the top right corner and select your preferred visual mode.
5. Hide Sidebar
As mentioned earlier, full-screen mode allows you to access your editor without distractions from the WordPress menu. But you can take it a step further. Remove the sidebar for the best distraction-free working experience.
It’s very simple, just click the gear icon that appears in the top toolbar, right next to the Publish button.
6. Copy and Paste Content from Anywhere
Copying and pasting in the Classic Editor was a frustrating and annoying experience. When you copied text from Google Docs or Microsoft Word, some HTML code was also copied into the editor.
This made the page unnecessarily heavy. It was also impossible to copy-paste images from documents into the editor. However, the Gutenberg editor has solved this issue and made it all easier.
You can copy and paste content, including media files, into the editor without worrying about extra HTML code. After copying and pasting images, make sure to upload them to your site by clicking the icon in the block toolbar to upload external images.
7. Add Images via Drag and Drop
Gutenberg makes it easy to add images to your posts and pages. You no longer need to go through the entire upload process as you did with the Classic Editor. Simply drag an image file from your desktop or the internet and drop it into your editor.
8. Convert One Block to Another Block
There will be times when you want to switch from one block to another. For example, you might want to change a paragraph into a bullet list or a heading into a paragraph.
To convert one block into another, select the block and then click on the first option that appears in the block toolbar. This will bring up a dropdown menu of blocks that you can convert the selected block into.
However, there are certain limitations when converting blocks. For example, you can’t convert an image block into a paragraph block, and vice versa. Image blocks can be converted into galleries, columns, files, etc., but not into paragraphs or headings.
9. Create Columns Using the Columns Block
If you want to create a complex layout in Gutenberg, use the Columns block. This will insert vertical columns that you can fill with text, headings, videos, or anything you like.
Gutenberg offers five different column types that you can insert into your posts by clicking the block insert option found in the top toolbar of your screen.
10. Rearrange Blocks Using Drag and Drop
You no longer have to copy-paste text and media to move your content around in the editor. Gutenberg has a drag-and-drop feature that you can use to rearrange blocks as needed.
Select the block you want to move. Then, hover your cursor, hold, and drag to start moving the block.
If drag and drop isn’t your preferred method, you can use the up arrow to move the block up and the down arrow to move the block down.
That’s the article on how to operate the WordPress Gutenberg Block Editor that Mangcoding shared. Hopefully, this article will be useful and provide you with new knowledge. If you have any feedback or suggestions, feel free to comment or send them via Email and Mangcoding’s Social Media.