To help streamline site creation and editing, 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 to WordPress.

Grow Your Business With HubSpot's Tools for WordPress Websites

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.

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 what the different blocks are, he recommended printing out your website and cutting each content piece out. By doing so, you'd 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 tp 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 and now themes," 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:

Adding a new post in TinyMCE editor in earlier version of WordPress

And here’s the Gutenberg version:

Adding a post in Gutenberg editor in latest version of WordPress

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 the ones that are going to come from themes or plugins, or ones you may make themselves," Mullins said.

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. 

searching block directory for Stripe block in Gutenberg editor

Image Source

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:

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.

Plus icon on the main toolbar clicked so full blocker inserter is open

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.

Plus icon in post clicked to open a smaller block inserter interface

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:

user typing slash but so button block appears as suggestion

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 WordPress blocks.

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.

Post in block editor with basic inline settings nad advanced block settings in sidebar open

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 situations 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.

Selecting button block from list view in Gutenberg block editor

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.

Move down arrow selected in block settings toolbar in Gutenberg editor

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.

Paragraph, content, and heading blocks selected in Gutenberg editor

For more control, you can also open the list view and select multiple blocks using the following method:

  1. Click on the first block that you want to select.
  2. Hold Shift on your keyboard and click on the last block to select.
  3. All the blocks in between the first and last block will automatically be selected

Multiple paragraph and list blocks selected in list view of Gutenberg editor

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.

Column block added to post in Gutenberg editor

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.

adding a new content block side by side to button block in column

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.

Group block made up of heading, paragraph, button in gutenberg editor

Tip - if you're having trouble selecting the Group block, it's a lot easier to just use 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".

Button block with dropdown menu with copy command selected

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.

Building Blocks

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.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Jun 15, 2022 7:00:00 AM, updated June 15 2022

Topics:

WordPress Website