The Ultimate Guide to Use Gutenberg

WordPress 5.0 has introduced Gutenberg, a new block editor. It is more than an editor and works differently. A classic editor is sooner to be replaced by Gutenberg so knowing Gutenberg might help you shortly.

If you have been already using Gutenberg and facing trouble using it then, this article will guide you on how to use the Gutenberg editor smoothly. Also, introduce the Gutenberg blocks system and introduce the most useful blocks included in the new editor.

So, let’s get started!

Introduction to Gutenberg

Gutenberg is a new WordPress editor released in WordPress 5.0 that is designed to build rich posts and beautiful layouts in a few clicks. It allows having more control over the layout of the content of your posts and pages.

Gutenberg is all about blocks that include simple elements such as text, images, galleries, widgets, shortcodes, videos, buttons, and many more. You do not need any page builder plugins to create pages and posts.

To have a clear understanding of Gutenberg, you need to know how it differs from the classic editor in the first place. So, here it goes!

Classic vs Gutenberg Editor

The Classic and Gutenberg look different looks-wise and much more different if you look deeply into each editor. The main difference between classic and Gutenberg is the editing style. That is why Gutenberg is also known as a block editor.

Classic Editor

Gutenberg Editor

Performance

Gutenberg is smooth in performance whether for adding and editing text, images, blocks, and even galleries. The classic editor also has no issue performance-wise.

Usability

A classic editor helps to simply get in and create the content and get the work done whereas Gutenberg might get easier for newer WordPress users than the classic. You can insert galleries and covers directly no need to enter “add media” and create galleries.

Search

Less technology-friendly users can also get familiarize themselves with complex elements in Gutenberg.

Now, let’s have some ideas about Gutenberg’s Blocks.

Gutenberg’s Blocks

Each block comes with a unique setting and can be changed to any type. These blocks can be placed in any order you like. Blocks also have additional setting options such as hiding block settings, duplicating, inserting before or after, editing HTML, adding to reusable blocks, and removing blocks. Any changes made in blocks are immediately visible. You can find detail about Gutenberg below.

1. Text Blocks

The text blocks include the following blocks:

Paragraph -This block lets you add simple text to WordPress. You can use basic formatting for bold, italic, alignment font size, color, and background.

List Block- It allows you to add bulleted or numerical lists.

Heading Block- Split your page into sections and add a few styling options using a heading block.

Subhead Block- You can call attention by using a subheading block.

Table Block- Use this block to display numbers, comparison, and tabular data

Button Block- You can create a button within your content and provide a link to another URL

Classic Block- It brings back the old editing features of WordPress, a classic editor.

Text Columns Block- This block can create multi-column layouts including text only

2. Media Blocks

Image Block- Insert image with caption and/or link anywhere you like.

Cover image Block- With the cover image block, you can display a heading over the top of a background image.

Gallery Block- Share a group of images in a gallery-style format

Audio Block- Upload mp3 files and play them back with a simple audio player

Video Block- Upload video files and play them directly on your website.

Embed Blocks- Add videos, images, tweets, audio, and third-party sources to post or page

Shortcode Block- Insert a shortcode easily on your WordPress post or page and add functionality to a site

3. Quotes Blocks

Quote Block- You can include others’ work and cite. Two different styles are available for displaying quotes

Pullquote Block- Call attention by choosing existing text from content in a graphical way.

Verse Block- Write poetry and other literary expression using spaces and line breaks.

4. Code Blocks

Code Block- It maintains spaces and tabs, and allows you to write HTML, CSS, JavaScript, PHP, or any type of technical code.

Preformatted Block- Keep all spaces and line breaks intact and display text exactly as you type.

Custom HTML Block- Add any custom HTML code and see a preview right in the editor.

5. Layout Blocks

The layout blocks consist of blocks such as columns, media & text, buttons, page breaks, separators, spacers, and more blocks.

Columns Block- Multi-column layouts can be created and include other Gutenberg within each column

Text columns Block- Create a multi-column layout for text content only

Separator Block- Make theme differ from one to another, Use a separator to indicate a change in the content

Read More Block- Break your content using the “read more” block.

 How to use Gutenberg blocks to create a WordPress post?

There is the new Gutenberg editor by default if your site is updated to WordPress 5.0. Assuming you have already updated your site we are going to walk you through how a basic WordPress post can be created with Gutenberg in three steps.

 1. Add a block to your post

The first and foremost task is to provide a title for a blog using the respective field at the top of the editor. The insertion of the title is similar to the classic editor.

You can see the plus icon below the post’s title from which you can select Gutenberg blocks and add to the post. On the right, you can see the most used blocks such as the text, image, and gallery options.

When you click the plus sign, a new menu appears which includes the most used options such as paragraph, image, heading, gallery, list, quote, audio, cover image, and file.

2. Customize your block

When you start typing in a block, you can see new options. Some basic formatting settings include alignment, italics, and bold. Clicking on the right-hand sidebar of the editor screen, you will find more block-specific options. You can further add a drop cap, font size, and color and even include custom CSS. Any changes made are immediately visible.

Different blocks offer different options. You can try on adding image blocks by using the same plus sign.

3. The final touch to the blog

When you finish inserting an image or any content, you can start editing or modifying your content layout further. If you want to delete a block, select the “Options icon” above the block and click on “Remove block.” Choose any options you need and have the desired layout ready. You can also rearrange your blocks as per your requirement.

Conclusion

WordPress 5.0 has made Gutenberg a default editor for WordPress sites but you can still use classic editor if you want to. The best way to understand and be familiar with Gutenberg is to try it out. We hope that this article will be helpful to know Gutenberg better.

If you have any queries please feel free to ask them in the comments below.