Brand new to WordPress as a blogger, but confused between the WordPress classic block editor vs the latest version of the Gutenberg editor? Can’t decide whether to use the WordPress Classic Editor or Gutenberg?

As the majority of the WordPress community has already switched to Gutenberg. Let us help you get a better understanding of Gutenberg and why you should consider switching. 

In this comprehensive tutorial on how to use the WordPress block editor, you’ll learn why Gutenberg is superior to the classic WordPress editor. 

Since its inception back in 2018, with the release of WordPress 5.0’s major update, Gutenberg has become the default content editor for WordPress. With the option to retain the classic editor for those who are unwilling to switch over. 

The default WordPress Gutenberg editor uses a radically different approach to content production and publication methods. With the use of blocks to produce WordPress content in a more pixel-perfect content structure. 

So without further ado, we’ll be going through the ins and outs of the latest version of Gutenberg. How to make a WordPress website using the block editor, & reasons behind its superiority over the classic editor. 

Let’s dive right into it. 

What is Gutenberg?

The WordPress block editor is known as the “WordPress Gutenberg project,”. And it replaced the WordPress TinyMCE editor as the default WordPress editor with the release of WordPress version 5.0.

While “Gutenberg” was the working name for the editor, it is now simply referred to as “the WordPress block editor” or “the WordPress editor” since it is built into the core WordPress CMS. 

The Gutenberg WordPress program was designed to overcome the issues its users faced while working with the WordPress TinyMCE editor. And over the years, with every update and revision, it has come to be a staple of the WordPress Content Management System.

Block Editor (Gutenberg) versus Classic Editor: What’s the Difference?

Before we get into a detailed analysis of WordPress Gutenberg, we should have an understanding of the differences between the WordPress classic editor vs block editor. 

This is how the classic editor in WordPress is structured: 

And

This is how the newer block editor in WordPress is structured: 

Have you noticed the differences between both? Most notably, the visual differences are noteworthy. 

While the classic editor was good for its time, allowing users to structure content minimally.

Especially when the content gets published, the visual clarity, content structure, pixel spacing, image & text alignment are just a few things that the classic editor was not very good at fixing without coding. 

The Gutenberg WordPress Editor, on the other hand, works by allowing users to manipulate WP blocks with structured calculations through the use of multiple Gutenberg widgets.

Each widget allows users to structure their content in various styles to create stunning blog designs that will surely increase website viewership and overall aesthetics. 

Is Gutenberg a WordPress plugin?

In the beginning, Gutenberg was its own plugin, which is still being actively developed today. Before Gutenberg was integrated into WordPress, it was initially developed as a stand-alone plugin that users could test. To determine how it would affect the way in which they compose and edit content within WordPress.

Users were also able to provide feedback on the functionality of the plugin.

And a lot of WordPress user-generated feedback and suggestions have made their way into every version of its release. 

Is Gutenberg a Page Builder? How Would You Define Gutenberg?

Until you try it, you won’t know if it’s the right one for you, just like you don’t know if a shoe fits all sizes. Although the Gutenberg plugin doesn’t claim to be a fully-fledged page builder plugin like Elementor or Beaver page builder plugins. 

Nevertheless, the WordPress and Gutenberg development teams have outlined their future goals for establishing Gutenberg as a one-stop solution for WordPress website customization.

We can clearly see the results of their current releases and feature updates, with more study material on their roadmap for Gutenberg press release this year. 

From the editorial screen, we can also see what this WP editor is offering and experience a taste of all the currently available Gutenberg widgets and modules. Especially the WooCommerce Gutenberg modules. 

Is Gutenberg Replacing Popular WordPress Page Builders? Will there be an Elementor vs Gutenberg competition? 

Simply put, No! Gutenberg will not be replacing the popular WordPress website page builders any time soon. There is still a long period of development time before the WordPress block editor catches up to any of the best WordPress page builders. 

But that doesn’t mean there will be no competition in the future. As the current roadmap shows Gutenberg will surely catch up to the likes of Elementor, Beaver Builder, Visual Composer, and so on.

So, the WP community should brace itself for head-on feature wars like Elementor vs Gutenberg.

But surely that will be stiff competition since Elementor is constantly updating itself with new features. And the development community is also hard at work, creating extension plugins for Elementor such as the ElementsReady Addons for Elementor.

Exciting times are ahead for all WordPress users. 

Are You Required to Use the Block Editor? 

No, although by default the newer block editor is baked right into the base WordPress CMS software. However, as we know, WordPress provides its users with the freedom to opt-in and out of any of its default plugin options. 

The same goes for the Gutenberg block editor. If you’re comfortable with using the classic WordPress editor, you have the option of reverting back to it. 

To do so, just simply head over to the WordPress Settings page and click on the Writing menu. And from the Default editor for all users option, merely toggle to your preferred WP editor screen. 

When you’re done, make sure to hit Save Changes. 

Create Your First Blog Entry Using the Gutenberg Block Editor

Before we start, let’s talk about the WordPress block editor interface and what it offers. 

As shown in the image, these are the key functions that you get right after accessing the editorial screen: 

1. Toggle Block Inserter – The button allows users to access the Gutenberg widget panel. From here, users can drag and drop any Gutenberg block right into their content body. 

2. Undo/Redo Buttons – The buttons let users revert back and forth between changes made. 

3. List View – View a list of your header tags for quick navigation. 

4. Post – The Post tab sidebar menu allows users to configure the document settings. Covering important settings items such as content categories & tags, featured images, permalinks, publish status, visibility, etc. 

5. Block – The Block tab sidebar menu allows users to configure each block separately. 

6. Master Controls – From here, you can toggle between the sidebar options, save drafts, preview content on a live template, and publish the produced content. 

7. Canvas – This is where the magic happens. Create content with a structured layout, pixel-perfect spacing, alignment, and so on using the preset block editor widgets. 

8. Add Block – Access Gutenberg’s preset content, widgets, and tools right from this simple quick access button without having to scroll through the Gutenberg library. 

Gutenberg divides its blocks and widgets into different categories and they are: 

• Text – header, paragraph, list, code block, table, etc. 
• Media – media insert blocks for image, audio, files, video cover, etc. 
• Design – insertion blocks for buttons, columns, rows, groups, etc. 
• Widgets – calendar, archive, category list, custom HTML, RSS, page list, etc. 
• Theme – navigation, logo, title, tagline, avatar, post author, etc. 
• Embeds – content embed blocks for YouTube, Vimeo, Twitter, Reddit, etc. 
• WooCommerce – product search, filter, category, review, tags, button, etc. 

Now that we’ve been introduced to the WordPress Block Editor’s interface, let’s start our new blog post: 

Step 01: Create a New Post on WordPress 

Start by creating a new page on WordPress with your blog title. To do so, log into your WordPress website, and click on Blog Posts > Add New. 

Step 02: Add the First Layers of Text Content

Click on the content canvas and write down your content. This first layer of the blog should be an introduction to the subject.

Step 03: Add Image to Gutenberg

With Gutenberg, you can easily add images to any section of your blog using its Image Insert block. To add an image using the block editor, click on the part where you’d like to insert an image.

Click on the + Add Block icon and search for the “Image“ block. Now, from the inserted image block, you can add any existing image from the media library or upload a new one. 

After you’ve inserted your blog content image, you can also add image captions and adjust the image alignment right from the block editor. 

Step 4: Creating Content Structure with Gutenberg 

The Gutenberg editor is a great tool for adding WordPress spacing between blocks since it comes with a Space block. That lets you add spacing blocks of specific sizes from different units of measurement.

It is as simple as dropping the spacing block and adding the correct value from the right-hand side Block menu.

You can do this as a simple content structuring process for your entire blog. 

Step 5: Adding an Outro in WordPress Blog Editor

Done structuring the body of your blog post? Now it’s time to sum it up with an optimal outro for your blog. To do so, first type in your outro and click on the Header option from the popup. 

From here, you can select any header tag that fits your overall content structure between H1 – H6; for us, that is the H2 header tag.

Gutenberg is a free and open-source software program that allows you to create your own text or “text blocks” (blocks of text).

That can be used to create blog posts, newsletters, letters, e-books – whatever you want.

And now that’s done, you can double-check your content and publish it right from the block editor screen, or save it as a draft for a later date. 

Top 10 Gutenberg Tips & Tricks That Will Make Your Life Easier

With the help of these top 10 quick Gutenberg tips and tricks. You can take your content production to another level with the best wp block editor. 

1. Gutenberg Keyboard Shortcuts 

To make your life much easier with the WP Block Editor, you can use any number of keyboard shortcuts in the block editor to accomplish your day-to-day tasks. Here are some of the shortcuts: 

• Toggle between visual & code editors: Ctrl + Shift + Alt + M
• Toggle fullscreen mode: Ctrl + Shift + Alt + F
• Save your changes: Ctrl + S
• Undo last changes: Ctrl + Z
• Redo last undo: Ctrl + Shift + Z
• Selected text bold: Ctrl + B
• Selected text italic: Ctrl + I
• Selected text insert link: Ctrl + K
• Underline the selected text: Ctrl + U

And that’s just the tip of the iceberg. There are plenty more that can be used to speed up your productivity with WordPress media and text blocks. To learn more, you can check out the official Gutenberg documentation. 

2. Markdown syntax

Another handy Gutenberg feature. It involves headers and formatting.

Add “#” and a space before the chosen text to produce an H1 header. “##” and a space may be used for H2 through H6.

Put “>” before a quotation to add it. Put “1.” or “1”) to make a numbered list.

“-” or “*” before text creates a bulleted list without numbers.

3. WordPress Block Manager

If you already have published content with the classic editor but are unhappy with the layout, structure, and how it looks. You can reformat your published content with this block editor without having to write a single line of code.

The editor’s unique drag-and-drop structure is capable of creating optimized content structures for reading/viewing pleasure. 

4. WordPress Media Management

Users can insert media files, images, audio clips, media streams, videos, etc. By using any number of Gutenberg blocks right into the content body. This is a simple and modular process that will not hamper other parts of your content. 

5. Advanced Copy & Paste Function for WordPress 

The advanced copy & paste feature allows users to copy the entire blog contents of Google Docs and paste them directly into the block editor. And the Doc will hold its content structure and will also import all the inserted media from the Google Docs file.

This is a significant time-saving trick that you can apply if you work with Google Docs and retain your default WordPress content structure.

Use an official WordPress Chrome extension for a faster content import process from the Google Docs file. 

6. WordPress Block Editor Column Formats

Utilize any number of pre-included content Gutenberg page templates and content structures to give your content a unique and refreshed look. You can do this for any published content as well. 

7. Switch Back to Classic Editor 

Still, confused between the WordPress classic editor vs Gutenberg? If you’re unsatisfied with the newer editor screen. You can switch back to the classic editor anytime from the WordPress Settings screen. 

8. Website Launch Process

Found issues while conducting a WordPress website launch checklist? No worries with Gutenberg; you can easily identify content issues and reformat them without hampering other content blocks on the same page. 

9. WooCommerce Product Page

If you want to list a few WooCommerce products but don’t want to download a third-party eCommerce plugin. You can do so with the block editor since it comes with a library of WooCommerce blocks and widgets. 

You can also take advantage of a WooCommerce shop builder addon for a smoother customization experience. 

10. WordPress on Page Statistics

This can be an important feature for content-heavy WordPress websites because it lets you view detailed statistical data on your blog page.

Just by clicking on the Details (i) icon, you’ll get a popup window on your WP page that will show how many words have you written, character count, time to read, header count, etc. 

Check out the WordPress Block Editor

The Gutenberg block editor has come a long way since 2018. The block editor will become even more of an essential characteristic of WordPress with the planned shift to full WordPress website editing.

We’ve covered everything from block editor fundamentals to advanced tips and features in this article. We’ve also considered how full WordPress website editing could evolve in the future.

If you aren’t ready to test it yet, you may deactivate Gutenberg and use the classic editor indefinitely. However, Gutenberg will continue to expand, so it’s not something you can ignore forever.

We sincerely hope that you have found this quick WordPress block editor tutorial insightful and that it has helped you expand upon the idea of what Gutenberg is offering to WordPress.

If you still have any questions or concerns, please feel free to reach out to us. And please do consider sharing it with someone who is confused about whether Gutenberg vs Classic Editor is the best choice for their editorial needs.