The Ultimate Guide to Use Gutenberg

gutenberg-ultimate-plugin

WordPress 5.0 has introduced Gutenberg, a new block editor. It is more than an editor and works in a totally different way. A classic editor is sooner to be replaced by Gutenberg so having knowledge about Gutenberg might help you in the near future.

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

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, gallery, widgets, shortcodes, video, 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 at the first place. So, here it goes!

Classic vs Gutenberg Editor

The Classic and Gutenberg looks different on looks wise and much more different if you look deep 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

classic-editor

Gutenberg 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 also no issue in 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 as hiding block settings, duplicate, insert before or after, edit HTML, add to reusable blocks and remove 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, background.

gutenberg-paragraph-block

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

gutenberg-list-block

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

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

gutenberg-table-block

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

gutenberg-button-block

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

gutenberg-classic-block

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.

gutenberg-images-block

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

gutenberg-cover-image-block

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

gutenberg-gallery-block

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

gutenberg-audio-block

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

gutenberg-video-block

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

gutenberg-embed-block

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

gutenberg-shortcode-block

3. Quotes Blocks

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

gutenberg-quote-block

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

gutenberg-pull-quote-block

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

gutenberg-verse-quote

4. Code Blocks

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

gutenberg-code-block

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

gutenberg-preformatted-block

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

gutenberg-custom-HTML-block

5. Layout Blocks

The layout blocks consist of the block such as columns, media & text, button, page break, separator, spacer, and more block.

gutenberg-layout-elements

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

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

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

gutenberg-separator-block

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

gutenberg-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.
gutenberg-blog-post-process

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 most used blocks such as the text, image and gallery options.

When you click the plus sign, a new menu appears which includes 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

gutenberg-blog-post-process

When you finish inserting an image or any content, you can start editing or modify 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.