The Ultimate Guide to Use Gutenberg
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 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.
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.
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.
Less technology-friendly users can also get familiarize themselves with complex elements in Gutenberg.
Now, let’s have some ideas about 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.
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.
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 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, 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 heading over the top of a background image.
Gallery Block- Share 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 videos 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 other’s 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
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 the block such as columns, media & text, button, page break, separator, spacer, and more 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
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
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
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.
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.