Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

The Gutenberg Blocks Collection Overview

ABOUT THE AUTHOR

I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

What is Gutenberg WordPress editor?
Prew post
  • Feb 05, 2020
  • 4 min read
  • 631

The Gutenberg Blocks Collection Overview

From this quick and simple tutorial, you will learn what are Gutenberg blocks and what Gutenberg blocks collection includes. As a result, you will also learn how to apply nested and reusable blocks in the Gutenberg editor. 

It’s not a secret, that the Gutenberg editor blocks, above all, provide a new wide approach to website building and allows you to create your own unique site structure. The main advantage is about building a custom WordPress page with Gutenberg blocks collection. You don’t need a line of code to do it. You become completely able to power-up your pages even if you have a bare-bones simple WordPress installation. 

Additionally, you may check this video to quickly go through the functionality of Gutenberg blocks, and the ways to use block groups and reusable blocks.

How do the Blocks for Gutenberg Work Under the Hood?

Above all, let’s demystify the Gutenberg editor blocks. Basically, they are chunks of content, with the help of which you can create any website, from a contemporary blog page to a multipurpose online store. Blocks for Gutenberg were created to expand the functionality and let us work with the structure.

Firstly, let’s jump into the editor and explore how the Gutenberg blocks collection composes the page. There are a few ways of accessing Gutenberg blocks in WordPress:

  • The most simple way is to press “Enter” on the keyboard and make a new paragraph. After that, you will be automatically offered to add a Gutenberg block. All you need to do is just press the “+” icon.
Add block from Gutenberg Blocks Collection
  • Similarly, click on the “+” icon, which is located at the upper left corner of the editor field.
Add block from Gutenberg Blocks Collection
  • You also can add a block above the chosen one. Hover above any block and press the “+” icon.

Basically, each Gutenberg block gives you a few various possibilities, let’s take a quick look at them.

  1. You are able to transform your block to some other blocks, such as heading, quote and a lot more.
  2. Also, you can set the alignment of the block in one click.
  3. Make your text bold or italic.
  4. Add a link, inline image, code or strikethrough in the same way.

Create a Website Structure in no Time with Gutenberg Editor Blocks

Obviously, you may wonder, how else can you speed-up the process of website building and make it an enjoyable journey. Check out the list of the default Gutenberg blocks:

Paragraph blockGallery blockHeading block
Quote blockList blockCover block
Image blockAudio blockVideo block
File blockColumns blockButton block
Spacer blockMedia and text blockPage break block
  • Each Gutenberg block has a set of options above, where all the basic settings are gathered to take the hassle out of your work. Firstly, add a link, work with text elements, add an inline image –  it’s up to you!

The ability to transform each block into at least three other ones comes in one click

  • If you click on the three-dotted icon, as a result, you face the list of additional opportunities according to your Gutenberg editor blocks, from inserting blocks to editing as HTML.
  • In addition, one more block-specific option is adding a custom CSS class for your Gutenberg block.

What are the Nested Blocks and How to Make Your Blocks Reusable?

Sometimes you need to move a block around the page or add the block, which already contains a bunch of content, to another page. This process is super easy. Let’s imagine you have, for instance, an encouraging heading, which stimulates people to subscribe, and a call-to-action button with the related text.

Add a button in Gutenberg block

Agree, it’s quite tedious to move the blocks separately. What we need to do is to move a few blocks into more than 5 sections on more than 5 pages. The Gutenberg blocks collection allows you to make your blocks nested, which will solve this annoying problem!

  • Firstly, to add a Group, simply click on the “+” icon and type the “Group” text into the search field.
  • Add the group and drag and drop the needed Gutenberg blocks inside it.

As a result, now you can move the related blocks together! Although, you still need to add the group on various pages. It’s time for the reusable Gutenberg editor blocks! Creating a reusable block is easy as pie.

  • Select the group of blocks and click on it. The additional panel will appear above it.

Click in the three-dote icon and find the “Add to Reusable Blocks” tab

  • Give a name to the newly created reusable block and click on the “Save” button. Now you can use it all over the website! You can always find it at the bottom of the blocks dropdown.
Give the group of Gutenberg blocks a name

Now you know what are the Gutenberg blocks and how to use Gutenberg blocks on the WordPress website. Stay with us to see more useful tutorials and instructions!

6
Appreciate
Gutenberg Landing Page - Planning Out a Layout
Next post
What is Gutenberg WordPress editor?
Prew post
Gutenberg Landing Page - Planning Out a Layout
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.