How To Use WordPress Gutenberg Blocks?

What does the 14th-century German inventor of block printing have in common with WordPress? Named after Johannes Gutenberg, The Gutenberg, the new editor in WordPress, is included in WordPress 5.0 by default.

Gutenberg WordPress plugin WordPress org

So, how does Gutenberg do things differently? Let’s find out.

How has the WordPress Editor Changed?

Gutenberg was launched with cutting-edge features to offer a simplified web creation and editing experience. You can use the visual editor to create a professional website and posts even if you don’t have much technical knowledge.

Gutenberg uses a collection of pre-built elements or blocks. Add blocks like paragraph, images, quotes and edit them easily. You don’t need to depend on short codes and HTML to make things work- just use the blocks to manage basic components like text and images.

You can also use advanced features to create tables and buttons.

Top New Features on the WordPress 5.0 Gutenberg Blocks

Let’s check out the top features of Gutenberg-

New Content Blocks

Blocks are the most highlighted feature of Gutenberg. You can use blocks like a paragraph, heading, cover image, gallery, columns and more to add content in easy steps. Each block comes with customization options to create posts the way you want them to look.

Add Texts Easily

Gutenberg focuses on “writing first” approach and makes it simple and easy to add text. You have a big space compared to the previous editor and less distraction to work on your posts. The settings allow you to format your text and customize it as per your preferences.

Add Button Directly

The new editor allows you to add buttons to your posts directly using the Button block. You can also customize the text of the button and include the URL it links to. For example, you can create buttons like “Join our mailing list” or “Sign up” and even choose the style of the button.

Easy Integration

Gutenberg easily integrates with a wide range of plugins including eCommerce ones. For instance, you can integrate Gutenberg with WooCommerce plugin without any hassle. Then you can create different product blocks like featured products, best-selling items and top-rated products with a few clicks.

How to Get Started with WordPress Gutenberg?

We will walk you through the process of creating a basic WordPress post using Gutenberg editor. Then you can apply the same approach to create any type of content you want on WordPress 5.0.

Step 1: Select a Block for Your Post

When you first open Gutenberg, you will see the option to add a title to your post on top. If you hover the cursor below the title, you will see few icons- a “plus” sign and text, image and gallery options.

You can select from a list of blocks by clicking the “+” icon. Just click on a block to add it to your post. Let us take the example of the paragraph block and see how it works. Click on the paragraph block to add it to the editor.

Step 2: Customize Your Block

Once you type in your text, you have several options to modify it. Basic formatting options like italics, bold and alignment appear in the block itself for easy customization. Use the sidebar on the right to set the font size, colour and even to include custom CSS codes. Each block in Gutenberg has unique settings for you to explore.

Add images to your post using the image block. Just upload a new image or use a current one from your media library. Or, use the settings in the sidebar to edit the image, alignment and include CSS.     

Step 3: Put Final Touches on Your Post

Make some final changes to the layout before you publish your page. Use the settings to delete a block or click on the arrows to move your block up or down. You can also click on the dots between arrows to take help of drag-and-drop feature.

The Document tab on the right sidebar allows you to access post-wide settings. You can find options to define an author, publish your post, choose categories and more. Gutenberg auto-saves your work from time to time, so you don’t need to save your posts separately.     

Do More with Fewer Plugins

Gutenberg helps you to create and manage your website without the need for countless plugins. Use the editor to do more, using fewer plugins to get the job done.

No Need for the Extra Table Plugin

Earlier, you needed an extra plugin to insert tables if you didn’t want to take up the tedious task of HTML coding. Now you can easily add tables to your post using the table block.

Just click the “+” sign in Gutenberg and choose Table block. You can easily set the number of rows and columns and even change the cell width and alignment.

Directly Add Rich Media

Gutenberg was developed to make the whole experience of adding rich media simple and enjoyable. You don’t need a separate plugin to add in YouTube videos. Easily insert images, galleries and videos in your post.

Choose the appropriate block and then add the media. You can even drag and drop your files. There is also an embed block to directly embed content from YouTube, Facebook, Instagram, Spotify, Dailymotion, Hulu and more!

Less Dependence on eCommerce Plugins

You can use different blocks in Gutenberg to set up a store on WordPress. For example, you can create a “Buy Now” button using the Button block in the editor. That means you need to rely less on eCommerce plugins making your job easy!

Final Thoughts

For now, you can still use the classic editor if you don’t like the hang of Gutenberg. But Gutenberg will be the future of WordPress and become the standard editor by 2021. It’s why site owners and designers need to take their time to get used to Gutenberg.

If you have any difficulty navigating Gutenberg or can’t understand how it works, you can take help of our customized WordPress training programs. We will teach you all the practical implications and help you find your way around Gutenberg. You can also take help of our WordPress consulting to help you run your business successfully.

Scroll to Top