What is Gutenberg? An Introduction to the new WordPress Block Editor

Almost 580 years ago, a German man named Johannes Gutenberg invented the printing press through which the voice of people would have come alive on papers. It was one of the biggest catalysts for feeding the scientific revolution in the growing Renaissance. As a result, civilization received a big boost forward.

On 17th June 2017, a new revolution for WordPress users introduced. Yes, I am talking about Gutenberg, a WordPress plugin (till now) that brought a revolution to the customization of the WordPress posts so far. Still, as per the conversation with the lead members of Gutenberg Developers, Joen Asmussen, Tammie Lister, and Matias Ventura, Gutenberg is now the WordPress editor from just a page builder. 

Gutenberg has a vision of three sections. Accordingly, the first one has come out with a page builder facility with a block editing system as per the latest commit on 12th September 2018. On the other hand, the second and the third phases Gutenberg will be modified as page template design and a full site editor, respectively.

Gutenberg Recent Updates:

The Gutenberg phase 2 has expanded the idea of page builder ahead to entire WordPress website customization. Why limiting to a page builder only while it can offer such features and the ability to work as the WordPress editor. Nowadays authors focused on eliminating significant obstacles like adding navigation, multiple layer abstraction, etc. 

However, the most prioritized task in phase two was improving usability, reducing technical difficulties, also making Gutenberg super accessible for the users without coding and technical expertise. 

Currently, Gutenberg authors are continuing their phase 2 with nine priorities:

  • Creating a block for navigation menus.
  • Port all existing widgets to blocks.
  • Upgrade the widgets-editing areas and the Customizer to support blocks.
  • Provide a way for themes to visually register content areas, and expose them in Gutenberg.
  • Merge the site health check plugin into Core, to assist with debugging and encourage good software hygiene.
  • Provide a way for users to opt-in to automatic plugin and theme updates.
  • Provide a way for users to opt-in to automatic updates of major Core releases.
  • Build a WordPress.org directory for discovering blocks, and a way to seamlessly install them.
  • Form a Triage team to tackle our 6,500 open issues on Trac.

Source: https://wordpress.org/about/roadmap/

Nowadays, the Gutenberg authors are working on phase 2 and have made their plans for the 3rd and 4th phases. According to the WordPress official website that in the 3rd phase, they will work on a Multi-User Editing system. Whenever they complete the 3rd section, they wish to contain support for multilingual sites in the 4th phase.

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Gutenberg Handbook
Gutenberg, Gutendev, WordPress
Johannes Gutenberg

Inside Gutenberg Editor

So, what will you get in Gutenberg? Well, it started its journey as a pretty much post editor, as stated earlier, but it has added many more things as a WordPress user you require nowadays. In Gutenberg, you can find lots of blocks! Not only that, it currently functions as a complete WordPress editor.

Update: According to wordpress.org, until January 2020, Gutenberg has been downloaded for 13.5 million times! This number quite states a lot of things clearly.

Blocks will help you to design your entire post without any use of codes! The concept of blocks is almost five years old. In 2003, WordPress integrated Blocks to omit the learning of widgets, shortcodes, or custom code. When you are using blocks, all you need to learn is the interface.

Block Editor

If you know what a block does, you can create your post; however, you want. I must mention that the advanced developers use the critical code, but for the general users, Gutenberg has wholly reduced the struggle to code.

Currently, all the basic blocks are available for the posts. Blocks like Text, Media, Layout, Quote, Code, etc. are the most used blocks while writing a blog post. However, in the future, inevitably, the users will need some more blocks.

You may need some blocks that can customize the whole page or even the entire website; don’t worry, the Gutenberg team is working every day for that issue. Or, you can develop your block if you have an in-depth knowledge of JavaScript. I will refer to the Tutorial section of our website if you are interested in such a development.

In this section, we will discuss what you can do using Gutenberg. To install Gutenberg, please go to [some link to the Post]. On your WordPress dashboard, click Post and select Add New to get started with a new post with Gutenberg customization. You will see the following page. 

Gutendev, Gutenberg
First Look: Gutenberg

Block Settings

You can add a block clicking the + sign from the left top or the + sign under the Add title block. First of all, you cannot change the Add title block. WordPress Gutenberg editor significantly keeps the control of that header block. 

On the right side of the page, you can find a list of settings related to the Block you choose or for the entire post. The Document tab will allow you to customize some features of the post, such as setting a featured image, post’s visibility, allowing comments Pingbacks & Trackbacks, or even if you want to stick the post to the front page. See the following image for reference.

Block setting, Gutendev,
Setting of a block

Let’s add some blocks and see what happens. Let’s select a Quote Block and write a quotation there. On the bottom of the block, you will see you can also add the citation of the quote. 

Quote block, Gutendev, Gutenberg
Quote Block

From the three dots of the Quote Block, you can get more options and settings of the block, depending on the block’s type. If you want to edit the block using HTML, you can select Edit as HTML from the More Options menu. See the following image for the difference between the visual and HTML view of a Quote Block. 

Editing in two ways

HTML and Visual , Gutendev, Gutenberg
Difference between the HTML and Visual Editor

Adding Custom CSS

When you select a block, you can see the setting of the block on the right side of the panel. If you want to change the style more, you can add custom CSS for every block. For the Quote Block, the setting will be as follow. 

Add custom css class, Gutendev,
Add Custom CSS Class

Let’s change something using Additional CSS Class for our Quote Block; In the Block tab beside the Document tab (while selecting the block), name an Additional CSS Class. In our case, we are naming it as myClass. Publish the post and go to Appearance > Customize. From the left sidebar, select Additional CSS

Adding Custom CSS from Customizer, Gutendev,
Adding Custom CSS from Customizer

You will get a blank editor where we need to add our custom CSS. Let’s include the following CSS to our Additional CSS section. 

Learn more about Gutenberg from our special video tutorials: 2 Minutes Gutenberg Tutorials

Leave a Reply

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