To help streamline site creation and editing, in 2018 WordPress introduced content blocks in version 5.0 (Gutenberg). These blocks are individual, customizable elements that take the place of standard text and image editing frameworks.
While the block editor has been out for a while now, you may still be adjusting to using blocks and leveraging their full potential. Or you may have no prior experience with WordPress.
Whatever the case, we’ll cover everything you need to know about blocks, and include insights from Evan Mullins’s lightning talk “” and Greg Ziolkowski’s session “” at WordCamp Europe 2022 (WCEU).
Table of Contents
- What are Content Blocks in WordPress?
- Why use WordPress Blocks?
- How to Use WordPress Blocks
- How to Disable Blocks in WordPress
- WordPress Blocks FAQ
What are Content Blocks in WordPress?
As noted by the official WordPress support page, content blocks “are the components for adding content in the new WordPress block editor.” This editor replaces the TinyMCE editor used by previous WordPress versions with the goal of making the post and page design simpler, easier, and more customizable via blocks.
In his lightning talk at WCEU 2022, Evan Mullins, a Senior WordPress Engineer at Bluehost, defined blocks as “single entities of content...that work together to tell the story of your site.”
To help understand the different blocks, he recommended printing your website and cutting each content piece out. By doing so, you’ll be able to see that your headings, images, paragraphs, videos, buttons, and more are all distinct blocks.
There is an even wider variety of content blocks available in WordPress than the ones mentioned above, including but not limited to:
- Gallery
- List
- Quote
- Audio
- Custom HTML
- Table
- Navigation
- Template Part
- Site Logo
- Query Loop
- Post Title
- Post Excerpt
- Post Featured Image
- Post Categories
- Post Tags
The biggest change here is the segmentation of individual WordPress elements. While the classic editor enabled site owners to manage and manipulate all content types on a single, shared page, the block editor is a new paradigm that “unifies how you interact with WordPress when you edit content,” Greg Ziolkowski, a WordPress Core contributor sponsored by Automattic, said in his WCEU 2022 session.
What are WordPress Gutenberg Blocks?
WordPress Gutenberg blocks are the same as WordPress content blocks. “Gutenberg” is the name of the new WordPress editor deployed with the version 5.0 update in December 2018 and focuses on the visual aspect of site creation over the more confusing and complicated text-based approach of previous editor iterations.
In practice, Gutenberg delivers a very different look than the TinyMCE editor. Here’s the previous editor:
And here’s the Gutenberg version:
While it’s a much cleaner design, what really stands out is the “title” field as its own block. There’s no text field underneath it — to create and edit text, you’ll need to add a text block. Want an image? Drop in an image block. Each block type offers its own customizations; headers can be bolded or italicized, while alignment and spacing can be adjusted in posts. Multiple images can be added in a host of configurations, and you can customize both text and background colors.
What are WordPress Custom Blocks?
“Custom blocks are basically anything beyond the core blocks. This would be any block that you build yourself, and many other blocks found in various plugins or themes,” writes WCEU 2022 speaker Evan Mullins in his
These are designed to fill a gap that isn’t being filled by the core blocks that come built-in to the editor or by block patterns, templates, reusable blocks, and other features of the editor.
“Building custom blocks is important for clients who want custom functionality or are using a private API that can’t be exposed, for example,” Ziolkowski said in his WCEU 2022 session.
You can find examples of custom blocks created by members of the WordPress community in the within the Gutenberg editor and insert these blocks without leaving the editor screen.
Why use WordPress Blocks?
User experience. WordPress blocks give you more control (you can insert more multimedia elements) and it’s easier to use because of the intuitive user interface.
Using WordPress blocks on your site will help you design a piece of content with visual and text components that are interactive. You can alter the page layout right in the editor instead of needing to go elsewhere.
This benefits your site administrators because it makes their job easier. Everything they need is within reach. They can embed external media with a few clicks — no need to go into the HTML code.
Plus, there are also templates for different block patterns and you can save a pre-customized block for future use so you don’t have to recreate any content.
WordPress blocks help your whole site run more smoothly because it’s easier to change templates or the site layout by rearranging the content blocks.
How to Use WordPress Blocks
Now that you know what WordPress blocks are, let’s get into how you can use WordPress blocks to build your site. We’ll cover how to do the following:
- Add a block
- Customize a block
- Use List View to select blocks
- Rearrange blocks
- Select multiple blocks
- Put blocks side-by-side
- Group blocks together
- Copy and paste blocks
How to Add a WordPress Block
To add a new block, you click one of the plus icons in the interface to open the block inserter. Then, you search for and select the block that you want to add.
To open the full block inserter, click the plus icon on the main toolbar. Then, select a block. As you hover over a block, you’ll see a preview of what it might look like.
You can also hover over a specific point in your content and click the plus icon to open a smaller block inserter interface. If you select a block using this approach, the block will automatically be inserted at the location where you click the icon.
Once you start to learn the names of blocks, you can also quick-insert blocks by just typing slash (“/”) and then the name of the block. As you start typing, a list of matching blocks will appear. If multiple blocks appear, you can use the up and down arrows on your keyboard to select the right block and then hit enter to insert it:
How to Customize a WordPress Block
To customize a block, you’ll first need to click on the block to select it. If you’re having trouble selecting the right block, you can open the list view and select the block from the list — more on that in the next section.
Once you’ve selected the block, you have two main options for customizing it. First, many blocks will include some basic settings on the floating toolbar. Typically, you can add text formatting, change their alignment, and make other basic tweaks.
Then, to access more advanced settings, you can use the Block settings in the sidebar. These settings will b