In this post I am going to tell about the new WordPress Gutenberg editor and how it works. The new version of WordPress editor i.e Gutenberg editor is released with WordPress version 5.0 on December 6, 2018 as new content editor.

What is Gutenberg Editor?

Gutenberg editor is today’s modern block editor which replaced entire classic editor with feature rich blocks. We can say that it completely transformed the way old editor was working.

Lets see the new updates of Gutenberg Editor.

The Gutenberg WordPress editor has become simple for the users when compared to the WordPress classic editor. The updates in the new Gutenberg editor is, it will add the WordPress sites content cubes and page builder together. When compared to the classic editor, gutenberg editor has many assets where each block can be edited independently.

So, in this post you are going to learn about usage of blocks by this new editor.

Classic WordPress Editor

Now, we look on to the new Gutenberg editor

New Gutenberg WordPress Editor

Blocks in Gutenberg editor:

New WordPress block editor is an easy way to add several types of content utilising blocks into pages and to your WordPress posts. You are definitely going to love the blocks option in Gutenberg editor from WordPress. There are plenty of block types are available to select from which are organised in categories. So, lets see what are the blocks available in the new editor.

  1. Paragraph
  2. Heading
  3. Subheading
  4. Image
  5. Gallery
  6. Quote
  7. Audio
  8. Columns
  9. File
  10. Code
  11. List
  12. Button
  13. Video
  14. Audio
  15. Embeds
  16. More…

By clicking on the + button will display the cube menu with the search bar. You can check cube categories or search with a keyword in a search bar and then add blocks. There are several ways to put in blocks in posts and pages.

Blocks in Gutenberg editor

Below are the most used blocks in the editor.

Basic Blocks in wordpress Gutenberg editor

Some other blocks which are used in the editor are

Additional Blocks in wordpress Gutenberg editor

Now I am going to discuss about the main blocks used in the Gutenberg Editor.

Paragraph:

Paragraph in Gutenberg Editor

If, you want to write paragraph then select the paragraph option in the given table. By using colour settings you can change text colour and also have other feature to rearrange the text size and the format like Align left, right, centre, bold, italic, link, text settings, text colour, background colour etc.

Heading:

Heading in Gutenberg Editor

For writing heading select the heading block. Firstly, select the heading size, text formatting and align the text.

Image:

Image in Gutenberg Editor

For adding image select the image option. After selecting the image option you get upload, media library, insert from url options where you can select the image from those options. When adding an image, you can choose one of the three auto-formatted sizes, Thumbnail, Medium or Full.

Custom HTML:

If you want to add any custom HTML design for your post then you can use custom HTML block. Basically this feature is developers most favorite block that adds functionalities like custom styles and scripts to enhance your site.

Custom HTML in Gutenberg Editor

Table:

Add a table to your post or a page. You can select number of rows and columns for creating a table. You will still be able to add and remove columns and rows after the table is created.

Table in Gutenberg Editor


Along with above explained blocks (some are common blocks and others are formatting blocks) there are some other blocks like Gallery block which allows you to drag and drop pictures onto your page or post and the Gutenberg editor will auto create a Gallery for you.

You can find our WordPress Hosting that is specially tailored for only WordPress. Now you got to know what is gutenberg and its future rich features. So, this is the new wordpress editor that transformed designers and developers work flow into clean and simple structure. If we miss out something just let us know in the comments below.