To help streamline site creation and editing, WordPress version 5.0 shifted away from its traditional TinyMCE editor to content blocks — individual, customizable elements that take the place of standard text and image editing frameworks.

While the new system is designed for easy use and simple application, it can be jarring if you’re familiar with previous iterations of WordPress or have no prior experience with this content management system. Here’s what you need to know about the integration, implementation, and impact of content blocks in WordPress.

Grow Your Business With HubSpot's Tools for WordPress Websites

What are Content Blocks in WordPress?

As noted by the official WordPress support page, content blocks “are the components for adding content in the WordPress block editor.” This editor replaces the more familiar TinyMCE editor used by previous WordPress versions with the goal of making the post and page design simpler, easier, and more customizable.

There are a wide variety of content blocks available in WordPress, including:

  • Archives
  • Blog posts
  • Calendars
  • Code
  • Heading
  • Image
  • Navigation
  • Podcast player
  • Spacer
  • Timeline

Specific service integrations are also supported with blocks for Twitter, TikTok, YouTube, and WhatsApp.

The biggest change here is the segmentation of individual WordPress elements. While the classic editor saw site owners managing and manipulating all content types on a single, shared page, block-based editing gives every piece of content its own customizable container.

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.

Although the style of the new editor takes some getting used to, it’s largely unobtrusive. Creating title and post text isn’t significantly different than in the old editor, and you can quickly search for specific block types if you’re not sure what to use. In fact, for most common use cases you can effectively ignore the Gutenberg editor and create content as normal —blocks only impact your work if you’re looking to implement specific features or customize the look of your site.

How to Disable Blocks in WordPress

What happens if you really, really dislike the new Gutenberg content block editor? Some users do — before its wide release in 2018 there were complaints about it not being ready for large-scale deployment, and it’s true that in some cases what site owners want to do with content blocks isn’t immediately obvious or intuitive. 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.

In either case — if your site simply won’t work with WordPress content blocks or you dislike the approach — 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.

How to Put WordPress Blocks Side-by-Side

While the content block editor is designed for simplicity and speed, some functions aren’t easy to spot up-front. Consider the process of putting image blocks side-by-side. Given the block-based nature of the new editor, this should be easy, right? Just drag-and-drop images where you want them on the page and move on to the next content element.

Not so fast. As it turns out, this is an often-asked question on WordPress support sites since the Gutenberg editor doesn’t offer this function up-front. Here’s a step-by-step guide:

Step 1: Click on the “+” to add a new block

Step 2: Search for “Gallery Block”

Step 3: Add images

Step 4: Customize conditions

Let’s explore each in more detail.

Step 1: Click on the “+” to add a new block.

Click on plus icon to add a new block in WordPress editor

While WordPress defaults to “Add title”, clicking on the “+” will bring up a host of block options you can use to customize the page.

Step 2: Search for “Gallery Block.”

User searching for specific Gutenberg block in WordPress dashboard

Here, you can either use a keyword search or browse all blocks to find what you’re looking for. In this case, you’ll want the “Gallery” block.

Step 3: Add images.

User adding image block in WordPress dashboard

The Gallery block lets you upload new images or select them from your device library. You can also drag-and-drop images into the gallery block itself rather than selecting and uploading specific files.

Step 4: Customize conditions.

User customizing image block in WordPress dashboard

Images uploaded or dragged to the same Gallery block will naturally appear side-by-side. The options bar above the block lets you select how the images are displayed — for example, you can choose to have them stacked, offset or in columns — while the settings bar on the right-hand side of the screen lets you control how many images are displayed on each row, up to four.

Worth noting? WordPress will naturally crop images, but you can turn off this option in the settings bar.

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.

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 Dec 24, 2020 7:00:00 AM, updated March 17 2021


WordPress Website