Topics In Demand
Notification
New

No notification found.

Everything you need to know about Gutenberg— the new WordPress editor
Everything you need to know about Gutenberg— the new WordPress editor

October 16, 2020

3

0

In the coming months, a new WordPress editor called Gutenberg, will be integrated with the WordPress core. WordPress community releases updates to its content management system twice a year to make it better. The latest version of WordPress (v4.9.4 Maintenance release) was released just last month. These updates help bloggers, developers and creative agencies to improve the aging code and modernize the experience.

TinyMCE (Tiny Moxiecode Content Editor), the default WordPress content editor, has been there within the software for many years. It provides a very simple interface to all the users, giving them control over content creation and editing. Everyone who uses WordPress has become quite familiar with the features and the experience of TinyMCE. Soon, Gutenberg WordPress editor will replace TinyMCE as the default content editor.

WordPress Gutenberg Video: A Quick Walkthrough

 

What is Gutenberg WordPress editor?

Gutenberg is a new editor for WordPress, whose functionality will be based on blocks. All the content viz. text, images, quotes, videos and more will be inserted into a webpage from WordPress backend, in the form of blocks.

These ‘content blocks’ will renovate the way users, developers, and hosts interact with WordPress. Gutenberg will replace a number of unpredictable ways of customization, and fine-tune it with up-to-the-minute coding standards.

It will change the current visual editing experience with more spontaneous writing experience, making the integration of rich content easier for the users.

Gutenberg the advanced WordPress editor, is named after Johannes Gutenberg, the man who invented mechanical movable type printing press around 500 years ago.

“The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.” — Matt Mullenweg, CEO and Founder of WordPress.

What are blocks in Gutenberg?

In the current WordPress editor, the styling of content needs shortcodes, embeds, widgets, post formats, custom post types, meta boxes, theme options, and other formatting elements. The blocks are a unified way to style all the content, enabling broad functionality and consistent user experience.

WordPress community believes that the blocks will be easier to search, understand, and dynamically shift around the page.

9 Features of Gutenberg Editor for WordPress

1. Dropdown instead of toolbar

Everything you need to know about Gutenberg— the new WordPress editor 1In the above image, you can notice that the Gutenberg doesn’t contain TinyMCE toolbar. It has now been replaced with a drop-down menu using an ‘Insert’ button.

2. More writing-space

Gutenberg provides almost double the writing space as compared to the current WordPress editor. It comes with distraction-free mode, removing the unnecessary buttons. In the image below, you can see the quantity of writing space Gutenberg offers. It will be helpful for those users who use smaller screens, like laptops or tablets.

For more space, users will be able to hide the right-hand sidebar from the Post Settings option.

Everything you need to know about Gutenberg— the new WordPress editor 2

3. Content embedding within visual editor

In Gutenberg, there is a new embedding tool that makes it easier to embed media files like music, videos, images, from any online or social media platform. With TinyMCE, users can embed media content from text editor only. It sometimes is difficult for users who have no technical expertise about coding.

However, Gutenberg allows users to embed media content within visual editor itself, from YouTube, Hulu, Flicker, Twitter, SoundCloud, Slideshare, etc.

Everything you need to know about Gutenberg— the new WordPress editor 3

4. Dropdown for switching between visual editor and text editor

Gutenberg will contain a dropdown at the top left side, to switch between the visual editor and the text editorThe developers can create blocks directly from the text editor using the HTML comments.

Everything you need to know about Gutenberg— the new WordPress editor 4

5. Live HTML block

There is a new feature in Gutenberg project, which allows users to see the preview of HTML code right within the block of text editor. It was missing in TinyMCE content editor, and users had to switch between visual and text editor modes to see the preview of code.

Kinsta called this feature ‘Live HTML block’, a real cool idea to prevent developers from hassles of switching between the visual editor and text editor modes.

6. Recent Blocks

Gutenberg consists of a ‘Recent Blocks’ option to accelerate the process of insertion of blocks.

Everything you need to know about Gutenberg— the new WordPress editor 5

7. New visual styles

There are new visual styles and options for Cover Text, allowing users to easily change font size, use drop cap for fonts, change colors of text and background using customized color palette component.

Everything you need to know about Gutenberg— the new WordPress editor 6

8. Table of Contents

The Table of Contents option on the sidebar is going to be very helpful for bloggers who write lengthy content. The feature provides clickable links of Headings in the article, allowing users to jump directly to a section in the long-form content.

Everything you need to know about Gutenberg— the new WordPress editor 7

9. Information popup for Word and Block Counts

Everyone is used to seeing the total word count at the bottom of the page, not only in TinyMCE editor, but also in MS-Word. Gutenberg is going to change this, with a small information popup on the sidebar.

This option (when clicked) shows total number of words, blocks and headings in the article.

Everything you need to know about Gutenberg— the new WordPress editor 8

There are a few more new options in Gutenberg, such as a Call to Action Button, alignment options, drag and drop images, etc. It works nicely on mobile, providing quick edit options to users while on the go.

Gutenberg availability

It is still in the testing phase on GitHub, waiting for 100,000 active installs so that a lot of issues and bugs can be fixed before making it generally available. Hopefully, Gutenberg will be released with WordPress 5.0 by the end of this year.

It has three planned stages. First one focuses on content-first approach (post editing experience and blocks’ implementation) which will be included with WordPress 5.0.

Stages two and three are planned for next year, going beyond content approach, to the full site customization.

“We have challenges (user frustrations with publishing and customizing, competition from site builders like Squarespace and Wix) and opportunities (the 157 million small businesses without sites, aka the next big market we should be serving). It’s time for WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities.” — Matt Mullenweg.

Originally Published in ZNetLive


That the contents of third-party articles/blogs published here on the website, and the interpretation of all information in the article/blogs such as data, maps, numbers, opinions etc. displayed in the article/blogs and views or the opinions expressed within the content are solely of the author's; and do not reflect the opinions and beliefs of NASSCOM or its affiliates in any manner. NASSCOM does not take any liability w.r.t. content in any manner and will not be liable in any manner whatsoever for any kind of liability arising out of any act, error or omission. The contents of third-party article/blogs published, are provided solely as convenience; and the presence of these articles/blogs should not, under any circumstances, be considered as an endorsement of the contents by NASSCOM in any manner; and if you chose to access these articles/blogs , you do so at your own risk.


ZNet Technologies Private Limited, incorporated in 2009, is a cloud services provider offering cloud infrastructure and managed services to partners and end customers across the globe with a primary focus on India. We empower 90k+ websites.

© Copyright nasscom. All Rights Reserved.