What are WordPress blocks anyway? The short answer is, they provide an easy way to add and edit content on your WordPress site, and to provide design options easily that used to be hard.
A funny thing happened recently when I was talking to someone about my WordPress Building Blocks business.
He’s very knowledgeable about copywriting, digital marketing, content marketing, and the like, and he’s also been involved with WordPress for years.
When he heard the name of my business — WordPress Building Blocks — he said, “oh, that’s clever. It’s a sort of a play on the new Gutenberg blocks.”
Actually, I chose the name back in 2012, before the Gutenberg block editor was a gleam in Matt Mullenweg’s eye, but it tickled my funnybone that he made that connection.
All of which is a long way to lead into the discussion about what are WordPress blocks anyway?
Back when I started this business, the blocks were the various building block elements that went into putting together a WordPress website. Today, though, we have the new block editor, and it’s making a lot of things easier.
The Idea Behind WordPress Blocks
The switch to the block editor in WordPress took place over a couple of years. At first, there was the Gutenberg Block Editor plugin. Those who felt adventurous and wanted to embrace change could use it, and provide feedback to the developers for improvements.
There was a lot of angst within the WordPress community over the switch, with many people objecting to the change.
Matt Mullenweg, one of the original WordPress developers, wrote this in November of 2018:
The overall goal is to simplify the first-time user experience of WordPress — for those who are writing, editing, publishing, and designing web pages. The editing experience is intended to give users a better visual representation of what their post or page will look like when they hit publish.
In the article, Matt also pointed out that, when WordPress first started, content was mostly text. Today, it’s rich multimedia. This presents different challenges to the developers and programmers, and moving to a block editing system makes total sense from the developer’s point of view.
Whatever a user’s feelings about it, though, blocks are here to stay. You can still use the Classic Editor plugin — for now — but it will be phased out in a couple of years.
My suggestion is to learn to use blocks now.
Blocks vs. Classic Editor
In the classic editor, you entered all your content — text, images, audio, and video — as a single HTML block. Users didn’t need to know HTML — WordPress took care of that part of it. It was like typing into a word processor or email program.
In the block editor, each element resides in a separate block. A heading is different from a paragraph, and a quote is another block. So is each image, each audio file, and so on.
In fact, there are quite a few available blocks, with the potential for even more if you install a plugin like Atomic Blocks.
WordPress arrives with the following blocks types available:
- Most Used
- Common
- Layout elements
- Widgets
- Embeds
- Reusable
Certain plugins like Yoast SEO and WooCommerce will also add blocks, and some themes will as well.
Most Used Blocks
When you first install WordPress, the Most Used Blocks and Common Blocks sections will look identical. Over time, though, the blocks you use most frequently on your site will take their positions in your Most Used Blocks area.
They will adapt to your most recent usage. For example, I recently added a fair bit of custom HTML to a post, and that block now shows up as one of my Most Used, although it hadn’t previously. You’ll also notice the Divi Layout, which is available to me because this site is built with the Divi theme.
Common Blocks
I’ve written previously about the Common Blocks. These are the blocks that are used most frequently by the majority of users. They include:
- Paragraph
- Image
- Heading
- Quote
- List
- Gallery
- Audio
- Cover
- File
- Video
Formatting
Formatting blocks handle things that require special formatting, like tables or quotes. They include:
- Custom HTML
- Code
- Pullquote
- Table
- Verse
- Preformatted
- Classic Editor
Now we’re beginning to see one of the big advantages of using blocks — you can insert elements into the body of your content that would have been impossible before.
Layout Elements
Layout elements blocks provide even more choices over design. This grouping includes:
- Separator
- Button
- Columns
- Group
- Media and text
- More
- Page break
- Spacer
Separator adds a horizontal line across the page. Spacer adds an extra space between elements. Media & Text gives you a format for adding an image and accompanying text as a single block. Group allows you to join two or more blocks together to form a single unit, which is very handy if you want to create a layout for something like an opt-in form that you want to display on multiple pages.
Widgets
It’s now possible, thanks to WordPress blocks, to add a widget within the body of a page or post, something that was impossible before without special coding. You can’t add any old widget, just these:
- Shortcode
- Archives
- Calendar
- Categories
- Latest comments
- Latest posts
- RSS
- Search
My selection also includes the widget for WPForms, which was added by that plugin. If you’re using a different forms plugin, you may see a widget for that form available in this group of blocks.
Embeds
Back in the day, it wasn’t especially easy to add an audio or video file to a page. Over time, WordPress made it easier to embed videos from YouTube, but styling them to make them look nice could still be an issue.
Now, with the Embeds block, you can embed all sorts of multimedia files from popular sources, with no difficulty whatever. There are currently over 30 over them available.
It includes the ability to embed posts from popular social media sites like Twitter, Facebook, and Instagram. Embed video from YouTube and Vimeo, or audio files from SoundCloud and Spotify. Want to embed a TED talk? Easy Peasy. You can even display a Kindle book or a meeting from Meetup.com.
Reusable
The Reusable block section will be empty until you create your first Reusable Block. As its name suggests, it’s a block you can use over and over again.
It’s perfect for layouts you want to repeat on multiple posts or pages, like opt-in forms.
After you create your first Reusable Block, you’ll see it displayed in this section with the name you gave it.
What Can You Do With Blocks That You Couldn’t Do with the Classic Editor?
Where do I start??
Rearrange
When you’re using the block editor, it’s super easy to rearrange elements on your page. Just drag and drop.
Click inside a block to highlight it, then use the arrows on the left to move it up or down.
Add columns
It’s easy now to create columns without coding or using a plugin. Just head to the Layout blocks menu and select Columns.
Choose from two equal columns, two unequal columns, or three equal or unequal columns. Once you make your selection, you’ll have additional choices in the Block tab on the right, where you can add more columns or make size adjustments.
Add and format tables
Working with tables in WordPress used to be an enormous pain. You either needed to use a plugin — and I never found one that worked all that well — or hand code the HTML for it.
Now, you just add a Table Block from the Formatting menu. Choose the number of rows and columns, and even add a striped effect.
Reuse blocks
As mentioned before, you can add a block to your Reusable Blocks library, and add it to multiple pages and posts.
Group blocks
Group blocks together so you can safe the entire group as a single Reusable Block, or move it to a different spot on the page as a single unit.
Change colors and text sizes in individual headings and paragraphs
With the block editor, you can now easily add a background color to a paragraph, change the text size, add a drop cap, or change text color. You can also change the color of heading text, as shown above, but not its background.
Highlight the paragraph, and you’ll see those settings in the Block tab on the right.
Here’s an example of a paragraph styled with different colors and a drop cap. This is an easy way to draw attention to something especially noteworthy, or to a special offer of some kind.
Within the color settings, there’s also a failsafe of sorts. If you choose a color combination that doesn’t include enough contrast — if the text won’t be easy to read against the background color — you’ll see a warning.
Embed multimedia files
And, of course, it’s super easy to embed files from other sources with all the many Embed blocks.
Add design elements
When I recently installed the new Navigation Pro theme and started running it through its paces, I was surprised.
Different theme designers offer different methods for putting together a stunning homepage. For the past few years, StudioPress, maker of Navigation Pro, has used widgets for that. But Navigation Pro uses only Gutenberg blocks.
And it’s gorgeous!
So what’s not to love about WordPress blocks? The editor is simple to use, it’s intuitive, and it lets you accomplish things, without code, that you couldn’t before.
