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