<img alt="" src="https://secure.hiss3lark.com/167682.png" style="display:none;">
  • share

A blog about software development best practices, how-tos, and tips from practitioners.

What Is Gutenberg?-Learn About The New WordPress Block Editor

What Is Gutenberg?-Learn About The New WordPress Block Editor

The WordPress Content Management System (CMS) continually improving its site editing experience and there have been frameworks, front-end editors, page builders, etc all result in fruitful WordPress experience. Like every significant advancement, WordPress replaced its classic editor with a more functional and intuitive block editor, called Gutenberg.

The visual editor of WordPress is primary for WordPress content creators to keep their blogs and websites running. TinyMCE, the default editor is not streamlined for beginners and those who are expecting custom features for navigation. Considering this, the release of WordPress 5.0 introduces Gutenberg at its dashboard. Let us have a look at this brand-new block editor, its advantages over the post editor and what its evolution holds for the future.

What is Gutenberg?

WordPress 5.0 comes with a new default content editor, Gutenberg – content free and distraction free interface. Called as WordPress Gutenberg editor at the time of development, now, after its release on December 6, 2018, it is just “block editor” or “WordPress editor”. Gutenberg is a client-side interface designed with React, which uses a block-based system to develop content.

When you open your upgraded WordPress editor, you will have a clean writing environment, with striking typography and plenty of space for the content to shine. Here is what WordPress with Gutenberg looks like:WordPress with Gutenberg

Whereas, the old classic editor includes text editor with formatting buttons as like Microsoft word. And this is what the classic editor looks like:Classic Editor

Gutenberg provides a completely innovative approach, by moving to a block-based approach to refine the editing experience. It includes a number of blocks that aid to customize your content as well as layout in the editor. Here is a list of blocks in the WordPress editor:WordPress Gutenberg Blocks

Why Gutenberg Editor? – A Comparison with the Classic Editor

If we already have a default WordPress classic editor, why does one go for WordPress Gutenberg? Let us go through the reasons.

Of course, there is nothing wrong with the classic editor, but some users find that it is missing some attractive options they want and are looking for alternative solutions, which can be more flexible and intuitive than the default editor. Most of the WordPress users desire to create content using drag and drop editors.

The hope is, Gutenberg meets their requirements and there is no need to look for plug-ins to provide additional functionalities to their sites since most of the demanding features are built right into the WordPress Platform. If you are using the image gallery plugin, or shortcode plugin or any plugins for the table or contact form functionality, they may no longer be needed, as Gutenberg offers all.

The addition of Gutenberg offers widgets directly onto your post or page. WordPress Gutenberg functions like a page builder. With the number of blocks, which range from a paragraph to tables, images, video embeds and more, you can create various forms of content, insert into posts as well as customize immediately, right within editor console.

Gutenberg has not entirely taken over styling and layouts from developers and designers. Its Block API allows you to create your own blocks or add third-party blocks. It will result in effortless use of widgets and plugins as it shifted the clumsy WordPress add-ons into a more simple to use block approach.

Moreover, the duplicate function provides you with posts and pages you have customized. For instance, if you have designed your cover image, you would not need to recreate them each time, just duplicate the block and insert your new photo. With the sharing function, you can also share your blocks of content when you need to keep the same on multiple posts or pages.

Overall, WordPress Gutenberg allows users to create more complex pages/posts with a simpler interface.

Advantages of WordPress Gutenberg Editor

Gutenberg aims to future proof WordPress ecosystem and makes it more attractive, compared to other competing platforms like Squarespace and Medium. It signs a new era in the world of WordPress Publishing. Here are some of the advantages of the block editor of WordPress:

1. Access TinyMCE Editor via Classic Block

Unlike other page editors, uninstalling Gutenberg won’t break your website. If you want some time to get familiar with the new Gutenberg editor, you can still use the old TinyMCE editor. The only thing you need to do is select the “Classic block” from the pops ups of the blocks. The Classic block works in the same way as the TinyMCE. You can create paragraphs & headings, code blocks, build images, etc., inside the block.

2. Developers can write their Own Blocks

As WordPress has redesigned its editor to make it more developer-friendly, plugin developers can build their own blocks rather than rely on shortcodes. All the block-enabled plugins, which are compatible with the Gutenberg are available in the WordPress Plugin Repo.

3. Full-screen Writing Mode

Gutenberg enables users to write their posts in Full-screen mode to ensure distraction-free writing inside the block editor. You can switch on or off the Full-screen mode from the “Tools & Options” on the top of the menu bar. This feature matters to the users who are familiar with editing experience of Medium.com. WordPress editor also includes semi-distraction free mode by enabling you to switch on and off the Settings sidebar.

4. Simplifies Building of Content Blocks

In Gutenberg, everything including image, paragraph, blockquote, heading, audio, and video are separate blocks. So, with Gutenberg, users can build content blocks effortlessly when compared to using the old editor. In addition, the theme developers can easily create themes for the content block. As such, it reduces the need for bulky content block plugins and results in short load times for WordPress sites.

5. Fine-tuned Visual Editor

Gutenberg introduces a myriad of new content types that are simple to add to your pages/posts. For instance, you can easily add as well as customize a button from the visual editor itself, and you can configure the style, color, and action of the button through the setting of the Button block. The WordPress editor is updated with spaces, columns, in-post widgets, separators, and several other content types. You can also access the block that deals with third-party embeds like Meetup.com, TED, Reddit, and WordPress.tv.

6. Handy Information Box

The built-in information box of Gutenberg allows the bloggers and content creators to check out statistics associated with their posts. For example, you can check the word count of your post with a single click. You can get the information box by simply clicking the little ‘i' icon on the block editor. It also counts heading, paragraphs, words, and blocks within your document and presents the document outline.Information box of Gutenberg

7. Displays the Exact Appearance of Content on a WordPress Site

Guttenberg shows the content in the same way as it would appear on the site when published. This will give you an idea of how the content will appear on the site without having to make it live. The WordPress Gutenberg editor also comes with better mobile responsiveness. Since it is designed to work well on both computers and mobile devices like smartphones. This is certainly a huge benefit of the Gutenberg editor since most of the competitors aren’t offering compatibility with mobile devices.

Downsides of WordPress Gutenberg Editor

Of course, Gutenberg still includes some cons as well. Some users have reviewed that the editor is overly complex and unintuitive. When it comes to creating straightforward pages/posts containing images and text, Gutenberg provides more features than you actually require.

In addition, the UI of Gutenberg is completely focused on content creation. As the blocks are not focused on styling, the editor is still away from providing control and accuracy over a layout that most developers, designers, and page builders look for. The editor won’t allow you to wrap text around your image, as images include their own block. Similarly, embeds like video and audio also want their own block and Gutenberg no longer supports the oEmbed from Vimeo, YouTube, etc.

Moreover, recently users have been facing some accessibility issues while using the back-end Gutenberg editor. Most of the keyboard shortcuts that work with TinyMCE are not supported with Gutenberg, which is another reason that blocks the easy accessibility.

Hope WordPress CMS will address these downsides in the future to make the power of Gutenberg overcome its shortfalls.

Future

Gutenberg is not just a WordPress editor, but the start of something bigger. It embarks the era of exciting enhancements. WordPress Gutenberg is the first step of its three-staged tactic. Next, the WordPress ecosystem will focus on page templates beyond the content creation and in the final stage, the Gutenberg editor will become your full site customizer. Undoubtedly, it provides endless potentials to consider WordPress as the best content management system for years to come.

Generic-CTA-01

Like what you just read? Get Latest content delivered straight to your inbox.