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 “Blockity McBlock Blocks, Oh My!” and Greg Ziolkowski’s session “Level Up Block Building Skills” 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 GitHub.
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 block directory 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 be unique for each block and give you detailed control over how that block functions.
How to Use List View to Select Blocks
In most cases, you can select a block just by clicking on it. However, there may be a situation in which it’s difficult to select the specific block that you want. This is especially common with Columns or Group blocks, which we’ll cover later on.
To address this, you can use list view in the block editor. When you open list view, it will show a list of all the blocks in your post in the order in which they appear.
To select a block, all you need to do is click on it in the list.
How to Rearrange WordPress Blocks
You have two options for rearranging WordPress blocks.
If you only need to move a block up or down a few spots, you can select the block and then click the up or down arrow to move the block one position up or down, as shown in the image below.
For more control, you can also use drag-and-drop to move the block anywhere on your page. To activate the drag-and-drop feature, select the block and click your mouse on the six dots icon (also shown in the image above).
You can then start dragging the block to its new location. To help you make sure you’ve got the right spot, you’ll see a blue line appear where the block will move if you release your mouse.
You can also use drag-and-drop to rearrange blocks in list view.
How to Select Multiple Blocks
In some situations, you might want to select multiple blocks. This can be especially helpful if you want to rearrange multiple blocks using the methods above.
To select multiple blocks, just click your mouse and drag, much like you would select multiple paragraphs in a text document.
For more control, you can also open the list view and select multiple blocks using the following method:
- Click on the first block that you want to select.
- Hold Shift on your keyboard and click on the last block to select.
- All the blocks in between the first and last block will automatically be selected.
How to Put WordPress Blocks Side-by-Side in Columns
If you want to put blocks side-by-side, you can use the Columns block.
First, open the block inserter and add the Columns block. When you add the block, you’ll be prompted to choose your preferred column structure. For example, you could use two equal columns or make one column larger than the other. Or, you could use more than two columns.
Once you’ve added the column structure, you’ll see plus icons inside each column. You can click those icons to add content directly to each column, which lets you place the content side by side.
To change the column layout later on, you can edit the main Column block’s settings. If you’re having trouble selecting the column block, it can be easier to use the list view.
How to Group WordPress Blocks Together
Grouping blocks together can be useful in certain situations, such as applying a cohesive background color to multiple blocks.
To help you achieve this, you can use the Group block.
To start, open the block inserter and add a new Group block. Then, you can click the plus icon inside the Group block to add other content blocks inside that group.
If you edit the main Group block’s settings, such as adding a color background, it will apply to all of the blocks inside the Group. You can also move the Group block around and all of the other blocks will stay inside it.
Tip: If you’re having trouble selecting the Group block, it’s a lot easier to just use the list view.
How to Copy and Paste WordPress Blocks
If you want to copy and paste text, you can do it just like you were copying and pasting text in Word or Google Docs.
For example, Ctrl/Cmd + C to copy and then Ctrl/Cmd + V to paste.
However, you can’t use Ctrl/Cmd + C to copy other blocks. Instead, you’ll need to do the following:
- Select the block that you want to copy.
- Click the three dots icon on the toolbar.
- Choose Copy from the drop-down.
Once you’ve copied the block using this approach, you can paste it using your normal methods — e.g. Ctrl/Cmd + V.
You can also duplicate blocks by selecting the Duplicate option from the three dots menu on the block’s toolbar.
How to Disable Blocks in WordPress
Many believe that Gutenberg is the future of WordPress — and of publishing in general. So it’s worth getting used to the block editor and exploring its full potential.
But what happens if you really, really dislike the new Gutenberg content block editor? It’s true that some users do — before its wide release in 2018, there were complaints about it not being ready for large-scale deployment. It’s also true that some must-have WordPress plugins and add-ons may not play well with Gutenberg, especially if software creators haven’t gotten around to updating their code.
Or maybe you’re more of a hobbyist on WordPress and not interested in learning a whole new way of editing.
In either case, you may want to disable blocks in WordPress. This will help you prevent headaches if the WordPress visual editor isn’t working.
While you can’t switch back to the classic editor directly from your WordPress administrator page, several plugins offer this functionality.
Classic Editor
As soon as this plugin is installed, it deactivates the Gutenberg content editor and restores the classic version. It also offers the ability to keep both classic and Gutenberg options simultaneously — if you activate this option, content blocks will be displayed by default but include links back to the classic editor
Disable Gutenberg
By default, this plugin disables the Gutenberg block editor for all administrators and users on your WordPress site, but this can be customized by unchecking the Complete Disable option in the plugin settings menu. This will open up a host of role-based editor options, allowing you to activate either Guternberg or classic editor functions for admins, editors, authors, contributors, subscribers, and customers.
WordPress Blocks FAQ
Okay, we know that’s a lot of information. At the end of the day, here’s the TL;DR.
1. What can you do with content blocks?
Using the blocks layout on your WordPress site allows you to insert various multimedia and adjust the page layout right within the editor.
Easily upload and build a dynamic page with all the elements you need including:
- Images
- Video
- Embedded social media posts
- Polls
- Embedded videos
2. Does drag and drop work for rearranging blocks?
Yes.
3. What is a WordPress Block Template?
WordPress Block Templates are pre-designed layouts using the WordPress block editor to build custom pages or posts. These allow you to create your pages without having to design an entire web page.
4. Does Gutenberg involve editing posts/pages in the front-end?
The WordPress developers say:
“No, we are designing Gutenberg primarily as a replacement for the post and page editing screens. That said, front-end editing is often confused with an editor that looks exactly like the front end. And that is something that Gutenberg will allow as themes customize individual blocks and provide those styles to the editor. Since content is designed to be distributed across so many different experiences — from desktop and mobile to full-text feeds and syndicated article platforms — we believe it’s not ideal to create or design posts from just one front-end experience.”
5. What’s the difference between block variations and block styles?
According to WordPress:
“Block variations are different versions of a single base block, sharing a similar functionality, but with slight differences in their implementation, or settings (attributes, InnerBlocks, etc.). Block variations are transparent for users, and once there is a registered block variation, it will appear as a new block. For example, the embed block registers different block variations to embed content from specific providers.
“Meanwhile, block styles allow you to provide alternative styles to existing blocks, and they work by adding a className to the block’s wrapper. Once a block has registered block styles, a block style selector will appear in its sidebar so that users can choose among the different registered styles.”
6. Can I get other types of content blocks not available in Gutenberg?
Yes, there are third-party block plugins such as Ultimate Blocks, Spectra, or CoBlocks. These will help with more complex layouts and designs.
7. Can you disable Gutenberg?
Yes, through plugins such as Classic Editor or Disable Gutenberg.
Building Blocks of WordPress
If you’re building or redesigning a WordPress site, the initial appearance of its block-based content editor can be a bit jarring. Despite the shift away from more familiar, text-based editing however, content blocks offer powerful, customizable features and functions to help streamline site design and deployment.
Editor's note: This post was originally published in December 2020 and has been updated for comprehensiveness.
