WordPress editors: Classic vs Gutenberg (Block-style)

Preview of WordPress editors: Classic and Gutenberg

WordPress is one of the easiest content-management tools on the web. It offers a user-friendly dashboard where site administrators can easily manage pages, posts and any other content types. The Classic content editor has recently received an update in the form of the new Gutenberg editor, so whether you have basic content needs or required rather sophisticated designs, this editor has you covered.

What is the Classic editor?

The Classic editor preview using the Twenty Twenty theme.
The Classic editor preview using the Twenty Twenty theme.

In WordPress, the original content editor, otherwise known as the Classic editor, is the primary way users can create and edit text-based and image-based content on their sites. It is the original editor that was included in the earliest forms of WordPress. The Classic editor uses WYSIWYG (What You See Is What You Get) system along with the TinyMCE (JavaScript plugin).

Most of the editor options are similar to options in a Word Processor – bold, italic, bulleted list style, etc. The Classic editor allows users to type text into the content editor located in Dashboard and include media as well. The end result is multi-media content for the site.

Note, this editor is no longer available in newer versions of WordPress. If you do not want to use the new Block-style editor introduced in WordPress 5.0 then you can still use the WordPress Classic editor to manage your content. Simply download and install the Classic editor plugin in your WordPress site.

What is the Gutenberg editor?

The Gutenberg editor preview using the Twenty Twenty theme.
The Gutenberg editor preview using the Twenty Twenty theme.

The Gutenberg editor allows users to format text in much the same way as the Classic editor. However, it also allows users to design a page by creating blocks of content. Once the blocks of content are created, users can then organize the blocks into various formats. In doing so, users are able to exert much more control over the look and feel of their web page.

Originally launched as a plugin, the Gutenberg editor has grown in popularity, and now it is the main part of WordPress core. After updating to WordPress 5.0, you will notice that the new default editor for posts and pages has changed from the Classic editor to a new Block-style editor.

What is the difference between them?

Although these editors are designed to provide users multiple capabilities to manage their content on the site, there is a significant difference between them. So, let’s discuss the difference.

The Classic editor

The Classic editor allows users to adjust the style of the text in a variety of ways. For instance, the text can be formatted to appear bold or italicized. Additionally, users can easily set the margin justification. Other adjustments include options to create bulleted or formatted lists.

Changing the font weight using the Classic editor options
Changing the font weight using the Classic editor options

Of course, WordPress is a content manager designed to manage content for the internet. As such, the Classic editor allows users to adjust the HTML tags, which are used for SEO purposes. Once the text is highlight, it is possible to select the needed HTML tag from the drop-down menu.

Although the menu defaults to paragraph style, it is also possible to select H1 and H2 for text to be used as titles and headers, respectively. Moreover, the user can also select H3, H4, and H5 tags that will differentiate how some of the standard text appears.

In terms of formatting, users can insert images and select from several text-wrap options. Overall, the Classic editor creates a single-column page style in which the text, images, and video flow down the page in one long column.

The option to create columns or complex designs does not exist in this editor by default. Instead, the Classic editor enables fast editing and publishing of a page or post. Additionally, in terms of coding, the final published page is very lightweight. As such, it will load extremely fast.

The Gutenberg editor

The Gutenberg editor offers all the same functionality of the Classic editor. However, it is much more versatile in that it offers WordPress users the option to create blocks and columns across the web page. It is like the page builder that comes from WordPress core.

Adding the Columns block using the Gutenberg editor.
Adding the Columns block using the Gutenberg editor.

For each column, users can insert text, images, and video. When users have the content designed to their specifications, they can then select how many columns or blocks they want on the page. With the overall page designed, users can finalize the look by adjusting the width of the columns.

For instance, you can create a weighted page in which the left column, for example, comprises 75 percent of the page width and the right column comprises 25 percent. For greater visual complexity, you can also segment the page into rows.

In terms of design, the Gutenberg editor’s main strength stems from the ability to offset page content by rows. For instance, the first row might contain an image with a caption. This image might be formatted to take up one column and span the entire width of the page.

Below this image, you can insert another row, which can be divided into, say, three columns. Within each of these columns, you can enter more content and format everything as you see fit.

When you are finished, you can then insert another row. This row might contain more columns, or it might contain another image that spans the entire page. Basically, you can continue adding and formatting even more content, making the page as long or as short as you prefer.

Pros and cons of each WordPress editor

Nothing is perfect. Each of these editors has its own advantages and disadvantages. Let’s sum up a few pros and cons of each editor.

The Classic editor pros:

The Classic editor is a lightweight content editor that allows basic formatting. Although it is basic, it does allow you to include various HTML tags, which are necessary for SEO purposes.

This editor might seem limited, but it is designed to be an easy way to format basic text, making it perfect for users who do not need complex designs and formatting. If the goal is to have a quick and easy way to format multi-media content, the Classic editor does a great job.

The Classic editor cons:

The Classic editor is simply not designed for complex page layout.

The Gutenberg editor pros:

For people looking for a more complex layout, Gutenberg does a good job formatting pages in multiple rows and columns. Basically, the Block-style editor gives more freedom to users and WordPress developers to create various layouts on the site.

The final appearance of each page can be designed and adjusted independently of one another, and the overall appearance will be much the same as an old-style newspaper or professional magazine.

The Gutenberg editor cons:

The Gutenberg editor is not as intuitive as the Classic editor yet, especially for users who have used to use the Classic editor a lot. For people new to block formatting, some tutorials on Youtube will provide the required overview.

Additionally, this editor is still in an active development stage. So, many things are not available in the editor core yet but the Block-style editor becomes better and better with each major WordPress release.

Which editor to use?

If your WordPress site requires a minimalist appearance capable of fast loading, the classic editor is the choice. However, if you want more freedom to design your page in a variety of columns and blocks, the Gutenberg editor is the better choice.

Conclusion

Whichever editor you use, you still have the same overall functionality that allows you to edit, revise, and quickly publish pages via your WordPress dashboard. By the way, let us know in the comments which editor you prefer and why.

Posted in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.