Introduction to Gutenberg - The WordPress Content Editor

Written by WordPress Expert

March 8, 2022
Introduction to Gutenberg -  The WordPress Content Editor

For a long time, WordPress used one type of content editor, that used a What You See is What You Get (WYSIWYG) visual editor. However, with the popularity of page builders that offer a truer WYSIWYG experience, WordPress came up with the block editor, also known as Gutenberg. In this article, you’ll learn a bit about Gutenberg, some pros and cons, as well as a couple basics on how to use it when creating content.

What is the Gutenberg Block editor?


Gutenberg Block editor

Gutenberg, is known as the default "WordPress block editor" that was introduced in WordPress version 5.0, on December 6, 2018. Matt Mullenweg stated at the 2018 State of the Word, that Gutenberg was a truer WYISWYG editor, which allows you see exactly how your page or post will look when published.

The Gutenberg content block editor was not only a way to compete with page builders, both in WordPress and third party services, but also to improve creating content for the end-user.

Wordpress Classic Editor

The old content editor, known as Classic editor, has a simpler visual editor that doesn't always show the user how their published pages and posts would look. The Classic editor has been around since the beginning of WordPress, and even was a part of b2/cafelog, the blog platform that WordPress had been forked from.

blog platform in WordPress

If you're reading this article, and prefer to use the Classic editor over Gutenberg, you can use the Classic editor plugin.

The big difference between the Gutenberg WordPress editor and the previous Classic editor, is not just in the overall design, but due to approaching content creation similar to page builder plugins, which uses a block-based method.

This means that when using the Gutenberg editor, each and every element is a block, from paragraphs, to images, to buttons, to heading, to blockquotes, and more. This allows you to customize each individual area. Awesomesauce, right?

Additionally, with this block-based content creation, even developers can create custom blocks, which can do things like even hold shortcodes for forms or specific plugins to function.

Paragraph Block in Gutenberg

In order to use Gutenberg, you click in the content editor, select what type of content block you want to use, and then repeat for each content block you want to add. If you need to move content around, you can use your mouse to pick up the content block, and then drag and drop it in the area you need it to be.

Other than adding normal content blocks like paragraphs, headings, and images, you can even build layouts with it! In WordPress version 5.9, which was released January 25, 2022, full site editing was rolled out, which means Gutenberg can be used on the front end of the site when you need to make on the fly edits.

Gutenberg Editor Versus Classic Editor and Page Builder Plugins - Pros and Cons


Gutenberg, Classic Editor, and page builder plugins all have their pros and cons. Below are a list of pros and cons for all three, and then why Gutenberg is the better choice of them all.

Gutenberg Editor Pros and Cons


Pros

Already built into WordPress.
Allows more control over each content block.
More visual look into what content you’re creating.
Cons

Not as web accessible for users who have physical issues or eye ailments.
May be a bit bothersome when trying to write longer textual content.

Gutenberg Editor Pros


  • Already built into WordPress.
    There’s no need to install a plugin. Gutenberg is already a part of WordPress core, and the default content editor.

  • Allows more control over each content block.
    Each block comes with special settings that you can customize that particular block. For example, if you’re using a paragraph block, you can customize text, color, size, background color, and even add HTML and CSS styling classes for more design freedom.

  • More visual look into what content you’re creating.
    The content you create in Gutenberg, is nearly how you should see it on the front of your site. Additionally, you can even edit from the front of the site too!

Gutenberg Editor Cons


  • Not as web accessible for users who have physical issues or eye ailments.
    While the WordPress community has done a lot in helping WordPress to be more web accessible to all types of users, there’s still a long way to go.

  • May be a bit bothersome when trying to write longer textual content.
    If you’re writing long form content directly in Gutenberg, it may be annoying to keep opening a new paragraph block. Otherwise, the format may not work well when you’re trying to create paragraphs and forget to create a new paragraph block. It might be best to type your content in Notepad or Google Docs, or MS Word, and then paste your progress into the Gutenberg editor. This method will quickly add those paragraph blocks.

Classic Editor Pros and Cons


Pros

Has a familiar TinyMCE editor that basic users have already tried with 3rd party email services.
Have to use plugins to add extra types of content.
Cons

To embed content, you either use embed code or shortcodes.

Classic Editor Pros


  • Has a familiar TinyMCE editor that basic users have already tried with 3rd party email services.
    For years, WordPress used a content editor that seemed similar to how people use Yahoo! Mail, Gmail, and other third-party email services. This allows users to quickly learn how to use WordPress.

  • Have to use plugins to add extra types of content.
    WordPress comes with some basic types of content editing using the TinyMCE options. In order to extend those, you either need to switch to the text editor and add HTML or CSS, or add a plugin to add more content editor tools. Some of these tools could conflict with other plugins or your theme.

Classic Editor Cons


  • To embed content, you either use embed code or shortcodes.
    While you can embed content in Gutenberg, using a block, you paste code directly into the WordPress editor, and often, you have to switch to the text editor tab, so parts of the embed code’s HTML or shortcode aren’t stripped out.

Page Builder Plugin Pros and Cons


Pros

Most page builders work with WordPress and Gutenberg.
Page builders offer more layout options.
Cons

Not built into WordPress.
Some page builders may slow down your site.
If you’re changing themes, your page builder may or may not be compatible with the new theme.

Page Builder Plugin Pros


  • Most page builders work with WordPress and Gutenberg.
    If you have some pages that need specific design features that only a page builder like Elementor or SiteOrigin can offer, then you can choose to use that on some pages and just Gutenberg on the others.

  • Page builders offer more layout options.
    If you need layout options that your theme doesn’t offer, some page builders have some pre-built templates to help you with that.

Page Builder Plugin Cons


  • Not built into WordPress.
    Page builders are usually plugins or built into some themes. You may have to search and try out several, whereas Gutenberg already comes with WordPress.

  • Some page builders may slow down your site.
    Some page builders, when you use a lot of elements on a single page or post, can slow down your site.

  • If you’re changing themes, your page builder may or may not be compatible with the new theme.
    Page builder compatibility is not always guaranteed when you want to change themes. With Gutenberg, everything carries over. With page builder plugins, you may have to re-tweak each element to fit in with your new theme. Additionally, if you switch to another page builder you risk having to rebuild your pages from scratch.

Why the Gutenberg editor is better than Classic Editor and Page builder plugins


Gutenberg has only been around for a couple years, and it’s the reason why WordPress is the #1 CMS and has reached over 65.3% market share. With 3rd party CMS services like Wix and SquareSpace, that have built-in full site editing page builders, WordPress has met the demands of what users are wanting.

Most users don’t need a fancy page builder plugin, and don’t understand how to optimize their WordPress website for site speed. They need something they can easily create content, and see what they are doing, as they build their site. They also need something that requires next to nil on code skills.

Gutenberg editor Plugin

With Gutenberg, you don’t have to struggle to search for a page builder plugin, and with content block add-on plugins like Gutenberg Blocks, you can add a lot of dynamic designed content to each page and post.

How to Use the Gutenberg WordPress Block Editor


Some of the most important things to learn, when using the Gutenberg WordPress block editor, are adding images and paragraphs. Below are some walkthroughs for both.

Adding Images

To add an image, follow these steps.

  • Step 1. Create a new post under the Posts section in your WordPress Admin area.

  • Step 2. Fill in your post or page title, and then click the box that has the plus sign in it. This will allow you to choose which content block to use.

Adding new block in Gutenberg

Step 3. Choose what content block you want to use. In the case of this article, we’ll try the image block.

Adding Image block in Gutenberg

Step 4. Upload an image or select an image from your WordPress media library.

Add image from WordPress media library

Step 5. Once the image is uploaded and you can see it, customize on how you want your image to display.

Customizing Image

You can add text over the image, edit, crop, link it to a page or another post, align or resize. You can also add a caption to your image and even customize the text.

BONUS: Oh, and you can even add a duotone overlay to each image to make it pop.

add a duotone overlay
duotone overlay

Adding Paragraphs

To add a paragraph, follow these steps:

Step 1. Click the little box in gray, that has a plus sign, and then select Paragraph.

Adding Paragraph in Gutenberg

Step 2. Add and customize your text using the little bar that has icons on it.With these, you can add bold text, links, and much more.

customizing text

BONUS: If you need more settings for the paragraph, there’s an option on the bar to access that. It will open a small window to the right of the editor. For this article, I’ve chosen to add a yellow background to the text paragraph.

show more settings for the paragraph
Adding Paragraphs in Gutenberg

Go ahead and check these blocks out, and play with them some. You’ll probably have some fun while trying it out.

In Summary


Whether you’re still using Classic Editor or a page builder, and you’re contemplating on switching to Gutenberg, you can either create a fresh WordPress site to play around, or use the little Gutenberg playground to get familiar with the block editor. Take it for a spin on one of our Managed WordPress hosting plans here at Verpex, and let us know if you like it.

Frequently Asked Questions

How do I produce high-quality content for my blog?

To create amazing content for your fitness blog, you will need to do proper research and take your time. Write fewer posts, but make sure that the ones you’ve written stand out.

Why choose WordPress hosting?

WordPress is so popular because it allows people to create websites with total customization. With hundreds of apps available for one-click installations, creating something that’s eye-catching and unique is much easier with a CMS like WordPress .

Why choose Verpex for WordPress?

As the leading CMS out there, we’ve made it our mission to offer the most comprehensive and streamlined WordPress solutions on the market. Backed by a responsive customer care team and reliable site enhancement tools, we ensure our users get the full WordPress value and support for a reasonable price.

Is a website on WordPress safe?

Websites on WordPress are safe, however to avoid hacking keep your website up to date.

Jivo Live Chat