What Is WordPress Gutenberg, How to Use It, and How It Differs From the Classic Editor

Gutenberg is the default WordPress editor introduced in WordPress 5.0. As a replacement for the TinyMCE editor, it offers a different way to create interactive posts and pages.

After the WordPress 5.9 update, Gutenberg became more than just a content editor. It includes all aspects of customization to provide a full site editing (FSE) experience, which means you’ll be able to build and design your entire WordPress site using the editor.

Using a block-based approach, Gutenberg includes every element you typically need to create a web page, such as paragraphs, headings, lists, buttons, widgets, embeds, and columns.

It also provides a better visual representation of the page, making it more like a page builder than the previous WordPress editor.

In this article, we’re going to discuss how Gutenberg works and how it differs from its predecessor. We will also show you how to use the block editor and answer common questions about it.

Gutenberg Editor vs Classic Editor

Although the Gutenberg editor and the classic editor serve the same purpose, there are clear differences between the two:

• Editor interface. The classic editor offers a simple text editor resembling Microsoft Word. On the other hand, the WordPress block editor has a responsive and intuitive interface, where all icons are self-explanatory and easy to reach.
• Content creation. The classic editor provides a blank area for writing posts and pages. In comparison, the Gutenberg WordPress block editor has more features for creating content and managing its visual aspects efficiently.
• Ease of use. The classic editor requires basic HTML knowledge to enjoy all its possibilities. The newer tool doesn’t require technical expertise – simply drag and drop blocks to create pages and posts.
• Features. The classic editor offers basic formatting features for site editing and lacks design flexibility. It is not an ideal option to create media-rich pages or complex layouts. On the other hand, the new WordPress editor includes features such as reusable blocks for creating templates.

How the Gutenberg Editor Works

The Gutenberg WordPress editor uses the concept of individual content blocks to add and edit various elements in posts and pages.

Each of them is a standalone component that you can customize and manipulate, providing in-depth control and flexibility. For example, you can set a different background color or width settings for an entire block without affecting other elements.

To find all blocks, click the Block Inserter + icon. It lists them in a collapsible panel according to their structure. Each of them has a different configuration and design tools.

For example, the paragraph block has options for changing its color and typography. On the other hand, the image block has tools to add alt text and adjust the image dimensions.

With WordPress’ latest updates, the default content editor offers many new features to support full site editing, such as:

• Site editor. Edit and navigate between templates, their elements, and styling options.
• Template editing mode. It enables you to directly edit, change, and create a post or page’s template.
• Block theme. Build WordPress themes using FSE-compatible blocks.
• Styling. It lets you modify styles in three levels – global modifications, local blocks, and theme defaults.
• Theme blocks. Create traditional templates using template tags. The current WordPress editor includes Post Author, Post Comments, Read More, Avatars, and Query Loop blocks.
• Browsing. Navigate between pages, templates, and posts right on the editor.
• Navigation block. Edit the structure and design of a site’s navigation menu.
• Query block. It duplicates WP_Query and allows you to customize it with additional functionalities.

Furthermore, Gutenberg includes block patterns that consist of pre-arranged blocks. They usually contain multiple column layouts, button arrangements, and image compositions.

Developers and experienced WordPress users can build their own WordPress blocks and block patterns and share them with others via plugins.

How to Disable the Gutenberg Editor

If you find it hard to adjust to the new block editor, WordPress gives you some options to disable it completely – by installing a plugin or editing the functions.php file.

Using a plugin like Classic Editor is a quick solution, as it will automatically disable Gutenberg upon activation.

However, to deactivate Gutenberg for specific post types or user roles only, we recommend using a plugin like Disable Gutenberg. By default, the plugin will deactivate Gutenberg entirely on your WordPress site. However, unchecking the Complete Disable option on the plugin settings will allow you to disable it only for certain roles, posts, templates, or post IDs.

Alternatively, add a code snippet to your functions.php file. Here’s how to do it via hPanel:

1. Using the File Manager, open the public_html folder.
2. Select wp-content -> themes.
3. Click on your active theme’s folder and select the functions.php file.
4. Add the following code to the file, before its last line:

add_filter(‘use_block_editor_for_post’, ’__return_false’);

5. Save and close the file. Now you can use the classic editor to create posts.

If you are not comfortable editing your WordPress files, you can use the Code Snippets plugin to add the code.

1. After installing and activating the plugin, go to Snippets -> Add New.
2. Name the snippet and paste the code above.

Then, choose Only run in administration area, and click Save Changes and Activate.

Keep in mind that disabling the block editor is a temporary solution. Eventually, Gutenberg will be the standard for editing in WordPress.

How to Use the WordPress Gutenberg Block Editor

Building and managing a WordPress website using the Gutenberg editor is quite easy. To help you get started with full site editing, the next sections will provide guides on how to create and edit blocks.

How to Add a New Block

The first step when adding a post is to add a new block, which is relatively easy using the Gutenberg WordPress editor.

Keep in mind that the first block of every page or post is the title. Simply move your cursor below it and follow these steps to add a new block:

1. Select the Block Inserter+ icon on the top toolbar.

2. Select your desired block. In this example, we’ll choose Quote.

3. To add more blocks underneath the quote, simply click the + icon, as shown below. Keep in mind that whenever you hit Enter, the WordPress block editor will automatically add a new paragraph block.

4. You’ll see a panel showing the frequently used blocks. To search for a specific one, use the search bar or click Browse all.

How to Customize Blocks

Adjust all blocks inside the WordPress block editor to fit your preference and improve the visual design of your website.

Here’s how to do it:

1. Click the + icon on the top toolbar to open the Block Inserter interface.

2. Choose a block. In this example, we’ll select the Buttons block.

3. Once the button is added, the block settings will appear. Alternatively, click Settings on the top-right corner of the editor to load the Sidebar panel.

4. On the Block settings, there are two different tabs. Under the settings tab, you can adjust the Width Settings, which range from 25% to 100%.

5. Under that, you’ll find the Advanced section for adding Link rel, HTML anchor, and Additional CSS class(es).

6. You can change the button’s appearance under the Styles tab. Adjust the Fill or Outline in the Color section. It’s possible to change the color scheme of the button’s text and background.

7. On the Typography settings, you can determine the button size by using either the default options or custom sizes.

8. On the Border settings, adjust the button’s border by toggling the dot.

How to Customize Blocks via the Global Styles Settings

The above steps allow you to change the appearance of individual elements. However, there is a way to apply changes to the entire site via the Global Styles Settings. To do this, navigate to Appearance → Editor. This will take you to the Site editor interface.

Next, choose a page template to edit, such as the homepage or a single post page. Once you pick a template, click on the Styles button in the top right corner.

To change the styles of specific blocks for the whole site, click on Blocks, and choose the block you want to adjust.

You can change the block’s visual elements, including colors, typography, and border style. Keep in mind that some blocks will have more limited customizable elements.

How to Add Headings and Text

The next step when building a site page is adding headings and text. Headings define the content’s importance levels and how ideas are interconnected.

Follow these instructions to add headings and text:

1. Select the + icon in the top toolbar. Alternatively, choose the + icon inside the content interface.

2. The list of available WordPress blocks will appear. Click Heading.

3. You can customize its appearance using the block toolbar.

4. To add other text elements, choose an option from the Text section within the available blocks. We’ll choose Paragraph.

5. This is what it will look like:

How to Add Images and Media

The block editor provides two ways to add images and media files to your site – via the Block Inserter or the + icon inside the content interface.

Here’s how to add images and media using the first option:

1. Click the Block Inserter button on the top toolbar.

2. The list of available blocks will appear. We’ll choose the image block.

3. The three uploading options will appear – upload, media library, and insert from URL.

4. Choosing the Upload option, for example, you’ll have to select an image file and click Open. Alternatively, drag and drop multiple image files at once.

5. Adjust the image by using the Settings Sidebar panel on the right side of the Gutenberg block editor.

How to Arrange Blocks

Gutenberg provides two ways to rearrange blocks using the floating toolbar. Using the six dots icon, you can select multiple blocks and drag and drop them anywhere.

On the other hand, the up and down arrows allow you to move a block up or down.

How to Embed Media

When it comes to embedding content from other platforms, the WordPress block editor includes a separate section for embedding media files and provides many sources to choose from.

Here’s how to do it:

1. Click the + icon on the top toolbar.

2. Scroll down to find the Embeds section.

3. Select the media you want to add. In this example, we’ll embed a YouTube video into our content.

4. Paste the video URL and click Embed.

5. The video will be displayed on your post or page.

How to Create Reusable Blocks

Reusable blocks are a collection of content snippets that you can use anywhere on your site, helping you work more efficiently.

They work like templates so, if you update one, those changes will apply to all pages and posts that use the block.

Follow these steps to create reusable blocks:

1. Choose a section that you want to save as a reusable block.

2. Select the three-dots icon from the block’s toolbar and click Add to Reusable blocks.

3. Name the block and select Save.

4. Now you can place the block anywhere on the site.

To use it, search it from the list of available blocks by clicking the + icon.

Alternatively, type “/” (forward slash)and the name of the block.

How to Use Gutenberg Keyboard Shortcuts

The WordPress block editor has many keyboard shortcuts to help you work efficiently and navigate around its interface smoothly.

Here is the list of all the Gutenberg block editor keyboard shortcuts and their functions:

Keyboard Shortcuts	Functions
Shift + Alt + H	Displays all the keyboard shortcuts.
Ctrl + Shift + Alt + M	Switches between the visual editor and the code editor.
Ctrl + Shift + Alt + F	Toggles the fullscreen mode.
Ctrl + Shift + ,	Shows or hides the Settings Sidebar panel.
Ctrl + S	Saves changes.
Shift + Alt + O	Opens the Block List View.
Ctrl + Z	Undo the last changes.
Ctrl + Shift + Z	Redo the last undo.
Ctrl + A	Selects all text while typing. Press it again to select all blocks.
Esc	Clears a selection.
Ctrl + Shift + D	Duplicates the selected blocks.
Shift + Alt + Z	Removes the selected blocks.
Ctrl + Alt + T	Inserts a new block before the selected blocks.
Ctrl + Alt + Y	Inserts a new block after the selected blocks.
del or backspace	Deletes the selected texts.
Ctrl + Shift + Alt + T	Moves the selected blocks up.
Ctrl + Shift + Alt + Y	Moves the selected blocks down.
/	Changes the block type after adding a paragraph.
Ctrl +B	Bolds the selected text.
Ctrl + I	Italicizes the selected text.
Ctrl + K	Converts the selected text into a link.
Ctrl + Shift + K	Removes a link.
[[	Inserts a link to a post or page.
Ctrl + U	Underlines the selected text.
Ctrl + ` or Shift + Alt + N	Navigates to the next part of the editor.
Ctrl + Shift + ` or Shift + Alt + P	Navigates to the previous part of the editor.
Alt + F10	Navigates to the nearest toolbar.

If you use Mac, simply switch Ctrl with Command (⌘).

You can also find this list by clicking on the three-dots icon on the top-right corner of the WordPress block editor and selecting Keyboard shortcuts.

How to Use the Block List View

You can click the Block Inserter icon to search for other blocks. However, if you’re using nested blocks, finding a specific one can be challenging.

Also, when you have many different blocks on your WordPress block editor, it will be difficult to browse through all of them.

To simplify this process, the Gutenberg WordPress editor has a block list view option that lets you see every single block in the design, including indented nested blocks. Simply click the List View button on the top toolbar.

You can select or expand a block by clicking on the list. At the same time, the editor will highlight the block if you hover over it.

In the example above, the feature lists:

• A heading block on top of the post.
• The primary parent columns block.
• Nested blocks inside each column.
• Nested reusable blocks on every column block.
• Nested paragraph blocks inside each reusable block.
• A paragraph block at the bottom of the post.

Blocks vs Widgets

Widgets are one of the oldest WordPress features. Initially, they were created to easily build and manage a site’s contents without coding.

However, legacy widgets have limited formatting options and involve lots of manual work since they were created with the classic widgets editor. Often, they even require additional plugins for advanced features.

Since WordPress 5.8, the block-based widgets editor has replaced the classic option. The newer feature comes with many improvements, allowing users to customize their pages further, even in areas where it used to provide less control.

Moreover, it has many pre-installed WordPress block-based widgets that you can use without additional plugins or code, such as custom HTML, calendar, page list, latest posts, social icons, and tag cloud.

Conclusion

The Gutenberg editor is WordPress’ default content editor, allowing users to create posts and pages. It has default blocks that contain every element you may need to create your site, such as paragraphs, headings, images, embeds, widgets, and columns.

Furthermore, the WordPress block editor provides many improvements compared to its previous one. It comes with a user-friendly interface, easy-to-use tools, and additional features that support full site editing (FSE).

In addition, you can add and customize new blocks, headers, and text, insert images and media, arrange multiple blocks, and embed third-party content.

We hope this article has helped you understand the Gutenberg editor, its usage, and how it differs from the classic tool. If you have any questions or suggestions, leave them in the comments below. Also, read our WordPress tutorial for beginners if you have any general questions regarding your website management.

WordPress Gutenberg FAQ

In this section, we will answer common questions about the Gutenberg editor.