The New Gutenberg Editing Experience – Introducing a New Editing Experience for WordPress

by Varun Shrivastava
In Wordpress N SEO

July 13th, 2018

I’ve been waiting for this moment when I will first write the review of Gutenberg Editor. I was eagerly waiting for Gutenberg to become stable. And now that it has become stable, I want to tell you about all the amazing features that Gutenberg editor carries within itself.

If you are an avid WordPress user like me then you might also like writing your posts directly into WordPress editor.

And I’m sure you love default WordPress editor but as the time passed, WordPress evolved. Its community evolved. The number of plugins and themes grew. But one thing stayed the same and that was the WordPress editor.

But not anymore.

WordPress has got a brand new editor. It is time to welcome Gutenberg WordPress Editor.?

What’s in the name Gutenberg?

Gutenberg is the last name of a person with a very long name. I’m talking about Johannes Gensfleisch zur Laden zum Gutenberg.

He was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe with the printing press.

He was the first person to make printing press a reality. It was a legendary invention of the 14th century. The invention changed the lives of many by giving birth to the newspaper and books industries.

With that in mind, the WordPress team thought of naming the editor after Gutenberg. Just like the printing press, Gutenberg is going to be the turning point in the evolution of WordPress editor.

I hope you get the deep meaning associated with the name Gutenberg.

The First Look Of Gutenberg Editor

Let me show you how Gutenberg looks like:

Let me focus only on the editor space for you.

This is actually how it feels to write content in Gutenberg Editor.

A clean white slate to put your thoughts down in the form of blocks. I’m loving the ideas of blocks as it makes my writing more organized and easily customizable. I will talk about the blocks later in the article, but now let’s explore the Gutenberg surroundings.

Gutenberg New Top Toolbar

Gutenberg’s top toolbar is one difference that you will see immediately after coming from the Legacy WordPress editor.

Gutenberg-Editor-top-toolbar — Gutenberg Top Toolbar

Let me take you one by one through all the new editions of the editor.

From the left, Gutenberg has given following accessibility features:

Add New Block

The small plus sign that you see on the top left is to add a new block to your content. When you click on it a new box hovers with all the blocks. Take a look:

As I told you earlier, in Gutenberg Editor, everything is a block. So, to do anything, first you need to add a particular block of that type and it will help you with the formatting of certain HTML elements or media.

I loved the smooth transition between different parts of the editor. It shows that they have really put a lot of efforts into its making, keeping in mind the needs of all the writers and editors.

I will talk everything about a block later in this article.

Undo/Redo Changes

The second and third button is to undo and redo any changes that you have made. This is simple utility buttons which are used a lot by editors and writers. I personally undo a lot.

You can also use the legacy windows shortcuts keys to undo changes (CTRL+Z) but if you like to move around your mouse too much then this will really come in handy.

Content Structure

A much-much needed feature of modern browsers.

This features gives you the structure overview of your content. Unlike legacy editor now you can quickly navigate to any headlines without having to scroll the entire content and search for it.

Along with that you get all the basic information like word count , headings count, paragraphs extra. Take a look:

I’m loving this feature. Now, I do not have to search the entire article to find a particular section.

You will know once you will use it 🙂

Save Draft

I like the design of the save draft button. It is subtle as always and goes with the overall style pretty well.

They have designed it to show different states in a single place. The three stages that it constantly flickers between is the Auto Saving, Saving and Save state.

At a fixed interval of time, it automatically saves your article. This is no new feature but it feels more natural and less attention grabber. Although, sometimes I sometimes feel a little lag in the editor while it is saving, not always.

All and all I liked the new design and it definitely works well with my persona.

Preview Draft

No change there.

Although, they have tried to make the transition a little better.

Just before rendering the page, it gives you a message to wait while the preview loads. That works well at psychological level as they reduce the load time with a filler to make your brain think it is processing.

Apart from that I did not find any changes.

Publish

You click that button it publishes.

No change there.

Block Settings Toggle

It is a simple toggle button that hides and shows the sidebar for blocks options.

If you want a large clutter-free area for writing articles than hide the side block settings panel. It will make your editing area look large and distraction free.

This is how it appears when left visible.

More Options

This button opens up a hover box with different options for editor, settings and tools.

Take a look:

I think they will keep on adding new features to the editor and this area will be filled with a few more options. For now, I think these options are self-explanatory.

What is a Block in Gutenberg Editor?

This is the backbone of Gutenberg Editor. You are going to hear a lot about the blocks while having a discussion on Gutenberg.

Here is what WordPress have to say about blocks in their language:

These blocks are a unified way to style content that currently requires shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements

In short, blocks are built for people with zero knowledge about coding. I’m sorry if it feels harsh but the main purpose behind the emergence of Gutenberg is to encourage more and more people towards blogging. With the help of these blocks , they have provided rich customizations for most of your needs.

You do not need knowledge of HTML, CSS, JavaScript to perform basic customization. It comes built-in with the block.

Let me explain you with some examples:

Suppose you need to embed video in a legacy WordPress editor, what would you do?

You will open the video
click on the share button
Copy the embed code
Paste it into your code editor.
Apply some CSS to make it responsive ( the hard part)

Now, how would you add a video in Gutenberg?

You will open the video
Copy the video URL from the browser
Click on Add Block
Search Youtube
Select Youtube Block
Paste the copied code and its done.

Okay let me give you a live example:

Blocks are one of the most powerful ways to organize and structure a block by providing all the basic design and rich customization out of the box. These blocks are one of the best designs that can provide rich functionality in the minimum overhead.

These blocks can also be scaled to the mass to add their own rich functionality and share with everyone. There is no limit to the advancement of this design philosophy.

Adopt Gutenberg Early to Leverage All The Future Benefits

I know it is a bit of risk to adopt any new technology or feature in its early stages but I’ve been trying and testing Gutenberg from the start. This is the first time when I’m posting something on Gutenberg because I have confidence in its abilities now.

It did not crash.

It is fast.

And, It is very organized.

I would like to invite all of the WordPress users on board with this new Gutenberg Editor. It is fun, exciting and very easy to use.

Sure you will take a two-three post to become acquaintances to Gutenberg but once you do it feels a lot more natural and easy to use. Definitely more powerful.

I will keep on adding the new information as I explore more and more features of Gutenberg.

Share your Gutenberg Editing experience in the comments below.

Article By: Varun Shrivastava

Varun Shrivastava is an innovative full stack web developer. He is a passionate blogger and loves to write about philosophy, programming, tech and relationships. He works as a Software Developer. This is his den, you can get in touch with him here anytime you want.