What You Need To Know About Gutenberg WordPress Editor

The ecosystem of WordPress, the most popular Content Management System today, revolves around plugins, themes, integrators and services, which helps transform the boilerplate framework into something more sophisticated. However, now WordPress wants to focus on creating the most user-friendly interface by improving functionality and improving its core feature set to increase usability.

Gutenberg, the new WordPress editor, is all set to replace the current TinyMCE backend editor in an attempt to streamline and simplify the content creation experience. The new publishing experience has created a significant amount of buzz among WordPress users, as Gutenberg looks to move beyond the traditional posts-and-pages configuration into complete site customization including visual editing and drag-and-drop elements. Gutenberg will make the editing experience better for content creators because users no longer need extra plugins to manage something as simple as layouts. Gutenberg is an obvious reaction to competitors of WordPress, drawing on the writing experience of Medium.com and the quick and easy site builds using such platforms as Wix and Squarespace.

What is the Gutenberg WordPress Editor?

The new Gutenberg editor gets its name from Johannes Gutenberg the founder of the printing press. It looks to provide a rich and user-friendly, enjoyable editing experience for content creators by optimizing the back-end editor to better reflect the visual appearance of the content on the front-end. For a quick overview, you can check out this live demo (video) presented at State Of The Word 2017.

Improved Content Creating Process

The current visual editor of WordPress requires users to know cryptic Shortcodes and HTML to accomplish most content creation goals. In the “classic” editor, there was oftena  disconnect between how content looked during creation and editing and how it ultimately appeared on the site. This editor was rife with spacing issues, often with posts containing mixed content types, such as text, multimedia or forms, etc.

In contrast, a Gutenberg post is based on blocks, wherein each block represents a different type of content. This means fewer behind-the-scenes code changes. Block positioning can be moved up or down easily with a drag-and-drop interface so that site owners know exactly how their content will look on their website as its being created.

Blocks are used to help simplify finding, inserting, and working with different page building elements (shortcodes, widgets, custom HTML, images, text formatting, and embeds) into a single, searchable flow and UI. Here are the blocks and embeds that authors can now use to customize the content and its layout:

  • Common Blocks
    • Paragraph
    • Image
    • Gallery
    • Heading
    • Quote
    • Cover
    • Video
    • Audio
  • Formatting Blocks
    • Pull quote
    • Table
    • Preformatted
    • Code
    • Custom HTML
    • Custom Test Verse
  • Layout Block
    • Separator
    • More
    • Buttom
    • Text Columns
  • Widgets
    • Latest Posts
    • Short Codes
    • Text columns

Any kind of media content, be it YouTube, Twitter, Cloudup, Instagram, Slideshare, Dailymotion, Flickr, Spotify, Reddit, Vimeo, can be easily embedded in the blocks. The ease of use and improved usability of the editor should make for easier onboarding of new users.

More Intuitive Interface

Gutenberg is most certainly a reaction to the quick and easy site builds, templates, and mobile interface editor in competitors such as Wix and Squarespace, which has popularized and increased demand for easy content creation. Whereas in WordPress in the past required the use of shortcodes, widgets, TinyMCE, and others individually. However, with the new Gutenberg update, users will only have to know about the different blocks, which will be the same whether being used for a post, page or sidebar. The blocks will work even with any new plugins, without any need for further changes.

Block Information Stored In HTML Comments

With the new update of Gutenberg, WordPress will now store information about the blocks in the HTML comments. These comments will not be rendered on live pages and can only be seen at the back end.

Disable Gutenberg Without Breaking Your Website

If you happen to uninstall Gutenberg, it won’t hamper your website design in any way. When you reactivate Gutenberg again, you won’t lose the previously arranged blocks as the HTML comments are retained in the content. Unlike what happens with the current content editor in WordPress, with the new update, HTML code will not appear in page source.

Customize BLOCKS

With Gutenberg, developers have the option of writing the blocks their own way. In addition, the option of copy-paste has now been built rather efficiently in the new update. The content output of Gutenberg blocks uses HTML5 tags like section and figure.

Collaborative Editing

The post locking feature in WordPress currently prevents authors from overwriting each other. With Gutenberg, locking can be done at the block level, which opens up the flexibility of having multiple people work on sections of the same content without interrupting each other.

What Happens to Existing Content?

As mentioned previously data will continue to be stored as HTML in post_content, so essentially nothing will change for existing content. Within Gutenberg, the Classic Editor plugin will be embedded as a Classic Text block to handle any legacy content within a block of its own. Essentially, this will help preserve publishing continuity and ensure a smooth upgrade process.

Be Prepared

Developers that typically use a combination of custom fields and metaboxes so that clients can add all the data needed to be displayed on the site in a prescribed style will need to prepare for 5.0 so that their clients aren’t affected by Gutenberg.

Those who have extensive integrations with the current WordPress editor will prefer a gradual transition. You can start experimenting and creating content in Gutenberg right away to learn and adapt gradually.

Gutenberg provides a clue of what WordPress of the future will be like- highly customizable, user-friendly, and full of new features