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.

Pro Tip

While the new block editor comes pre-installed in WordPress 5.0 and higher, users with older versions of WordPress can also use the block editor by installing the Gutenberg plugin. However, we highly recommend updating the core WordPress software to the latest version.

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.

The WordPress Gutenberg interface.

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.

Settings of the Disable Gutenberg plugin

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’);
  1. 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.

Code Snippets plugin interface

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 Create a New Block

The first step when adding a post is to create 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 create a new block:

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

The Block Inserter icon on the WordPress block editor

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

Quote block on the WordPress block editor

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 create a new paragraph block.

The plus icon to add more blocks on Gutenberg's interface

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.

The most used blocks on the WordPress editor

How to Customize Blocks

You can 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.

Button block on the WordPress block editor

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.

The Settings button on the top-right corner of the editor

4. On the Block settings, you can style the button using Fill or Outline.

Button styles on the Gutenberg editor

5. You can also adjust the Width Settings, which range from 25% to 100%.

Button width settings on the block editor

6. In the Color section, it’s possible to change the color scheme of the button’s text and background.

utton's background color

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

Button typography settings

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

Border options for the button block

9. At the bottom of the Sidebar, you’ll find the Advanced section for adding Link rel, HTML anchor, and Additional CSS class(es).

The Advanced settings on the WordPress block editor

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.

Heading block on Gutenberg

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

Heading customization options

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

Paragraph block on the Gutenberg editor

5. This is what it will look like:

The paragraph content displayed on WordPress

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.

The Media blocks section on Gutenberg

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

Image block on the WordPress Gutenberg editor

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.

The image uploaded to WordPress

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

The Settings Sidebar panel on WordPress Gutenberg.

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.

The drag button on WordPress Gutenberg.

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

The up and down arrows to move blocks on the page

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.

YouTube block on the WordPress editor

4. Paste the video URL and click Embed.

Video URL on the YouTube block

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

The YouTube video is successfully embedded on WordPress

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.

Add to Reusable blocks option on the WordPress editor

3. Name the block and select Save.

Create Reusable block window

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

The reusable block is successfully created on WordPress

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

Block search options, highlighting Reusable

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

An alternative way to find a reusable 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 ShortcutsFunctions
Shift + Alt + HDisplays all the keyboard shortcuts.
Ctrl + Shift + Alt + MSwitches between the visual editor and the code editor.
Ctrl + Shift + Alt + FToggles the fullscreen mode.
Ctrl + Shift + ,Shows or hides the Settings Sidebar panel.
Ctrl + SSaves changes.
Shift + Alt + OOpens the Block List View.
Ctrl + ZUndo the last changes.
Ctrl + Shift + ZRedo the last undo.
Ctrl + ASelects all text while typing. Press it again to select all blocks.
EscClears a selection.
Ctrl + Shift + DDuplicates the selected blocks.
Shift + Alt + ZRemoves the selected blocks.
Ctrl + Alt + TInserts a new block before the selected blocks.
Ctrl + Alt + YInserts a new block after the selected blocks.
del or backspaceDeletes the selected texts.
Ctrl + Shift + Alt + TMoves the selected blocks up.
Ctrl + Shift + Alt + YMoves the selected blocks down.
/Changes the block type after adding a paragraph.
Ctrl +BBolds the selected text.
Ctrl + IItalicizes the selected text.
Ctrl + KConverts the selected text into a link.
Ctrl + Shift + KRemoves a link.
[[Inserts a link to a post or page.
Ctrl + UUnderlines the selected text.
Ctrl + ` or Shift + Alt + NNavigates to the next part of the editor.
Ctrl + Shift + ` or Shift + Alt + PNavigates to the previous part of the editor.
Alt + F10Navigates 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.

The List View option on Gutenberg

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.

WordPress Gutenberg FAQ

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

Do I Have to Use the Gutenberg Editor?

Essentially, Gutenberg, the default WordPress editor, does what the classic editor used to, but with an intuitive and feature-rich interface. If you want to stick with the previous version, you can use a plugin like Classic Editor. It will disable the block editor and give you the old interface.

Is Gutenberg for WordPress Free?

Since Gutenberg is part of the WordPress core software, it is a free feature that comes pre-installed in WordPress 5.0 and higher. If you still use the CMS’ older versions, you can either upgrade to the latest version or install the Gutenberg Editor plugin.

Do I Need Gutenberg if I Have Elementor?

Yes. While both act mainly as page builders, their usage is different – Gutenberg’s focus is on content creation, while Elementor’s is on the site’s design. You can also embed Elementor blocks into any page using the block editor.

Is Gutenberg Good for SEO?

Yes, the block editor improves the overall performance of your website, thus helping it rank higher on search engine results pages (SERPs). Since its launch, Gutenberg’s updates have included code minification, optimization, and other improvements to speed up the page loading time.

Author
The author

Leonardus N.

Leo is a WordPress fanatic and contributor. He likes keeping up with the latest WordPress news and updates, and sharing his knowledge to help people build successful websites. When he's not working, he contributes to WordPress documentation team and pampers his dogs.

Author
The Co-author

Noviantika G.

Noviantika is a Digital Content Writer at Hostinger. Passionate in web hosting, WordPress, and SEO, she's driven to share her knowledge with the world through her writing. During her free time, Noviantika likes to hop on a plane and discover places.