WordPress Blocks: An In-Depth Guide in 2022

WordPress blocks are the main component of WordPress’ drag-and-drop Gutenberg editing system for websites. 

The easiest way to learn to use blocks is through hands-on practice, but understanding what blocks are and what they can do for you can make your page-building more efficient and fun. 

Whether you’re new to making WordPress sites or looking to develop some advanced skills, this guide will teach you more about what blocks are, what common blocks people use, how to use them, and other information that can improve your site.

Learn more: WordPress Website Design: How to Create a WordPress Website from Scratch

What Are WordPress Blocks?

WordPress blocks are discreet elements of text, media, or custom code that you can add to a blog post or website page using WordPress’ Gutenberg editing system. 

Most people focus on using it for blogs, but it works well for most other pages on many websites.

WordPress blocks exist to simplify creating posts and pages that look good to readers by removing the need to code each element manually. Instead, you can drag and rearrange each block to customize the look of your page.

Each block is functionally a self-contained element on the page, so changing one block won’t modify the others.

This isn’t the only block-type editing system on the market. Some competing services, like Ghost, also have robust editors that you can use to create websites.

However, Ghost is mainly a blogging platform, and its editor focuses on that, while WordPress’ editor is also helpful for creating non-blog pages on your website.

These blocks are also different from Drupal, another content management system. 

Drupal focuses on blocks that can appear on multiple parts of a website, whereas WordPress focuses on individual parts of one page. 

You can duplicate content easily enough, but the blocks themselves aren’t linked and won’t all change when you edit one.

Learn more: Landing Page Design: 10 Inspirational, High-Converting Landing Pages

History of Gutenberg

Gutenberg is WordPress’ current editor.

Originally launched in 2018, it’s grown since then to a more mature system capable of delivering fast and powerful editing for web pages and blog posts. 

It’s still not done because the developers want to use it for full site editing, but it has significantly more features now than it did at launch.

Gutenberg exists because many WordPress users wanted to have a cleaner, simpler way to blog without editing code to make everything look good. 

Here, it’s essential to understand that WordPress attracts many casual users, plenty of whom have little coding knowledge.

This is a sharp difference from the early years of the internet when you wouldn’t even have a website unless you had relatively advanced coding knowledge for the time. In other words, WordPress wants to support the casual market, where click-and-drag processes make more sense.

A secondary consideration for Gutenberg is how and where people blog.

Some website owners use text-to-speech systems instead of writing things out manually, while a drag-and-drop editing system makes it much easier to create websites on smartphones, tablets, and other devices.

However, some people still prefer the old editing system. That’s no surprise because it still offers far more control and support for users capable of managing its code. 

Gutenberg is a powerful editor, but by necessity, it limits some things users can do. Nothing is as flexible as pure coding, but Gutenberg is faster and easier for most needs.

Learn more: Conversion Rate Optimization: The Complete Guide

Switching Between Classic and Block Editor

WordPress knows that flexibility is usually better than forcing everyone to use one system, and that’s why you can switch between its classic and block editing systems.

In most cases, you need to be the site administrator to switch between editing views. 

However, once you’re logged in with the correct account, you can change the editor on each page when you’re modifying it by clicking the button at the top of the screen.

This is all most users need to know, but you can customize things further. 

Many WordPress plugins let you build pages with a drag-and-drop interface like Gutenberg but that you may prefer. They typically offer editing choices Gutenberg doesn’t, as well. 

Plugins like the Divi builder, SeedProd, and the popular, easy-to-use Elementor offer editing systems beyond the blocks Gutenberg provides. 

These plugins typically contain resizing tools, multiple-part components, and enhanced templates that further reduce the process for creating pages. 

External plugins are helpful for non-blog pages, which is where Gutenberg often falls off a little. It can do many of those pages, but not with the same flexibility as other systems just yet.

Learn more: Customer Journey Map: Best Practices + Ready Templates

How To Disable Gutenberg

Can you disable Gutenberg for specific users? Can it be disabled completely? 

The answer to both is yes. There are several ways to disable Gutenberg if you don’t want to use it on your site.

Disable Gutenberg by Installing a Plugin

The first method, and for most users the best, is using the Classic Editor plugin. This is an official plugin from the WordPress team, with literally millions of active installations on sites. 

The Classic Editor allows you to set the default editor for each user, allows users to pick an editor, and comes with several additional features to make things easier.

This isn’t technically disabling Gutenberg so much as hiding it, but the practical result is the same. Or, in another sense, installing Classic Editor is wise because it lets you use whichever editor you want, and that’s simply better than being stuck with one editor all the time.

A community-based alternative uses the Disable Gutenberg plugin, which isn’t as popular as Classic Editor but doesn’t rely on having official support. 

This is a straightforward and practical way to disable Gutenberg entirely or to disable it for specific pages, post types, roles, or themes on a site.

To install either plugin, the steps are simple:

1. Log in to your WordPress interface
2. On the left, select ‘Plugins’
3. On the expanded Plugins screen, select ‘New’
4. In the search field on top, type the name of the plugin you want
5. Choose the plugin you want from the results and click the ‘Install Now’ button
6. After it’s finished, click ‘Activate Plugin’

Disable Gutenberg by Editing functions.php

Finally, you can modify the functions.php file on your site to disable things directly. 

However, this can end up breaking your site if you do it incorrectly, so we don’t recommend this for casual users. Installing one of the plugins listed above is both simpler and easily reversible.

If you want to disable Gutenberg without a plugin and you’re a beginner at WordPress code, you can follow these steps. This method disables it for all users.

1. Log in to your WordPress interface (you’ll need to be an administrator)
2. Find ‘Appearances’ in the left sidebar and hover over it 
3. Select ‘Theme Editor’
4. In the list of files on the right, select ‘functions.php’ 
5. Make a copy of your functions.php file before as a backup so you can restore it if something goes sideways
6. When the editor pops up, copy the following exactly and paste into the file: add_filter( ‘use_block_editor_for_post’, ‘__return_false’ );
7. Click the Update File button below

Learn more: Heat Map Explained + How You Can Make a Website Heatmap

Common Types of WordPress Blocks

Here are the most common types of blocks available in the basic WordPress editor. 

Before Gutenberg, most people coded these blocks directly, or with the rich text editor’s text and image formatting tools, and rearranged the code as necessary to adjust the layout on the page.

Paragraph

This is the block that most people use more than any other. As the name suggests, it focuses on written content. 

The text editor converts each paragraph into a block so you can move and rearrange them after writing them. 

Image

Image embed blocks hold single graphics that you can move around the page. 

These come with various alignment options, including resizing the image or even going full-width, beyond the usual limit from a theme. 

The paragraph and image blocks together are enough to create a basic web page, so everything else is ultimately just there to iterate and improve on these elements, following the basic visual hierarchy principles. 

Headings

Heading blocks hold oversized texts to split the page into sections and make it easier for users to find content. The editor allows you to adjust heading sizes, formatting, hyperlinking, and other elements as needed.

WordPress supports up to 6 heading levels, including h1 for the page title, but most people rarely go beyond h4.

Gallery

The gallery block is an advanced version of the basic image block and lets you add multiple pictures in a predetermined layout. 

The current editor supports a maximum of eight columns for images, plus resizing, linking, and other formatting options for the page.

List

List blocks created numbered or bulleted lists. 

This is essentially just an application of the paragraph block, but separating lists into their own component makes it easier to avoid accidentally modifying the formatting.

Quote

Quote blocks are specially formatted paragraph blocks that help call out something particularly important. 

Most people use these for a quote by a specific person, but you can also use them to provide commentary or otherwise highlight vital information.

Audio

Audio blocks are relatively rare on websites, but WordPress still supports them. 

These allow you to add any audio files you have, including features like auto-playing the audio or looping it.

Remember that most users dislike audio that automatically plays unless they want that to happen, so try to avoid surprising visitors with unexpected noises.

Cover

Cover blocks are a more advanced formatting element. This block lets you select an image or video, and sometimes text, that you can overlay on your page. 

This media can float in the background, repeat, and otherwise serve as an instant attention-grabber.

WordPress supports having no transparency on the overlay, or full transparency, but recommends a moderate amount to ensure your text is easy to read.

File

File blocks let you provide direct links to files on your website so visitors can download them.

You can upload almost any sort of file to your site, but your hosting provider may have questions if you try to upload something too big or get too many downloads for your plan. 

This is a good example of the interconnectedness of web development.

You probably won’t run afoul of limits if you’re only letting people download basic text files, but talk to your website’s host before adding any other files. They can tell you what’s allowed on your plan or suggest alternatives as needed.

Video

Video blocks let you add multimedia content to your site, by uploading it directly or linking content on another site. 

Video files tend to be extremely large, so you usually need a good hosting plan if you want to have the files on your site. 

Hosting externally, such as through YouTube and using YouTube embed, is considerably easier. Gutenberg automatically converts some video links to a different type of block as appropriate.

How To Use WordPress Blocks

There are several ways to add a block in the Gutenberg editor. You can add them directly from the top icon bar, or by clicking the inserter button. 

This button looks like a circle with a plus in it and lets you click on the type of block to add.

Once the blocks are on the page, you can move them up and down by clicking the arrows on the left side of the block. Alternatively, you can click the grid of six dots and hold your mouse button down, then drag the block to where you want it.

To edit blocks, just click on their space. This will automatically open the block information and let you adjust the components as necessary. 

You can use the same functions to change the type of block. The arrows in the control panel can be used to expand or close sections of the editor, while the X button lets you close out of the block editor and focus on other things.

Difference Between WordPress Blocks and Widgets

Blocks are primarily webpage content, including text and media like images and audio. So, what is a WordPress widget, and how is it different from a block?

WordPress widgets, in contrast, are content that you can put in special areas like sidebars and footers. The Gutenberg editor mostly avoids these areas, although you can include widget-like things in your main content by adding code blocks.

The block interface is usually on the right side of the screen when the page editor is open. The widget editor is available through the Appearance > Customizer area and through the admin menu. 

Widgets usually appear on every page for a website, so you can’t edit them from the same place you can edit blocks.

Creating Reusable WordPress Blocks Templates

WordPress allows you to create reusable block templates. 

This is useful for having consistent branding and design on your site without recreating an exact layout each time. This is especially useful if you’re using software like Vectornator or Adobe Illustrator to create advanced vector graphics and layouts.

Creating the template itself is simple. All you need to do is select the block, click the three dots in the toolbar that appears, then click Add to Reusable Blocks. 

From there, you can rename it to something easy to remember and get back to working on the page.

Block templates simplify things like logos, custom buttons made in graphic design software, design elements, and anything used in a website’s branding. 

The template will allow the element to be added easily anywhere you want without having to redo a certain branding element or layout every time you want to use it. 

Final Thoughts on WordPress Blocks

While WordPress blocks aren’t ideal for everyone, they’re a powerful starting point for creating pages and arranging content in an intuitive, user-friendly way. 

However, just reading about blocks isn’t enough to master using them.

Instead, go to your WordPress site now and start playing around on one page. By getting some hands-on practice, you’ll be able to master their use and start creating advanced layouts on your site. 

Much like riding a bicycle, WordPress blocks are difficult to forget once you learn them and can help you create almost any standard page design.