• Skip to main content
  • Skip to primary sidebar
  • Home
  • About
  • Subscribe BMA
  • Contact Us!

Be My Aficionado

Inspire Affection

You are here: Home / Wordpress N SEO / The New Gutenberg Editing Experience – Introducing a New Editing Experience for WordPress

The New Gutenberg Editing Experience – Introducing a New Editing Experience for WordPress9 min read

July 8, 2018 by Varun Shrivastava Leave a Comment

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.?

Topics Covered

  • What’s in the name Gutenberg?
  • The First Look Of Gutenberg Editor
  • Gutenberg New Top Toolbar
      • Add New Block
      • Undo/Redo Changes
      • Content Structure
      • Save Draft
      • Preview Draft
      • Publish
      • Block Settings Toggle
      • More Options
  • What is a Block in Gutenberg Editor?
  • Adopt Gutenberg Early to Leverage All The Future Benefits

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.

  • 25 (Must-Have) Free WordPress Plugin Every Professional Blogger Use.
  • Best Tips: How to Save Money on Web Hosting

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:

Add Block Box

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:

Gutenberg Content Structure
Gutenberg Content Structure

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.

Blocks Sidebar Settings

More Options

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

Take a look:

Gutenberg Editor More Options
Gutenberg Editor More Options

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.

Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • More
  • Click to print (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Telegram (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to share on Skype (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Filed Under: Wordpress N SEO Tagged With: blocks, editor, gutenberg, new editor, wordpress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Featured Posts

Soul Sucking Jobs Kills Creativity

November 6, 2016 By Varun Shrivastava 2 Comments

How To Add Custom JNDI Resource Factory That Will Return Your Custom Object

August 9, 2020 By Varun Shrivastava Leave a Comment

New Kindle Oasis: Best E-book Reader Device to Buy

October 25, 2017 By Varun Shrivastava Leave a Comment

How to SpeedUp WordPress Website for Google Pagespeed Insight

April 15, 2017 By Varun Shrivastava 15 Comments

Basic Calculator Leetcode Problem Using Object-Oriented Programming In Java

February 4, 2021 By Varun Shrivastava Leave a Comment

Latest Posts

  • 3 Best Laptops (Mid-Range) For Every Use Case In India
  • Distributed System Architectural Patterns
  • The Power of being in the Present
  • Basic Calculator Leetcode Problem Using Object-Oriented Programming In Java
  • Study Abroad Destinations : Research and Review

Categories

  • Blogging (103)
  • Cooking (11)
  • Fashion (7)
  • Finance & Money (12)
  • Programming (51)
  • Reviews (4)
  • Technology (22)
  • Travelling (4)
  • Tutorials (12)
  • Web Hosting (8)
  • Wordpress N SEO (19)

Follow us on facebook

Follow us on facebook

Grab the Deal Now!

Hostgator Starting @$3.95/mo

DigitalOcean Free Credits

Trending

Affordable Hosting amazon aoc-2020 bad luck believe in yourself best database earn money blogging education experience fashion finance Financial Freedom food friends goals google india indian cuisine indian education system java javascript life life changing love make money microservices motivation oops poor education system principles of microservices problem-solving programmer programming reality search engines seo SSD Hosting success technology tips top 5 web web developer wordpress

Copyright © 2021 · BeMyAficionado by Varun Shrivastava · WordPress

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.