• Skip to main content
  • Skip to primary sidebar
BMA

BeMyAficionado

Inspire Affection

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

July 8, 2018 by varunshrivastava 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.

Table of Contents

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

Related

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

Primary Sidebar

Subscribe to Blog via Email

Do you enjoy the content? Feel free to leave your email with me to receive new content straight to your inbox. I'm an engineer, you can trust me :)

Join 874 other subscribers

Latest Podcasts

Recent Posts

  • Is The Cosmos a Vast Computation?
  • Building Semantic Search for E-commerce Using Product Embeddings and OpenSearch
  • Leader Election with ZooKeeper: Simplifying Distributed Systems Management
  • AWS Serverless Event Driven Data Ingestion from Multiple and Diverse Sources
  • A Step-by-Step Guide to Deploy a Static Website with CloudFront and S3 Using CDK Behind A Custom Domain

Recent Comments

  • Varun Shrivastava on Deploy Lambda Function and API Gateway With Terraform
  • Vaibhav Shrivastava on Deploy Lambda Function and API Gateway With Terraform
  • Varun Shrivastava on Should Girls Wear Short Clothes?
  • D on Should Girls Wear Short Clothes?
  • disqus_X5PikVsRAg on Basic Calculator Leetcode Problem Using Object-Oriented Programming In Java

Categories

  • Blogging
  • Cooking
  • Fashion
  • Finance & Money
  • Programming
  • Reviews
  • Software Quality Assurance
  • Technology
  • Travelling
  • Tutorials
  • Web Hosting
  • Wordpress N SEO

Archives

  • November 2024
  • September 2024
  • July 2024
  • April 2024
  • February 2024
  • November 2023
  • June 2023
  • May 2023
  • April 2023
  • August 2022
  • May 2022
  • April 2022
  • February 2022
  • January 2022
  • November 2021
  • September 2021
  • August 2021
  • June 2021
  • May 2021
  • April 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • February 2020
  • December 2019
  • November 2019
  • October 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • January 2019
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016

Tags

Affordable Hosting (4) algorithms (4) amazon (3) aoc-2020 (7) believe in yourself (4) best (4) database (4) earn money blogging (5) education (4) elementary sorting algorithms (4) experience (3) fashion (4) finance (6) Financial Freedom (7) food (7) friends (3) goals (5) google (5) india (10) indian cuisine (5) indian education system (4) java (16) life (16) life changing (4) love (4) make money (3) microservices (9) motivation (4) oops (4) podcast (6) poor education system (4) principles of microservices (5) problem-solving (7) programmer (5) programming (28) python (5) reality (3) seo (6) spring (3) success (10) success factor (4) technology (4) top 5 (7) typescript (3) wordpress (7)

Copyright © 2025 · Be My Aficionado · WordPress · Log in

Go to mobile version