Gutenberg Blocks: What They Are And How To Use Them In WordPress

Back in December 2018, WordPress 5.0 version came in one major update called the Gutenberg editor, which is a replacement for the old classic editor. It introduces a new plus handy approach to creating content in the form of blocks.

With this major update, now content creation has become much easier, as you can simply switch out blocks instead of using code to add different elements to your web pages. Actually, it’s an evolution that will lead you to wonder how you created your website’s pages without it!

That is why, today, in this comprehensive guide, we are going to show you what Gutenberg blocks exactly are and how to use them on your WordPress site. So, if you want to make the most out of the Gutenberg blocks, keep on reading this guide.

What Are Gutenberg Blocks?

This is what the Gutenberg editor or “WordPress Block Editor” looks like, which can completely change your editing experience with its block-based approach. It comes with a blank title block, text block, and (+) icon, which is the block inserter.

The Gutenberg editor comes in pre-built elements, which are also called “Blocks,” which you can add to your post or page to customize your content. This feature helps you to create content in a more visual way than the previous TinyMCE editor. You can access all its blocks by clicking on the (+) icon.

From the right-side menu bar, now, you can access the Block tab, and using this tab, you can edit the individual block with several customization options and freedom in terms of design. Still, you will have the option to add custom CSS.

All these features offer a truly modular approach to page design and content creation. Undoubtedly, this editor is a very powerful, effective, yet really user-friendly system.

The best and most powerful part of Gutenberg editor is that it allows you to use different plugins to add new blocks to the editor to enhance your page-building experience. Though some of your favourite blocks are already added to this editor, still, you will get to use some of the best WordPress Gutenberg blocks plugin that is solely focused on adding unique blocks.

For example, with the Gutenberg post blocks plugin, you can display your website posts with a professional, elegant, and unique look by adding a post grid and filters. This will help you to provide a clean, well-organized, and user-friendly website to your users.

Beginners who just started blogging or building a website will find this Gutenberg editor and blocks really easy to use and experiment with. That being said, let’s move forward to learn how to use the Gutenberg blocks in WordPress.

How To Use Gutenberg Blocks In WordPress?

One of the best things about the Gutenberg editor is its ease of use. It is commendable that the developers have been able to add many advanced features to the system without making it difficult to use.

You can still create a page using this default block editor and its advanced block in minutes. Additionally, now you have the advantage of going much deeper without requiring a line of code or seeing a shortcode. And these are the things that make the Gutenberg Blocks so useful.

The WordPress Gutenberg editor comes in a ton of different blocks, and each block has its own customization and setting options. That’s why it’s actually not possible to show how each of the plugins works. Still, we’ll share the basics and a framework that works for all the blocks so that you can get an idea about using them.

So, let’s have a look at how you can create a basic WordPress post using the Gutenberg blocks.

Step 1: Adding A Block To Your Post

So, the first thing that you need to do is click on the “Posts” tab from your WordPress dashboard, and then choose “Add New.” Now, start by giving the post a title.

Just below the title field, you will get to see another field; type your post or choose a block. And, then the (+) icon, which lets you see and access all the Gutenberg blocks and add them to your post.

So, click on the (+) icon, and you will get to see some of the blocks. To see all blocks, simply click on Browse all.

Also, you can click the (+) icon from the top bar; this will display all the Gutenberg blocks, which are included in the editor.

Once you click on the top (+) icon; it will show you a dropdown menu including a number of organized block categories like-

• Text – Includes paragraph, heading, list, quotes, table, etc
• Media – Image, gallery, audio, video, cover, etc.
• Design – Buttons, columns, group, row, separator, etc.
• Widgets – Archives, latest posts, page list, shortcode, social icons, latest comments, etc.
• Theme – Query loop, site logo, site title, post excerpt, post author, post featured image, post content, and many more.
• Embeds – YouTube, Twitter, WordPress, Vimeo, Reddit, and go on.

Also, there is a search bar that helps you to find your required block quickly.

To add the block to your post, all you need to do is, find the specific block and click on it. So, let’s start with a table block. Now, as you get all the blocks, find the table block and click on it. And then move to the next step.

Step 2: Customizing The Block

Once you click on the table block, the following box will appear in your editor. Add the number of columns and rows you need to add to your post, and then click on the “Create Table” button.

After that, the table including a top toolbar will appear; you can do some basic customization by using this toolbar. For example, you can choose the style of your table between the default or stripes, align the columns and row position, and many more.

Not only this, but when you add the table block, you will get many more block-specific customization options in the right sidebar Block menu of the editor screen. From the table setting, to set the colour and typography, you can set them as your own.

Best of all, with this editor, you can see all the changes that you make, either on the block itself or on the right-sidebar Block menu.

Note: Each Gutenberg block comes in its own unique settings and customization options. Let’s understand this with an example.

So, once you are done with the table, hit the enter button, and the (+) icon will appear again below the Table block. So, following the above process, add another block. Here, we will use the image block.

As you can see, once we choose the image block, this box appears, which allows you to add an image to your post either by uploading or from the media library or inserting it from the URL. So, once you add the image, immediately, you will get the specific customization top toolbar and right sidebar Block menu bar for image block.

Now, you can start editing the image as your requirement by transforming the image into columns, group, or gallery and then aligning its position, cropping it, adding text over the image, or using all the other options.

This is how you can add as many blocks as you need to your posts and then customize them in accordance.

Step 3: Give A Final Touch To Your Post

Once you have done adding the blocks, now, it’s time to make some modifications. And the best part is, with Gutenberg editor, you will find it really easy and flexible to modify the content layout. For example, if you want to remove any block from your post, simply click on that block, and you will see a three-dot icon at the right corner of the top toolbar.

Once you click on the three-dot icon, all you need to do is, navigate straight to the bottom of the dropdown menu and hit the Remove (specific block name) option.

If you want to rearrange the blocks, simply hover over that block and use the up and down arrow. Another way you can click on the six-dot icon; this will let you drag and drop the block.

Besides that, if you want to reuse any specific block that you have arranged in multiple spots, you can use the “Add to reusable blocks” option.

Then, you just need to name the reusable block and hit the save button. And then, you can get this reusable block by clicking the top (+) icon.

Now, let’s learn some advanced tricks for using Gutenberg blocks-

1. You can add a new block just by typing this syntax, /BLOCK-NAME. Once you start typing the block name, an auto-suggest box will appear, you just need to select the relevant block from the suggestions. It is the quickest and time saver way to add a block.
2. Click on the three-dot button from the top right corner of your editor. It includes several modes, editor options, and tools to make your content creation process faster and smoother.
3. The Gutenberg editor comes in a number of dedicated keyboard shortcuts. You just need to use the Shift + Alt + H shortcut, and you will get the full keyboard shortcut list. Also, you can follow the below image.
4. There is a block outline button at the top of the editor, which allows you to navigate to specific blocks quickly. It is especially required if you nested multiple blocks inside one another, for example, if you use content blocks inside a column block.
5. When you click the top (+) icon, you will see another option called pattern beside the blocks. This block pattern is actually a template that you can use to design as a starting point.

Step 4: Publish The Post

Once you’re finished with all the changes and customization, all you need to do is click the Publish button, and it will be done.

Conclusion

Gutenberg blocks are one of the excellent, effective, and most useful evolutions of WordPress. In addition to including a lot of things, the best part about this editor is that it is really easy to use and understand, which is very helpful for beginners.

With the Gutenberg blocks, you can undoubtedly provide users with more experienced or design-based posts that will give you an opportunity to stand out from the rest. We hope, with this guide, now you know what Gutenberg blocks are and how to use them in WordPress. So, start styling your posts and make the most out of these blocks.

Also, See:

• 7 Reasons to Start a Blog Today
• How to Get a STEPN Activation Code
• A Blog or A Website, Which Should I Consider?

Found this post helpful? Please, do help to share.