Android

“Gutenberg Guide – Brand New WordPress Editor”

Wordpress

is our topic for this article, it is a new editor for WordPress. It is named after Johannes Gutenberg who invented a printing press with movable type more than 500 years ago.

The current visual editor requires a lot of us to utilize shortcodes and HTML to make things work. Their goal is to make this easier, especially for those just starting with WordPress.  You can check out the official example.

How to install ?

As of writing this, the Gutenberg plugin currently has a little over 5,000 active installs with over 91,000 total downloads and a 2.5 out of 5-star rating. It also requires WordPress version 4.8 to use it.

You can download the latest version of Gutenberg from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins.

gutenberg-install-wordpress-plugin

Dive into

After installing Gutenberg, you will see links under your Posts that allow you to open up the Gutenberg editor. They don’t replace the default WordPress editor, which is a good thing in our opinion, as during the testing phase it allows you to bounce back and forth. Obviously, once this is merged with Core, it would probably by default use the “Edit” links. As of the latest version on the repository, it now supports custom page types and pages as well.

It also adds a new menu in your WordPress dashboard which contains a demo (as seen below) and the ability to create a new post.

gutenberg-programmingschool

If you take a look at both the Gutenberg editor and the current visual editor side by side you can see just how much more writing space Gutenberg has, especially on smaller screens.

In the Gutenberg WordPress editor, you can click on “Post Settings” to remove the right-hand sidebar. And while this does give you access to even more of your screen it is kind of halfway in between the currently available distraction-free writing mode. We tried using Shift+Alt+W to launch it in Gutenberg editor but it doesn’t seem to work yet. It could be they haven’t added this yet. But we are pretty sure they will, as there are probably quite a few people that use this.

Gutenberg-Guide-Brand-New-WordPress-Editor-hide-settings

To switch between the visual editor mode and text editor (code), There is now 3 dots in the right top corner as shown in below image.

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 block. This is very similar to the controls available to you on Medium.

It is working fine in mobile devices.

Gutenberg Guide - Brand New WordPress Editor

TinyMCE

if you click on the “Insert” button. Well, that is because it appears Gutenberg is trying to get rid of its dependency on the TinyMCE integration. Or are they?

Gutenberg Guide - Brand New-WordPress-Editor- Programming-School

This is it for now. we will come for more contents and features of Gutenberg Blocks in next article. Till then you can install it and play with it.

Happy Coding! 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here