Best original WordPress blocks [Quick Overview]

We bring you a guide on how to use Gutenberg WordPress editor and blocks. Please read news about blocks changes which are coming in the very next 5.4 version. We have selected all the most often use blocks which are must be used on any website. Once released we will post more details on all features.

When WordPress had announced new Gutenberg editor back in 2018 we were excited about it. Now a couple of years later we see a huge improvement. Gutenberg WordPress editor is a great tool to create a website.

All of this standard WordPress blocks for Gutenberg editor are fully functional in our latest project Free Citadela WordPress Theme. You can use it on any website, please create an account and download it for free.

With AitThemes Citadela plugins, you can create specific content for a company, business, blog or non-profit website presentation. Or even start a new online business. The website speed and ease of editing website are the most important factors.

What is a block?

Gutenberg WordPress blocks are building units of the website. Each of them has its own special place and purpose. It’s very important to use the right WordPress block for a certain type of content.

But how do you find the most suitable block that fits your intent?

To help you better understand WordPress blocks, we’ve prepared this overview of the most popular ones.

Text content blocks

There are several blocks, which you can use to insert text content on your website. You can use several blocks. From WordPress 5.4 there is a new setting, you can change text color.

• Paragraph
• Heading
• Quote
• List
• Pullquote
• Table
• Verse
• Preformatted

Except this, you use Classic block which can be handier for a long paragraph.

Button block

Creating a compelling CTA button in WordPress has become super easy with Button block. You don’t need to enter custom CSS or understand HTML. You can – but don’t have to – enter hexadecimal code of your favourite color to make the button look nice and eye-catching.

Where to use Button block?

Once the web visitor gets to your website, you want to encourage them to take action. That’s what CTA buttons are for.

In general, there are 3 places where you should use the WordPress Button block:

• Homepage – to complete action that will lead to fulfilling your goal, such as sign up for newsletter, discover special offer deal or register for free trial.
• Product page – depending on how your product page is lead, there could be 1 CTA button (BUY) or more buttons, e.g. product details, buy, add to wish list, etc.
• Blog – CTA buttons could refer to another useful article or purchase of your product/ service.

Button block settings

In Inspector, on the right hand side, you can easily manage settings of your button:

• Style
• Background color
• Font color
• Border

Text written in your CTA button should be short and straight forward, encouraging the action you want your web visitors to take.

News coming in next WordPress 5.4 version (release 31st March 2020)

Button block is going to be replaced with new Buttons block.
You can assume from the new name, that you will be able to create more buttons beside one by one in one block container. Often there is a need to create two CTA at a time, for example: Buy Now and Read More. Also, some new style and colour settings are coming. Choose Fill or Outline style and then the colour of the background. You can choose Solid or Gradient background. Some presets as a starting point will be available for more effortless fine-tuning. The good news is that all existing buttons blocks will be working and no need to migrate them.

Columns block

Columns block is an amazing WordPress block that opens doors to new layouts. It gives you more options of page elements arrangements resulting in more design alternatives.

Working with Columns block is easy:

• No extra plugin installation.
• No coding required.
• All you need is a bit of sense for neat design.

In comparison to previous hassel you had to go through before the release of WordPress block editor, it’s super simple to use the Columns WordPress block.

How to use Columns block?

As indicated above, there are 2 ways the Columns block can be used:

• To organize the flow of your texts (in a blog post or on the regular page).
• To arrange other blocks into columns.

When organizing text into columns, e.g. within a blog post, you’re increasing readability and making your website more transparent & user friendly.

However, when you use Columns block to nest other blocks, such as images, texts and buttons, you’re altering the entire layout of your chosen page and creating new designs.

Column block settings

After inserting a Column block onto the page, choose how many columns you want. It can be any amount from 2 to 6 columns. Then you can start typing your text or adding blocks into each column.

Alignment of the content of your column block can be set separately for the entire block as well as individual columns. You can even choose the proportion of the column’s width. This way, one column can be wider than another.

Cover block

Let’s talk about the header of your website. It’s a section that defines the first impression when someone comes to your homepage. Kind of important, isn’t it? And did you know that Cover block can be used as a header on any of your pages?

Cover is the core WordPress blocks that helps you impress your web visitors. Especially when it is used right, or better to say, when it’s neatly integrated within your web design.

Where to use Cover block?

As mentioned above, Cover block can be used on any of your pages. Moreover, it can be added anywhere onto the page, unlike the header of your website that is fixed on the top of your website.

Cover block can be used as:

• Header of any page, including Homepage.
• Image or video overwritten by text used on product page.
• Content separator in blog post.

Cover block settings

Setting up your Cover block is very straight forward. First, choose an image or a video as a background. You can also use a single color instead. When you have your background set, add a title and subtitle. 

You can choose the alignment of the block, and of course, the alignment of the text within.

Cover block alignment offers the following options:

• Align Left
• Align Center
• Align Right
• Wide Width
• Full Width

My personal favourite is the color overlay which is available in the inspector – the Cover block background image can be toned to any color you want. Together with customized font size and color, you can create beautiful contrasts and final look of your cover block will be astonishing.

From WordPress 5.4 you can choose the gradient background instead of a solid one.

Gallery block

Showcase images on your website using Gallery block. This standard WordPress block has been designed to hold your images and display them nicely on any page of your website. Similarly to other WordPress blocks, Gallery block can be positioned anywhere on the website or within the blog post.

Upload of your images can be done by choosing files from media library, from your computer or using drag&drop function.

Where to use Gallery block?

Depending on the type of your website, you might want to create a complex photo gallery or simple image presentation. You can use Gallery block on:

• Your homepage
• Individual subpages created as albums of your photo gallery
• Product pages
• Blogpost

Gallery block settings

Apart from the various alignment options of the Gallery block itself, there are a couple of interesting options within this block, such as:

• Number of columns the images are lined into.
• Image cropping to match the same size (of the smallest image).
• Hyperlink to give you the option to link to another page or media file.

Image block

Image block is nothing else but the block to display an image on your website.

That’s right. If you just want to add an image to any of your pages, you should use Image WordPress block. It may be similar to other presented blocks, but there are significant differences that make it perfect for single images.

When to use Image block?

Image block should be used especially when the object displayed on the image is particularly important for your web visitor you want to:

• Catch web visitor’s attention with a specific image.
• Display image with caption.
• Show infographics that help visitors better understand the discussed matter.

Image block settings

One of the biggest advantages of the Image WordPress block is it’s image size options. You can easily resize an image by pulling it by its corner, choose a fixed size in pixels, or define size in percentage.

Another significant option is input fields for alternative text, caption and link. I strongly recommend using these fields as they play an important role in on page SEO.

Media & text block

Let’s move on to more advanced page layouts that you can create using Media & text block. This core WordPress block allows you to combine media & text side by side, in a way that’s aesthetic and contextual.

Where to use Media & text block?

Although Media & text block is most suitable for use within blog posts, with a bit of imagination, you can use it elsewhere too. For example, you can create a nice product or service overview using image & text next to each other.

Don’t forget to add a Button block to the text section of the Media & text block, if used as product/ service overview. This way you can design nice CTA section on any page.

Advantages of Media & text block

• Bringing together image & text that contextually fit with each other.
• Avoiding misplace of image within the blogpost.
• Helping with site’s responsiveness (use “Stack on mobile” function).

Media & text block settings

When looking at the setting of Media & text block, you’ll notice quite a few alignment options, some of them are unique, compared to most other blocks.

Interesting and useful setting of this block is background color. By coloring the area around image and text that fit together, you can visually highlight their connection.

Insert a link from WordPress version 5.4 (31.3.2020). You can choose from link, media file or attachment page.

Table block

Table block is one of the examples of how WordPress improved after the introduction of WordPress block editor in version 5.0 and beyond. Whereas before you needed plugin to insert table into your WordPress website, now you can simply use Table block.

Where to use table block?

Tables play a huge role in providing useful content in a well-arranged and transparent way. Surely, most of the websites have used tables. Here are just a few examples of using tables on different websites:

• Data comparison
• Pricing tables
• Product technical details
• Recipes
• Membership packages overview

Having Table block as part of free WordPress core is really amazing.

Table block settings

When you insert a Table block into the page, you need to define a number of columns and rows of your table. Don’t worry, this number isn’t fixed. You can add more rows and columns (or remove them) any time.

Then, choose a style of your table: default or stripes. Move on to alignment and font style and finally, fill in your table before you add a finishing touch to it.

More options include:

• Background color
• Fixed width cells
• Header
• Footer
• Link (text entry in a table can link to other pages)

Which block would you like to see next?

Hope you enjoyed reading about our selection of very useful WordPress core blocks – available for free to everyone. Please, let us know which blocks would you like to read about next or which functionalities you find still missing in WordPress core. Thanks for reading!