WordPress Editors: Learn the Difference Between Classic, Gutenberg and Page Builders

    Oct 31, 2019, 8:34:00 AM / by Jan Christenson

    Jan Christenson

    As a web developer, I have been using WordPress for a long time. In that time it has changed dramatically. When I was first asked to build a site using WordPress it was known primarily as a blogging platform. It could be extended to do more, but this wasn't commonly done. Fast forward to the present, and now WordPress is a robust (and extensible) content management system (CMS) in its own right. In fact, the WordPress platform, according to recent statistics, is used to host approximately 34% of all websites on the Internet. That's a massive market share for a single platform!

    Along with that growth, the WordPress interface used to edit content has matured and improved. The original WYSIWYG (short for "What You See is What You Get") editor has changed over the years, but now WordPress has added new alternatives for editing the content of your site. But what is a content editor and which is the best option? Let's dig into the details. 

    The Basics

    First off, I'll start with the basics: what is a content editor? The content editor in a CMS is where you enter all of the content displayed on the pages of your site. This is where most of the text, images, and links on the page will be added. Back in the "olde days" of the web, editors had to know HTML to do any kind of formatting of content. Now it's standard that editors have the ability to format content without getting into the nitty gritty of writing HTML.

    As a basic example, if you want text to be displayed in bold you have two options:

    • in the editor: highlight the text and click on the "B" button displayed in your editor's toolbar (similar to your favorite word processing app), or
    • in code view: type in the text to be displayed in bold surrounded by the HTML tags to define it as bold: "<strong>this will be bold</strong>"

    An Old Classic

    As long as I can remember, WordPress has had a WYSIWYG (see above for a definition) editor available. This editor provides a visual interface with a toolbar for formatting the content of pages and posts. This is what the classic editor looks like when editing a blog post:

    editor_classic

    This interface should be familiar to anyone who has used a word processing app, and it hasn't changed much over the years. As you use the toolbars available, the editor will automatically create the HTML code needed to format the content entered. If you're curious about what is going on behind the scenes or want to make adjustments on your own, you can click on the "Text" tab at the top right to see the resulting HTML.

    The New Kid on the Block

    A new contender entered the scenes recently, the Gutenberg editor. As of WordPress version 5.0, the classic editor has been replaced by the Gutenberg editor as the default. If this came as a shock to you, you can revert to the classic editor by installing a plugin.

    With the Gutenberg editor, content is added using "blocks," or self-contained elements for specific types of content. Some of the blocks available in the Gutenberg editor are:

    • Paragraph
    • Image
    • Heading
    • Gallery
    • List
    • Quote

    You add a block to your page, then edit the content within that block. Blocks can be moved around the page to change their display order without having to copy and paste. Just like the classic editor, all of the code to format and organize the content is handled behind the scenes. There are even blocks available to create rows and columns within your content. Gutenberg continues to grow and mature, and new types of content and blocks are being added.

    The major difference between the Gutenberg and the classic editor is the layout. It's much more visual you can see how the content will be displayed within the editor without having to preview the page or post. Another advantage to this editor is that you have more control over the styling of the content within each block. You can also define reusable blocks that you can then use throughout your site for commonly used layout elements.

    Here is an example of the Gutenberg editor showing a title and paragraph block:

    editor_gutenberg

    It's a huge change from the classic editor. It's a great change, and getting better with every WordPress update.

    Unlimited Power! (almost)

    Taking it a step further, there are plugins available for WordPress that add even more extensive tools for defining the layout of content on a page. There are a wide variety of these plugins available with different functionality and interfaces. Here are a few of the most popular:

    • WPBakery Page Builder
    • Divi Builder
    • Beaver Builder
    • Elementor

    Each of these tools has its own strengths and weaknesses, and a full comparison is beyond the scope of this article. In general, they all provide a visual interface to define the layout of your content, often including drag-and-drop capabilities to place content blocks on the page and move them around. These blocks can be organized into rows and columns on the page to create visually appealing content for your site without knowing any code. Another advantage of these page builder plugins is that they can often be extended to include custom blocks specific to your needs that can be added. This may require the help of a developer, though.

    Many of these plugins either have a free version available to download and try out or provide an online demo, so I recommend you give them a try to see if they meet your particular needs before investing your time and money into a specific tool. Another issue to be aware of is that some of these tools will insert code (known as "shortcodes") into your content to define the style and layout of the content, and if you remove the plugin you will need to go back in and remove this extra code. The exceptions from the short list above are Beaver Builder and Elementor if these plugins are removed, it leaves behind clean code. You will still lose some styling, but the content left behind will be free of shortcode clutter.

    The Bottom Line

    Ultimately, the tool you use depends on your specific needs. If you don't need a lot of control over the layout of content within pages and posts, then you may be fine just sticking with the classic editor. Even if you do want more control over the layout, you're in luck the Gutenberg editor is now built into WordPress. This editor will provide better control over content layout, and you still don't need to know how to write HTML. Besides, it's here to stay...you might as well get used to it. If you try to switch between the classic and Gutenberg editor, you may need to do additional work to reorganize your content.

    On the other hand, if you need a great deal of control over how the content of your site is presented, I strongly recommend investing in a full-featured page builder plugin. There are a lot of popular options out there with varying interfaces and features, so check them out and find the plugin that works for you. Many provide free trials so you can check them out before purchasing. An important thing to note is that most page builders will inject code within your content to control layout. If you switch to a different page builder this code will not work, so make sure you select a page builder that meets your needs and stick with it.

    If you have any questions about the topic of this post, please contact us and let us know.

    Topics: WordPress, content editor

    Jan Christenson

    Written by Jan Christenson

    As a self-proclaimed “geek” I was always drawn to the tech stuff. For me, there’s something exciting about combining art and technology and coming up with a working solution. And, if I’ve learned anything in my past 22 years of web development, it’s that there’s always a solution.

    Subscribe to Email Updates