Here, In this article we are going to dive into the new Gutenberg WordPress editor and also explore it’s uses and features.
The current editor of WordPress hasn’t had many changes over the years. while isn’t a bad thing, many think it is time for a change. Other platforms provides a really unique and refreshing experience of writers, so why can’t WordPress?
Without wasting much time, Let’s jump into it and explore it’s features and functionalities.
What is Gutenberg ?
Gutenberg is a take on a new editor for WordPress. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. Their goal is to make this easier, especially for those just starting with WordPress. You can check out the official example.
This is currently in its beta and testing phase, it’s not ready to run on production sites yet. But we wanted to dive in and see it’s features. We will updated as this post as it’s (Gutenberg) improvements and changes are pushed out.
How to Install Gutenberg ?
Gutenberg plugin has over 10,000+ active installation and it’s requires WordPress version 4.8 to use it.
You can download the latest version of Gutenberg from the WordPress repository .
After installing Gutenberg, you will see links under your Posts that allow you to open up your post in the Gutenberg editor as well as in the Classic editor. They don’t replace the default WordPress editor.
You can see (After installing Gutenberg) now there is a new menu called “Gutenberg” which contains a demo (as shown below).
If you take a look at both the Gutenberg editor and the current visual editor you can see there is much more writing space Gutenberg has, especially on smaller screens.
You can hide right-hand sidebar just clicking on “Setting” button as shown in below image.
To switch between the visual editor mode and text editor (code), there is now a Three (…) ( as shown below) in the top right.
<!-- wp:core/text --> <!-- /wp:core/text -->
When you highlight over a block, there are options to easily move it up or down with the arrows, delete it, or go into the settings of the current block.
After installing it, you will probably notice is that the TinyMCE toolbar is now gone and replace with a drop-down.
Table Block and Text Column Block
You can insert them as blocks within the editor. Previously you had to either use a 3rd party plugin or HTML code. Currently, you can only add a 2×2 table with the insert option and you can’t style it without going into the text view.
They have also added the ability to add responsive text column blocks, Currently, you can choose between a 2, 3, and 4 column layout.
Live HTML Block
It has live HTML block. You can insert your code and then see a preview from right within the block. Now you can see your changes without switching between the visual editor and text editor.
Drag and Drop Images
You can now drag and drop images directly into an image block, same as the visual editor.
You can easily find most used blocks under the “recent block” tab. It will helps you to speed up your work.
Cover Text Options
You can now type your cover text with new visual styles and options. You can change font size, turn it into a Drop Cap, and change the color with a new custom color palette.
You can insert block with the help of autocomplete. As shown below you can insert block by typing “/” and then block name.
Word and Block Counts
Earlier we used to seeing the total word count at the bottom of the WYSIWYG editor but now in Gutenberg you can simply click on “!” symbol and in popup you can quickly view your word count , number of blocks and number of heading as well.
Now you can simply add buttons in your post or page by simply click on button block to perform call to actions event.
This feature is my favorite among all as it makes embedding media content super easy. You can add YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, and many more. it’s give alignment options and many more.
Here is a Frontenberg a limited front-end demo of WordPress Gutenberg editor.
Have you tried out Gutenberg yet? If so, we would love to hear your thoughts.
Let it be a programming challenge or a chess game. I accept it.