Since the release of WordPress 5.0, many longtime WordPress users have complained bitterly about the replacement of the “Classic” page editor with the “Block Editor” page builder. You can still use Classic — the Classic Editor plugin enables it — for now.
I too used to hate Blocks, but it’s improved since its initial release, and I’ve gotten more used to it. Now, I never use Classic for writing pages and posts. If you bounced off of Blocks and came away bruised, read on, because there’s a payoff for learning to use it effectively.
You can use blocks to do normal things like paragraphs and images, as easily as in Classic. And many things are easy in Blocks that are difficult to impossible with Classic.
Table of Contents
The Classic editor
Classic, also called TinyMCE, is a simple word-processor like editor, with a double toolbar of text formatting controls (shown here collapsed to one row). Buttons above the toolbar let you add pictures and video. Plugins may add buttons and toolbar controls, such as the Add Form button shown here, which was added by the WPForms plugin.
Having inserted a picture, you can resize it with the mouse and flow text around it, left or right, or have it occupy the whole line. There are limited controls for formatting — you can use outline headings, bold and italics, bullet lists and “block quotes”, change text colors, and a few other things. You don’t have controls to change text size or use alternate fonts (though it’s possible to add those with the right plugin).
Classic has been around for a long time, and there are lots of independently developed plugins to add functions to it. Boxes, columns, buttons… you name it, a dozen different developers have created a plugin for it. Once you’re familiar with those addons, once you have a go-to set of them, you can enter simple posts — text and images — efficiently.
To go beyond simple text, to create responsive layouts of columns, grids, and the like, and to get more control over the appearance of things on the page, is more of a challenge.
Enter the Blockheads
The developers of WordPress wanted something that could be more easily used to create fancy web content. For the last few years the “Gutenberg” project has offered an alternative, more capable editor, and recently (late 2018) it became the default. It was kind of wretched when first released in “beta” form, because that’s what a beta release is for — to work out the worst kinks. It’s improved steadily, though there are still some annoyances, and more improvements are coming.
The Hybrid Approach
One feature of Blocks that fans of the Classic editor might welcome, is the ability to add a Classic block. Here’s how the example page looks in the Blocks editor, using a Classic block.
There are a few differences. The Add Media button changed to a toolbar control. The Add Form button, part of the WPForms plugin, is gone because WPForms chose a different approach. To add a WPForms form, use their block instead.
There are different ways to add blocks, some using just the keyboard. In this case, I used the mouse to click the black “plus” button to add a block, then typed “form” to search for the type of block I wanted. The search is flexible, in case you just have an idea what you want, not the name.
After inserting your form, you could use a similar technique to append another Classic block for more paragraphs of text.
Or you could dive in and go Blocks-native!
Full-on Blocks
The last picture but one shows that when you’re working in a Classic block, there’s a button to Convert to blocks. All the things you might put into a Classic editor have corresponding blocks — Paragraph, Heading, Image, Shortcode, Embed (video), and List, for instance, are all built-in block types. So you can create a Classic block, then split it up later.
Or you can write the whole article as blocks in the first place. For a straightforward document, there’s little difference between the Classic editor and Blocks. Start typing, and that’s automatically a paragraph. Press Enter, and that’s a new paragraph. To insert something other than a paragraph — a bullet list or image, say — instead of paragraph text type “/” (forward slash) and enough of the block name to find it in the list. So for a bullet list, type “/li” and Enter, and start typing bullet list items. When done, pressing Enter on a blank line starts a new paragraph.
Each block has controls giving you options, some in a toolbar above the block, others on the right sidebar, to make a numbered list rather than bullets, for instance.
Problems? Solutions!
I wasn’t a huge fan of Blocks starting out, so I had a list of what I didn’t like. Others have expressed their own concerns, which I’ll try to address here. If I missed your pet peeve, please use my Contact form to let me know, or add a comment below.
Problem: Used to be able to write blog posts on my phone
This is still an issue. Blocks isn’t easy to use on a narrow screen. There is a WordPress mobile app for Android and iOS, though, which makes it simpler. WordPress also lets you post to your blog via email.
Problem: There are too many blocks — it’s confusing!
There are lots of built-in blocks, and you’ll never use some of them. Plugins may provide their own blocks, so the list may end up pretty long.
Fortunately, the Block Manager lets you easily disable any blocks you never use, so you can clear away the chaff and focus on the stuff that suits your way of working. This is especially helpful when you install a plugin with a better version of a built-in block. For instance, the built-in List block doesn’t let you select the style for the “numbers” on numbered lists — whether Arabic or Roman numerals, letters, etcetera. If you need the ability to vary these instead of just using your theme’s default, find a plugin with a version of the List block that has more options. Then hide the default List block, because you’ll never need it once you have something better.
Problem: Now I can’t use headings to control text size!
First, that’s not true; the line above this is a heading. Second, you shouldn’t have been doing that in the first place. It’s an accessibility violation.
Instead, use the settings of the Paragraph block to adjust font size, as I did for this paragraph.
Heading styles must never be used for mere emphasis even in Classic. Headings must be the title of a section of your document. There are other blocks used to set off text for emphasis, such as block quotes, pull quotes, containers, the “notice” block just below this…
Headings aren’t just about appearance
Headings reflect how your document is organized logically. Screen reader software (e.g. JAWS) uses the outline structure of your document to navigate your pages (and so does the table of contents at the top of this article). So don’t just use an H3 because you like the font size — it needs to be an actual heading with an H2 as its parent, or your page will fail accessibility testing.
Another way to make text stand out is to set background and font colors of an ordinary Paragraph block, as I’ve done here. Use bold and italics, or set the font size, to further make the text pop.
Remember, to be accessible, your text can’t convey meaning through size, color, or position alone. It must be comprehensible to people who experience your page by hearing it read aloud, who can’t distinguish colors, or who have trouble with tiny text.
Problem: This Classic editor plugin I love, doesn’t work in Blocks
Well, yes. I too, over the years, amassed a collection of favorite tools for formatting content in the Classic editor. Blocks is newer, and the developers of your favorite plugins may not have adapted them to work in Blocks. They might never do so. In fact, many Classic Editor-based plugins I used before haven’t been updated in a long while, aren’t tested with the latest versions of WordPress, and may not be actively supported. So, like it or not, you probably need new tools regardless.
Still: you do have the Classic block if you need to do something that works only in the Classic editor, and you can still use old-fashioned shortcodes, either in a Classic block or via a Shortcode block.
But it’s less trouble to find yourself a block that does what you need. Plugin developers have created many collections of utility blocks.
Advantages of Blocks
The above list of why Blocks isn’t as wretched as you thought, may not seem that convincing. Why learn a new system if you don’t have to? Here’s the list of things you can do with Blocks that aren’t simple or (depending on your technical expertise) possible in the Classic editor.
Reusable Blocks!
Having captivated you with my prose or shown the value I can provide (depending whether we’re on my fiction website or here on the technical side) I’d like you, gentle reader, to do something. Buy my book, sign up for my newsletter. As I write a post, I try to find the strategic place to make an appeal. In this case, it is here.
If you find this website helpful, subscribe for email updates!
Your information will not be shared (except with MailChimp, who manages the subscriber list).
This is a reusable block. To insert it, I start with “/subscribe” at the beginning of a line (or if I’ve forgotten its name, “/reu” to see all reusable blocks). Up pops the list of blocks including the above, I select it, and move on to the next paragraph.
Columns!
For years I scoured the wastelands for a satisfactory plugin to make responsive columns. By responsive, I mean that if used on a narrow screen, like a phone, the columns would fold to a vertical stack rather than extending past the edge of the screen forcing people to zoom out or scroll in both directions to see it all.
The only plugin I found that gave satisfactory results used shortcodes, so during editing you couldn’t see it as it would look on the page. It strung out on multiple lines, and if you had to nest columns, good luck getting all the “start column” and “end column” in the right order.
There’s a built-in Columns block. Generally, built-in blocks are basic, and if you want something better there are plugins to provide it. I like the Advanced Columns block from the Genesis Blocks collection.
… and Beyond to Layouts
If you need to move beyond columns, the Grids plugin gives you more flexibility in laying things out and controlling how they behave on mobile devices. This is not something you generally want to do in a typical blog post, but very useful for designing pages, or in conjunction with reusable blocks to create something fancy you want to include frequently in posts.
Tables!
The Classic editor doesn’t have a good way to create and manage the contents of tables. This is built in to Blocks (and of course, there are plugin offerings that add options to that).
Note: be careful how you use tables, because they can’t easily be made responsive. I avoid them. But if you like them, you’ve got ’em here.
More cool special purpose stuff!
There are a ton of blocks out there to deal with specific situations. Some of them are parts of plugins you’ll probably want for other reasons anyway. For instance, the Genesis Blocks plugin has a bunch of really handy general purpose blocks, but also a collection of predefined “layouts” such as “Team Members” to introduce your staff. Or, if you use Yoast SEO, you automatically get the How To and FAQ plugins.
Example FAQ block
Yes! Yes we do!
If you have Yoast SEO, just type /faq and select it from the list. After that it’s really obvious!
You can add a picture!
Not directly through the editing UI. The styling is controlled by your theme, and in most themes it looks okay, but see CSS section below.
Anchors, people!
Look what I saw on this very screen while typing the above heading.
Anchors are wondrous things. They let you create links to a specific spot in an overly long article like this one. They help your search results because Google often notices them and adds a little mini-link to let people jump into the document. And you can create these little marvels by just filling in a field. By contrast, see this article on how to create anchors in the Classic editor. I’m using the archived page because someone is likely to rewrite this article to a much shorter one that tell folks to just use blocks instead.
Don’t need as much CSS to get by
Don’t get me wrong. In website design, it never hurts to know a little CSS to get that extra degree of control. But with Blocks you need it less because many blocks have settings for the things you commonly want to change, like colors and margins. And if they don’t, you can usually find plugin that does.
Contrast this to Classic editor, where if you want to precisely control the appearance of something you typically have to get into HTML mode and rock some style properties, while praying the editor doesn’t decide your customizations are mistakes and “fix” them for you.
If you do know a little CSS, blocks lets you leverage it safely by having an “advanced” CSS class name property on every block (see previous image). If you know enough CSS to be dangerous, use this feature in conjunction with the custom CSS capability provided by your theme to control the styling of elements.
You can do this in Classic editor too, but it’s easier in Blocks because there’s an actual field for it instead of you having to muck around in the HTML of the page.
In Conclusion
There’s a lot more to say about Blocks, and it’s still evolving, mostly for the better. New capabilities are available daily from plugin developers. Meanwhile, development of plugins for Classic is stagnant. Blocks are the future! It may be annoying because most people don’t like change, but it’s already the better choice for your page editing needs.
(My wife read this and said, “It’s still a sellout shift to the dark side, moving towards the Squarespace, Wix, etc, way of doing things.” So I haven’t sold her on it, but maybe I’ve convinced you to give blocks a chance?)