What is Gutenberg?

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 and was one of the biggest catalysts for feeding the scientific revolution in the growing Renaissance. On 17th June 2017, a new revolution for the WordPress users was introduced. Yes, I am talking about Gutenberg, a WordPress plugin (till now) that brought revolution the customization of the WordPress post so far. You can call it a Page/Post Customizer for now but as per the conversation with the lead member of Gutenberg Developers, Joen Asmussen, Tammie Lister, and Matias Ventura, Gutenberg is far from just a page builder. It has a vision of three sections and the first one has come out with a page builder facilities as per the latest commit on 12th September 2018. In the second and the third phases will be as page template design and full site customizer respectively.

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 you will get in Gutenberg? Well, it is now a pretty much post editor for now as stated earlier but it has much more things you might need. In Gutenberg, you can find lots of blocks! Blocks will help you to design your entire post. The concept of blocks is almost 5 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. If you know what a block does, you can definitely create your post however you want. I must mention that the usages of hard code will be needed for advanced developers but for the general users, the struggle to code will be reduced by using Gutenberg.

Currently, all the basic blocks are there to be added to a post. Blocks like Text, Media, Layout, Quote, Code etc. are the most used blocks while writing a blog post. But, in the future, we will, of course, need some other blocks. You may need some blocks that can customize the whole page or even the whole website; don’t worry the Gutenberg team is working every day for that issue. Or, you can develop your own block if you have a deep knowledge of JavaScript. I would 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. For installing 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 Setting

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. On the right side of the page you can find a list of settings related to the Block you choose or 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, Gutenberg
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 3 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, Gutenberg
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, Gutenberg
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.