WordPress Gutenberg

How To Use WordPress Gutenberg Editor’s Blocks To Beautify Content?

Tools

The WordPress Gutenberg Editor is a surprise package for you…

Yes, you will LEARN something new!

The Good News?

In this step by step tutorial, we will show you everything you need to know and You’ll be able to reach the ground blogging 😉

What is Gutenberg WordPress?

WordPress Gutenberg blocks editor is the most used Editor with its latest WordPress version 5.0.

The new editor overtakes many editors!

The whole editing criteria has changed from a text area where you can add images and videos, to be an entirely modular interface full of blocks that you can combine together to build designs on your blog posts or landing pages.

➪ Old WordPress

Old WordPress

➪ New WordPress

New WordPress Gutenberg

The fact is, there are ample of minor changes, the overall experience will be almost similar to what you’re familiar with.


Why WordPress Gutenberg is Now a Great Way to Build Websites?

Do you know Gutenberg WordPress was launched last year and mature enough to build the exact website that you had planned?

Gutenberg editor uses blocks to build your web pages. Blocks are entities that contain different types of content so that you can create your structures.

Will WordPress Gutenberg Work With My Current Theme?

Gutenberg WordPress editor has designed to work with all themes and all plugins!

Luckily, theme creators have been updating their themes to not only be compatible but also optimized for Gutenberg blocks.

Here’s a List of All the Gutenberg WordPress Blocks You Can Use in a Blog Post:

Note: If you are an average blogger then this WordPress Gutenberg Editor is only 4-5 blocks you need to know about, and they all are very simple.

Paragraph block

Headline block

Image block

Quote block

Embed block (YouTube videos, etc)

Overview Of WordPress Gutenberg

➤ Text blocks:

Paragraphs

Lists

Headings

Subheads

Quotes


➤ Media blocks:

Images

Cover Images

Image Galleries

Audio

Videos

Embeds


➤ Code blocks:

Custom HTML

Code (for displaying code)

Pre-formatted

Shortcodes


➤ Layout blocks:

Columns

Page Breaks

Separators

Spacers


Build Your First WordPress Gutenberg Project

Ready?

Let assume that you are using WordPress Gutenberg Plugin 5.0 and the new block editor i.e Gutenberg. Below, I will show you how you can use the new WordPress Gutenberg block editor to make a complete page layout.

Get Started With Video Gutenberg Tutorial

A Quick Tour To WordPress Gutenberg Block Editor Platform

Before you start adding new blocks, let’s have look on Gutenberg WordPress elements of the main block editor interface:

wordpress elements

How to Add a Block in WordPress Gutenberg?

The very first block of every post is the title.

After that, click on the tab key on your keyboard which will automatically create a paragraph block. Moreover, you can click the +Plus icon and select the type of content you want to add.

You can also change the text size in text settings on the right side by selecting a particular paragraph block:

Default

Small

Normal

Medium

Large

Huge

Custom

Wordpress paragraph block

To save your time, you can also create blocks by simply writing this syntax:

/BLOCK-NAME

It will show you an auto-suggest box that will help you to find the required block.

➤ In the above example, I showed you how you can add a paragraph block. But Gutenberg contains multifarious blocks, divided into different sections:

Mostly Used WordPress Elements

➤ Firstly, at the top, you will see a list of your Most Used blocks. When you scroll down, you will find sections for Common Blocks, Formatting, Layout Elements, Widgets, and Embeds:

Wordpress Gutenberg Widgets

↱ Inline Elements – It contains one block for an inline-image.

↱ Common Blocks – contains basic blocks like images, paragraphs, headings, quotes, many more.

↱ Formatting – you can add more formatted content like pull quotes, tables, or other.

↱ Layout Elements– let you divide the text into two columns, include buttons and separators.

↱ Widgets – One can add shortcodes, latest posts, or categories.

↱ Embeds – help you embed content from sources like Twitter, YouTube, Facebook, Instagram, etc

↱ Reusable – you can store groups of blocks as a reusable layout.

Building a Basic Layout With WordPress Gutenberg

Let’s suppose, you want to make a basic blog post layout that includes:

Regular text

An image

A quote

A YouTube video

Adding the Non-Text Blocks

➤Your content is separated into blocks, now you can hover over the area where you want to insert your image. Click the plus icon to insert the image block:

Gutenber upload image

➤This process will allow you to insert an image block, from where you can easily upload images in a similar manner:

Wordpress gutenberg

➤Once you choose your image, you will see it right there in your page layout:

Upload image

➤After that, hover over the area where you want to add the pull quote. You can search for “quote block” or go to the Common Blocks section:

Wordpress gutenberg quote

➤Then, you will see the quote block. To create your quote, you need to click into the quote block and type:

Wordpress gutenberg quote style

➤To insert a video, you need to add a new block for youtube video from the Embeds tab. To insert a video, all you have to do is enter the video URL and click Embed:

Gutenberg wordpress embeds

➤Once you’re finished, click the Publish button:

Publish WordPress Gutenberg site

➤Finally, you will get your formatted blog post on the front-end.


How To Create A Gallery In WordPress?

➤ Click on the +plus button and select Gallery from the given options. After that, select all the images you want to choose for your gallery and finally, click on Create a new gallery in the bottom right corner.

Gallery WordPress Gutenberg

Image Gallery Appearance In Gutenberg WordPress

➤ This gallery block is similar to the image block.

WordPress Gutenberg image gallery

How To Add Cover Images In WordPress Blog?

➤ Find a cover block from the search bar and then upload the image you want to use. You can also drag and drop an image in the block area to upload a new cover image.

WordPress Gutenberg cover image

Cover Images Appearance In WordPress Blog

➤ It will look like this…

WordPress Gutenberg cover image apperance

How To Add YouTube, Twitter, Facebook, And Other Embeds?

➤ Gutenberg launched a new embeds block in the WordPress. This block supports all kinds of embeds like YouTube, Twitter, Facebook, and more. Simply search embeds in the search box and you will get all the embeds.

WordPress Gutenberg embeds videos

Yoast HowTo Block

➤ HowTo is a step by step procedure that explains how to get results by performing a sequence of steps. For instance, how to make a cake?

How To Add Yoast How-To Block In Your Blog?

➤ You can search for the block from the search box and can add your how-to block anywhere you want.

yoast how-to Gutenberg WordPress

Yoast How-To Block Appearance On Your Screen

yoast how-to appearance wordpress

➤ In this how-to block, You can add:

Total time to complete the particular task

Overall Description of the steps

Enter step title and step description

An image per step


Yoast FAQ Block

➤ This is the block where you can ask all common questions about a service, product or company.

How FAQ Pages Appear In The Google Search Results?

➤ Your FAQ pages will appear like this…Imagine what you can do with this!

yoast FAQ Gutenberg WordPress

How To Add FAQ In WordPress With Yoast SEO?

➤ Open the page where you want to add the FAQ. Hit the +Plus button and search for FAQ and add it. The FAQ block will automatically appear on your page.

Add yoast FAQ Gutenberg WordPress

Yoast FAQ Appearance in WordPress Editor

yoast FAQ appear Gutenberg

Fill the block with questions and answers…


How To Customize Individual Blocks?

WordPress Gutenberg editor includes an ample of different blocks, so I can’t give you an example for each individual block.

But I can show you a basic framework that applies to all blocks.

➤Basically, you can control the content in the body of the editor:

Text styling WordPress

➤For text styling and alignment, you need to use the menu bar that pops-ups when you hover over a block:

WordPress Gutenberg text


How To Rearrange Individual Blocks?

➤To rearrange the blocks, you have two options. Either you can use Up or Down arrow while hovering over a block to move it to a particular direction:

Rearrange WordPress Gutenberg blocks

➤You can also drag and drop the blocks. To activate the drag and drop functionality, you have to hover your cursor over the six dots between the up and down arrows.

Image Drag and Drop

Create Reusable Block Templates

If you have a specific collection of blocks that you want to reuse in multiple posts, then you can save a group of blocks as a reusable template.

To Create Your Template:

Select the blocks that you want to include

Click the three dots icon

Select Add to Reusable blocks

Blocks reusable WordPress Gutenberg


Keyboard Shortcuts For The Gutenberg WordPress Editor!

When it comes to digital marketing and blogging, I think efficiency is very much important. That’s why I always prefer to use shortcuts in every website builder I use.

Awesome keyboard shortcuts that you can start using to enhance your WordPress skills.

Add Blocks Quickly With /

Undo Your Last Action With Ctrl + Z

Remove A Block Quickly With Alt + Shift + Z

Add Block BEFORE Current Block With Ctrl + Alt + T

Add Block AFTER Current Block With Ctrl + Alt + Y

Duplicate Current Block With Ctrl + Shift + D

Scrolling Through Blocks With Tab


Last Words

We have covered a lot of things here, but it only scratches the ground level of what you can do with Gutenberg Editor. ! So get ready and make your first website with the help of WordPress Gutenberg tutorial and make your content beautiful and readable.

Leave a Reply

Your email address will not be published.