WordPress Gutenberg Editor: How it Stacks Against Classic Editor and Page Builders

Building a website can be easy or difficult depending on what you want to achieve. For example, in order to build a custom website, one needs sound knowledge in coding and programming languages such as  HTML, CSS, PHP and JavaScript. On the other hand, one can use popular blogging platforms to launch a simple, personal blog in minutes. 

A majority of people wish to build their website, add content and customize it independently, which has given rise to many advanced softwares such as Content Management Systems. With the growing popular demand, we saw the evolution of many Page Builders such as Elementor, Divi Builder, Thrive Architect and more. 

Being one of the most popular blogging platforms and softwares for self-hosted websites, WordPress reinvented itself by introducing Gutenberg, a brand-new Block editor, replacing the Classic editor altogether. 

What is Gutenberg?

Named after the pioneer of printing press, Johannes Gutenberg, the Gutenberg editor was introduced with the release of WordPress 5.0 update in 2018. 

Unlike the previous Classic editor, Gutenberg editor allows WordPress users to customize their posts and pages and create highly-functional website with an aesthetically pleasing front-end design. 

The Gutenberg editor is essentially a slew of reusable blocks which allows the users to add texts, images and videos with greater flexibility. Moreover, you can also design headings, paragraphs, lists and add social media widgets without touching the backend code. 

Classic Editor vs. Gutenberg Editor 

The Gutenberg Editor is a massive improvement over WordPress’s erstwhile Classic Editor which had many shortcomings.

To begin with, the users had to depend on a wide range of elements such as shortcodes, custom post types, embeds, and widgets when they needed to customize their WordPress site. All that stuff was making life complicated for many, especially those who were not familiar with WordPress platform. 

On the other hand, the Gutenberg Editor is designed like a LEGO set which contains several drag-and-drop blocks for you to choose from. 

Here are a few features that make Gutenberg Editor more convenient for users:

Reusable Blocks: Reusable Blocks are some of the coolest features of Gutenberg Editor. You can create a block, say an intro for your blog post, and then save it as a reusable block for future needs. This saves a great deal of time to create templates in future. 

Drag-&-Drop Content Blocks: Unlike the classic WordPress editor which required you to add all your text and multimedia content into one single area, the drag-&-drop content blocks allow you to pick and choose individual content blocks depending on your individual layout preferences. This means you can re-organize content blocks within your posts and pages. 

Intuitive Dynamic Toolbar: The old-school WordPress editor had a static toolbar with several settings to choose from, which made it look cluttered and unintuitive. On the contrary, the all-new Gutenberg editor is intuitive, and it only shows settings relevant to the current block you’re editing. 

Full-width Alignment: The previous WordPress editor used to have a fixed width content alignment feature, meaning you couldn’t any content piece within your posts/pages to go full-width. The Gutenberg editor has overcome this shortcoming by introducing a full-width alignment feature, thereby letting you use full-width text or image within the posts/pages of your website. 

Front adjusting font-size to adding text columns to creating buttons and tables, the Gutenberg editor has made it extremely easy for WordPress users to create design posts and pages. 

In essence, one can customize the front-end to a great extent with practically zero knowledge in HTML, CSS or PHP. 

Gutenberg vs. Page Builders

According to Yoast.com, Gutenberg is just stage one of a three-pronged roll-out strategy of WordPress. In subsequent stages, WordPress will introduce more block-building features such as page-template and full-site customizer. This essentially means WordPress is gearing towards offering a full-fledged drag-and-drop editing environment like the popular page builders. 

At this point, Guternberg doesn’t have many features that a standard page builder offers. Here’s how:

#1: Front-end Editing: Unlike Page Builders, Gutenberg doesn’t offer any front-end editing environment. A front-end editing environment allows you to see the changes you make in real-time. However, you still can use preview the changes you make in Gutenberg editor.

#2: Drag and Drop Feature: Even as Gutenberg offers Drag & Drop features like Page Builders, it doesn’t let you resize elements or adjust their heights and widths like Page Builders do. The ability to help users create complex layouts is what makes Page Builders different from Gutenberg. You can, however, drag and drop blocks to different places in the Gutenberg editor. 

#3: Styling Options: When it comes to styling options, Page Builders are way ahead of Gutenberg editor. While Gutenberg only offers styling options (such as editing background/text color or changing font size) for blocks, Page Builders lets you customize individual widgets, columns and pages among others. 

Final Thoughts

As the world of web development is increasingly moving towards page builders, WordPress has made the right move by reinventing itself at the right time. The Gutenberg editor with its easy-to-use features will help millions of WordPress users get creative and build beautiful layouts for their website.