Top 10 Exciting Features of Gutenberg WordPress Editor which can Change Your Blogging Experience

0
504
Gutenberg WordPress Editor

Last updated - May 10, 2018

Gutenberg WordPress Editor is expected to release soon with WordPress 5.0. It will be the new built-in WordPress Editor. So its nice to be prepared for the new experience. We’ll see the 10 features of Gutenberg WordPress editor that changes the way you’ve blogged.

So, when did you write your first WordPress Blog? How was your experience formatting it? I had my first experience with Classic WordPress Editor was in 2008. Parallelly, I used to write on other social platforms too. I could see the difference in the writing experience. This difference in writing experience is probably because WordPress is open source. Advanced editors are available in the market and can be used as plugins. But what about making WordPress advanced? 29% of internet websites are powered by WordPress and most of them use the basic TinyMCE editor. Considering the advancements in other platforms, WordPress Community decided to give the editor a revival. ‘Gutenberg’ is what they decided to call it. That too, with a notion of bringing a similar change that Gutenberg’s Moving Printing Press bought to Europe. If you are still wondering what Gutenberg is, consider getting ready for Gutenberg.

Let’s explore the 10 exciting features of Gutenberg WordPress Editor which can change your blogging experience in WordPress.

 Blocks  

Classic TinyMCE

Editing any content page in the present editor is the most time-consuming. If you are editing, the whole page will be a part of the edit. The page title, which has a separate block, is followed by the single editing area. Different sections of any blog eg. text, images, quotes etc. are to be added or edited in the continuous sheet.

Gutenberg WordPress Editor
Adding and Transforming Blocks in Gutenberg WordPress Editor
Gutenberg

With Gutenberg, You can add separate blocks of different type of sections. You can also change the type of block from the block itself. Only Paragraph block can be converted to other blocks. For example, to convert your Quote block to List block, first you need to convert it into a paragraph block, and then convert it into List block.

Things you can do with blocks
  • Add a new block between two blocks
  • Move each block upwards or downwards
  • Edit each block separately
  • Convert one block to another
  • Align each blog differently

  Table   

Classic TinyMCE

Inserting a 4×4 table in your blog, you either use a plugin or write an HTML code like this in the Text mode and then move to Visual Mode to input the entries of the table.

<table class=”wp-block-table”>
<tbody>
<tr>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
</tr>
<tr>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
</tr>
<tr>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
</tr>
<tr>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
</tr>
</tbody>
</table>

Gutenberg WordPress Editor
Adding and Expanding Table Block in Gutenberg WordPress Editor
Gutenberg

With Gutenberg, you get a 2×2  Table Block, and by using ‘Edit as HTML’ you can add the desired number of rows and columns. Although it does not make much difference, at least you can insert a table without coding. We can expect a full customizable Table block with its release.

  ShortCodes 

Classic TinyMCE

With limited features in it, bloggers had to move to shortcodes and custom HTML to include desired sections to the blog. We actually have an entire market of page editor and themes to customize pages.

Gutenberg

Tries to include the commonly used shortcodes as Blocks. These specific blocks are still in their primary stage, but contributions from developers and reviews from users may lead to some advanced blocks. Gutenberg Team keeps mentioning about “Mystery meats”, which are some hidden feature not included in the Official Test Gutenberg Plugin.

 Font Size Adjuster 

Classic TinyMCE

With the present editor, only Headings can be customized into 6 font sizes.

Gutenberg WordPress Editor
Font Size Gutenberg WordPress Editor
Gutenberg

This allows you to change the font size of each Paragraph Block. To do it you need to go to the Advanced Settings Tab< Paragraph< Font Size. You can use the scale or enter a value manually and adjust the font size. With this, you can also Align the Paragraph Block in 5 different ways.

 Table of Content 

Classic TinyMCE

There is no any such thing called Table of Contents with the current editor.

Gutenberg WordPress Editor
Table of Content, Gutenberg WordPress Editor
Gutenberg

We get a Table of Content at two different places. One at the Information Button on the Top Right menu. And the other at the bottom of Advanced Setting Tab. It features all headings and subheading. The heading types can be changed from here too. It shows an error message if the heading font sizes don’t follow a sequence.  In addition to this, you are taken the Heading which you click on the Table of Content.

 Image Gallery 

Classic TinyMCE

Adding a gallery in the present editor is too mainstream. Most of the options are there but bloggers need to move to a different dialogue box with each edit they want to make. This makes editing galleries cumbersome and frustrating at times with the classic editor.

Gutenberg WordPress Editor
Editing Gallery, Gutenberg WordPress Editor
Gutenberg

In Gutenberg,  you can change the number of columns from the editor. And if you keep the crop button on, images are automatically cropped to fit the alignment. This is useful if we are using pictures of different dimensions. Cropping of images can also be turned off too. Additional CSS Class is also provided, in case you need more customization.

 Adding Color 

Classic TinyMCE

Default font color in the present editor is black. And the background color is white.

Gutenberg

With Gutenberg, you can change the font and background color of all Paragraph Blocks.

Call To Action Button 

Classic TinyMCE

No such feature is available is available with the present editor. You are supposed to write codes and apply CSS for tempting Call To Action  Buttons in the editor. We also have a lot of plugins for the same.

Gutenberg

It provides you with one basic Call To Action Button, with an option of Additional CSS Class, which can be used to customize the button. You can still add the links to it from the editor itself, by filling the blank boxes only.

Text Column

Gutenberg
Adding Text Column

Gutenberg has included text column block on an experimental basis. With each Text Column Block, you get two sections to write in. Each of these text sections can be edited individually. We can expect a stronger text column block in near future.

 Gutenberg Can Be Disabled  

Gutenberg will replace Classic TinyMCE as the default WordPress editor. But it can be disabled too. Users will still be able to use the Classic TinyMCE editor, as it is already available as a plugin.

Additional Features

Text in Featured Image 

You can now add Text in the center of the Feature image and adjust the opacity of the image. The color of the text can only be white and position of the text is fixed at the center of the image.

Cover Text

You may get to see Cover Text i.e. text with a background color and can be aligned across the page horizontally.

Latest Post Section

You can add a block called Latest Post, which will feature the latest post posted on the website. You can customize the number of posts you want to show, add a sliding effect and align the block.

Conclusion

Gutenberg is being developed for the larger good of bloggers. Not only this a lot of other websites like magazine, cards, and websites that require a fancy outlook can use this editor to make their landing page look nice. Photography websites are also going to get a lot of benefit from this editor. We can also see a separate block for customizing WooCommerce based website pages. Gutenberg has already included sliding effect to categories. Most of the edits can be done from the document only. You can also edit the source code, with one click. It will probably reduce extra clicks and a lot of time editing your documents. Here is What WordPress plans to do with Gutenberg? and What is new in Gutenberg?

So to make it more efficient install the plugin and if you feel that any part of it can be further improved, Raise an Issue to Improve Gutenberg or Join the Development Team at GitHub. I hope you will gain enough experience of using Gutenberg. This will help you use it effectively when it hits the floor. Share your views on Gutenberg in the comments section.