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.

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.

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.

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.

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, 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.

• 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!

• 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.

• 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.

• 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.

• 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.

• 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.

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.

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.

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.

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

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

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

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.

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.

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.

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.

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

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 hosting plans for WordPress here at Verpex, and let us know if you like it.