Introducing Gutenberg, the new WordPress editor

In recent years, the development community behind WordPress have been working on a complete overhaul of the page and posts editor, the first significant change in the editor since WordPress’ inception. The new editor, entitled Gutenberg, has now been released to the official WordPress Plugin store, available to the public to try.

Built using modern web technologies such as React, Gutenberg is an attempt to give this primary component of the CMS a fresh update. While still in early stages, Gutenberg drastically changes many features of the familiar editor, which comes with both strengths and drawbacks.

This blog post will take a look at the new editor and what’s in store for the future of WordPress.

Who was Johannes Gutenberg?

Johannes Gutenberg was a renowned German printer, publisher, goldsmith, and inventor. He is famous for introducing and building the foundation of printing in Europe through his mechanical and movable printing press.

Just like the groundbreaking efforts of Gutenberg, the new WordPress editor serves as a stepping stone for a broader WordPress ecosystem. Gutenberg WordPress editor works in favor of plugin developers, agencies, developers, core developers, theme developers, users, and web hosts.

Trying out Gutenberg

Now that Gutenberg has been publicly released, it can be installed directly from the WordPress site, or the Plugins section of your dashboard.

If you’d like to try Gutenberg out before installing on your site, though, WordPress has made it easy to do, via this live demo.

The most immediately noticeable difference in Gutenberg is the complete overhaul of the user interface. You’ll be immediately greeted with a visual representation, intended to be as close to the final product as possible. Users familiar with the Medium or Ghost blogging platforms will notice some similarities in the UI and overall layout.

Gutenberg introduces the concept of content “blocks”, modular components that can be added together to build up a page. Types of blocks include Paragraph, Heading, Image, Video, Columns, Buttons and more. This is not dissimilar from plugins such as WPBakery Page Builder, although this functionality will be directly integrated into WordPress.

Another major improvement is its support on mobile devices. Editing posts and pages on the classic WordPress editor was often laborious on mobile devices. The Gutenberg project clearly took this into major consideration.

The “Code Editor” (previously “Text Editor”) is also still available for those who’d like to write their HTML and CSS directly, receiving an updated, more minimal layout.

How to Use Gutenberg.

Gutenberg editor is the replacement of traditional WordPress classic editor to edit pages and posts. As a comprehensive and modern WordPress editor, Gutenberg comes with individual blocks. It means users no longer have to focus on one specific content area.
The new editor comes with a wide range of improvements and features. The new improvements and features extent to the user interface, drag-and-drop, accessibility, and other functional areas of WordPress. For instance, the all-in-one new menu now comes with a dedicated WordPress dashboard. You can also use the dashboard menu to test and visualize a variety of WordPress editor elements.

If you want a more minimalist look, you can go to your post-settings in Gutenberg editor and get rid of the right-hand sidebar. Remember that Gutenberg WordPress editor blocks continue to evolve and expand. Your objective should be to use the new editor to create richer and flawless content that complements each page and post inside WordPress.

But the new version is more than just a page/post editor – it allows you to play around with sidebars, widgets, footer, and header. With Gutenberg, you can break up your content into multiple blocks. For instance, you can use image block, quote block, button block, paragraph bock, and headline block.

How to Disable Gutenberg.

In WordPress 5.5, Gutenberg is a default editor. But once you update to the new WordPress, you can choose to disable Gutenberg editor. The idea is to retain some of the functionality of a classic WordPress editor. It means you can continue to use WordPress like you have for years.

In fact, you have until December 31st, 2021 to get familiar with Gutenberg and then make a full transition to the new editor.

Your three disable options are:
1. Install the old WordPress editor plugin
2. Install and then disable the WordPress Gutenberg plugin.
3. Disable Gutenberg WordPress editor through code.

What are Gutenberg Blocks?

The fact of the matter is that the classic WordPress editor was strictly a text editor with a combination of formatting buttons that resemble Microsoft Word. Gutenberg editor, however, uses a block-based approach. It allows users more freedom to roll out a multitude of changes into posts and pages.

Now you don’t need a different table plugin to include a table in your content. Through Gutenberg editor, users can now include a table block. It means you can choose rows and columns and start adding your content right away.

How Do I Use Gutenberg Blocks?

You can include blocks for images, videos, audio, galleries, lists, and even each paragraph. For instance, you can change the content attributes up and down and then edit them as separate blocks to create rich content. Despite the new approach, the new WordPress Gutenberg editor is quite straightforward and easy to learn.

There is also a block directory inside the plugin director that comes with individual block plugins. These block plugins are relatively small and provide one Gutenberg block. Another hallmark feature of the Gutenberg is block patterns that allow you to conduct complete on-page customization.

Think of block patterns as a new concept in the new WordPress block editor.  You can use block patterns to build and as well as share predefined unique block layouts. Ultimately, block patterns create more room for the Gutenberg block editor to function as a page builder.

So, make sure to look for specific block patterns that would allow Gutenberg block editor to evolve as a page builder. Use the “+” icon on the upper left corner of your screen to get the registered block patterns. You will see a separate tab of “Patterns” and “Blocks” on your menu and switch back-and-forth to review options.

With block patterns, it is now simple to build beautiful and complex post layouts and pages.  The trick is to use a specific combination of blocks with proper matching. In Gutenberg editor, you can explore and spot new block patterns for numerous themes.

Gutenberg Vs Classic Editor

Unlike the classic version, Gutenberg editor comes with more writing space for smaller screens. If you use your laptop to edit and manage WordPress posts or pages, Gutenberg will come across as a pleasant update.

Writing is still the key focus of Gutenberg and it has managed to cut out several distractions from the classic version. The navigation of the Gutenberg editor also makes it more usable. But the visual appearance of Gutenberg is significantly more modern and clear than classic WordPress editor.

 

Which is Better Gutenberg or Elementor?

If you’re part of the WordPress landscape, the choice couldn’t be more obvious. In comparison, there is more flexibility to operate and customize with Gutenberg than Elementor. Although both products come with unique customization and features to improve the website, Gutenberg takes the user experience to the next level.

In fact, Gutenberg will continue to release more features and customization options that would make the user experience smoother. Besides, you no longer have to write within a big concentrated content editor which makes all the difference.

Do I Need Gutenberg if I have Elementor?

With Gutenberg, everything boils down to a block and that means you don’t have to generalize the different type of content. You can practically use individual blocks to add any kind of content to your website. Furthermore, Gutenberg editor is less distractive than Elementor because of its minimalist look.

If you’ve had the chance to use Elementor, you will find the compatibility, design, navigation, and overall experience much better on the Gutenberg editor. With a block-based approach from the menu, users can take a closer look at their content structure in the blink of an eye. Bloggers would also realize that the blogging experience is better via Gutenberg editor because of the new set of features.

Gutenberg Drawbacks

While Gutenberg brings a fresh and new experience to the familiar content management system, the general outcome of the project is yet to be determined. While the current plan is to ship Gutenberg with WordPress by version 5.0, there seems to be quite a few bugs still to work out. The reviews in the Plugins store have largely been unfavorable, in equal part due to technical issues and users resistant to the major changes.

One major feature many expected to be included is Markdown support. As this has become a standard way of writing HTML across many platforms, one hopes this will be implemented in later versions.

Conclusion

As the project is still new, there is likely to be significant improvements to the Gutenberg editor in the coming weeks and months. While it might be too early to choose it as your default editor, Gutenberg is no doubt a promising addition to the WordPress ecosystem, and one that will play a significant role in the future of the content management system.