Behind the Wheel of the Block Editor’s Classic Block

Changing to a new and unfamiliar system can be really nerve-wracking! That’s the experience I have every time I get behind the wheel of a rental car that’s different than the car I usually drive. Suddenly I’m confronted with a dashboard and indicators that might or might not look familiar. Unless I sit for a few minutes, look over the dash, and get a feel for the car, I end up leaving the rental agency’s parking space with a sinking feeling in the pit of my stomach. OMG-why is that light blinking? What do all these buttons do? Why can’t I shut off the radio? It can take a good half-hour of being on the road until my initial discomfort subsides as I become more familiar with not only the dashboard but how the car drives.

Then, I don’t think about it any longer. It’s familiar and I can get on with driving to wherever I need to go.

Under the hood

Start by opening your own site’s MySite Block Editor in (live links) a test post or test page in a new browser tab to follow along.

If this is your first time opening the Block Editor in your MySite dashboard, you’ll be greeted by a pop-up window “Meet the Classic Block”. Click through and then go ahead and close it.

Over on the right side of your screen there’s a lot happening (maybe even too much). At the top of that sidebar, you’ll see several icons that open a related sidebar:

The first two icons, the Gear icon (1) and the vertical Ellipsis (2), are static and always visible. The other two icons, the green Jetpack icon (3) and the Global Styles icon (4), can be hidden so there’s less visual clutter at the top. Let’s hide them now since we won’t be using them frequently.

Hey! My sidebar disappeared! Click the Gear icon and it will return.

Let’s now click on the vertical Ellipsis (2) icon and look towards the middle of that sidebar where you see Plugins. Click on Jetpack and the Jetpack sidebar will display without activating the icon at the top; same goes for Global Styles. If you want them back as icons, click the ⭐ icon again to pin them at the top.

Since the Ellipsis sidebar is one we’ll use more frequently, let’s dig into it:

• View:
  • Top Toolbar: checking this option pins the toolbar and block settings of the block you are using to the top of your Editor workspace and prevents them from shifting around when you click into a different block. Highly recommended!
  • Spotlight Mode: lets you focus on one block at a time by dimming other blocks.
  • Fullscreen Mode: This view is turned on by default and turning it off inexplicably makes the Admin dashboard sidebar appear on the left of your Editor workspace.
• Editor
  • Visual Editor: this is the default Editor.
  • Code Editor: When this Editor is active you can write or paste plain text or HTML directly in the workspace. If you save a draft and and exit while still in the Code Editor, you can resume writing in plain text or HTML when you reopen your draft. If you switch to the Visual Editor, the content will be converted to a Classic block. More on this in a moment.
• Plugins
  • Jetpack: set up and customize your Publicize and social sharing settings. Discussed above.
  • Global Styles: change global typography settings. Also discussed above.
• Tools
  • Block Manager: (As of 2022, this appears under Preferences>Blocks) allows you to hide or display individual blocks as well as groups of blocks in the full list that opens when clicking the blue square with the plus sign at the top left of your browser window (Block Selector). I’ve covered managing blocks in detail in this post. Limiting the number of visible blocks here helped me tame the Block Selector.
  • Manage all Reusable Blocks: What, you are asking, are Reusable Blocks? Are you reusing a snippet of text from one post to another? Reusable blocks allow you to write it once and insert it when and where you want it. I’m covering this feature in detail in a future post.
  • Keyboard Shortcuts: displays all the keyboard shortcuts available, including Global, Selection, Block and Text formatting shortcuts.
  • Welcome Guide: three, short overlay screens welcoming you to your website.
  • Copy all content: this option will appear only when your post or page has content.
  • HELP: Clicking on this link at the bottom of the Ellipsis sidebar opens the support guide to the WordPress Editor on our support site.
• Options: (As of 2022, this was renamed Preferences) Currently includes General Options, Keyboard Options, Document Panels and Advanced Panels. For our purposes, let’s leave the default settings as they are.

Now that we’ve finished digging under the hood, let’s take a short break and get behind the wheel of a classic Mustang with Oliver Bryant at Daytona Speedway.

Grab your ear protection gear! It’s loud!

It feels like we’ve been stuck in neutral so far, but we need to take one more detour before we get on the road with the Classic block itself.

Top Tools

The top left side of our dashboard, er, Editor workspace has important indicators:

5. On the very left side is the large WordPress icon. When clicked, it brings up the sidebar overlay where you can choose another post or page to edit or exit the Editor. (Note you must have Fullscreen mode turned on to see this!)
6. Next to that is a square with a white plus sign (Block Inserter). Here you’ll find all the blocks and block patterns available, and any Reusable blocks you’ve saved. If you hover your mouse over a block thumbnail, it will display a preview of the block’s content.
7. The pencil icon indicates that you are in editing mode. Clicking it will reveal a pointer icon that makes selecting specific blocks easier.
8. Next are the Undo/Redo arrows, which can also be accomplished by keyboard shortcuts.
9. The circle “i” (information) icon gives you details about your post or page: the number of characters, words, headings, paragraphs, and blocks.
10. The three horizontal slanted lines are the Post or Page Navigation (renamed “List View”). When you click this icon, you’ll see a list of all the blocks you’ve added to your post or page; headings, paragraphs, images, lists, etc. You can click on any item in that list to quickly go to that block.

Did you pin your toolbar to the top of your editing workspace? If so, it will appear to the right of the Post/Page Navigation icon (10).

Congratulations! You’re now a Certificated Editor Mechanic!

So far we’ve dug under the hood in the Editor sidebars and learned what they do and briefly reviewed the top left toolbar. Now let’s get behind the wheel of the Classic block!

Classic!

Adding the Classic Block:

In the Classic block you can add and format multiple paragraphs, add and remove links, add the “More” tag, upload and/or insert media (images, video, audio, and documents), all without ever leaving the Classic block or needing to add other blocks.

You’ll find all your formatting tools in the Classic block’s familiar toolbar.

If you don’t see that second row of formatting icons, click on the toggle icon at the far right on the top row. Clicking the ? icon in the bottom row will reveal all the available Classic block keyboard shortcuts.

If you’ve pinned the toolbar to the top of your editing workspace, you’ll find all the block settings for the Classic block there.

I mentioned earlier that if you write or paste text or HTML in the Code Editor and then switch to the Visual Editor your content will be converted to a Classic block. If you open the Code Editor a second time to edit that, you may find extra formatting bits have been added by the Editor that makes editing tricky. If that happens, go to the Block settings menu and click Edit as HTML instead. This changes your Classic block to plain HTML. You’ll find, however, that when editing in both the Code Editor and in Edit as HTML there is no formatting toolbar like in WP Admin’s Classic Editor‘s Text tab. If you wish to return to Visual, click the same link in the block settings menu, which will now say Edit Visually.

The Classic block toolbar disappeared! To bring it back, click again somewhere inside the Classic block.

Adding Images in the Classic Block :

Place your cursor in the Classic block at the spot where you want to insert your image and then click the Add Media icon in the top row of the formatting toolbar. Just like in the previous Classic Editor, that will open your site’s Media Library where you can select, upload and insert either a single image or multiple images.

After inserting a single image, you can resize the image by first clicking on the image, then dragging the handles at the corners. To change the image alignment, click the image again and choose from the options in the pop-up menu that appears. Clicking the x will remove the image from your post.

Clicking the pencil icon should take you to another screen with advanced image options so you can add a caption and image alt text. Staff have advised there is a bug that prevents that screen from opening. Until this bug is squashed, you can add this information directly to the image in your Media Library or edit via the WP Admin Block Editor.

Creating Galleries in your Classic block works in much the same way as in the previous Classic Editor: click the Add Media button, select or upload multiple images and click the Continue button to create and edit your Gallery settings before inserting it in your post. Important! You’ll only see the Gallery type you selected when you preview your post and not in the Editor workspace.

ProTip: Are you using the full Block Editor in one of WordPress.com’s older themes? The Classic block also makes it easy to add the earlier, pre-block style Galleries to your post, which, depending on Gallery type, will allow you to add captions to your Gallery images.

There is one option in the Classic block’s Block Settings that I have glossed over and that is the “Convert to Blocks” option. That particular option seems to generate a number of errors. If you need to edit a previous post, my suggestion for now is to update in the WP Admin Classic Editor until the conversion process settles down.

As always, the information in this post is correct as of publication date. Changes are inevitable.

Tune-Up

In this post we dug into the Block Editor interface and its features in detail, as well as delving into the most used features for working with the Classic block in the Block Editor. We also discovered that if you wrote in the previous Classic Visual Editor, working in the Classic block is pretty similar.

However, if we learned one thing since the site-wide implementation of the Block Editor on WordPress.com it’s that people write and publish their site content in a variety of ways. Some of us write code, some use Markdown, some write in word processors or text editors and copy/paste into the Editor, some post by email or Google docs or via the WP apps. (I have no doubt I missed a few methods!) If that describes you and you’re reading this post and can’t find your way with the Block Editor, please let me know your post creation process in the comments and maybe you’ll inspire a future post!

Featured Photo by VisionPicnet on Pexels.com