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.

Let’s grab that analogy and drive with it. If the full Block editor makes you uncomfortable, let’s check what’s under the hood in the Block Editor interface in your browser, set it up so we can navigate around it easily, and then test drive the Classic block. Ready? Let’s 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.

Your Block Editor Interface

(Depending on your site’s theme, your Editor workspace may look a little different than mine.)

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:

  1. The Gear (Settings) icon: This is the default sidebar with document settings for your entire post or page in the Post (or Page) tab. Its layout is nearly identical to the former MySite Classic Editor sidebar and should be familiar. The Block tab in this sidebar is where you customize block settings when a block or group of blocks is active.
  2. The vertical Ellipsis (Options): Is where you can customize your Editor interface. We’ll dig into the nuts and bolts of this sidebar later.
  3. The green Jetpack icon: In this sidebar you can connect and customize your Publicize settings as well as displaying or hiding Likes and Sharing on an individual post or page.
  4. The capital letter “A” (Global Styles): lets you change the typography settings for your entire site. You might not see this icon if you are using an older theme where your Fonts are managed in the Customizer.
Screenshot of Block Editor right sidebar icons with text the content of the sidebar panel will change depending on which icon is active
The sidebar content is dynamic

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.

Click the green Jetpack icon and look at the top of the sidebar that opens. Do you see a ⭐ icon? If you click on it, the Jetpack icon and sidebar will be hidden. If you click on the x icon at the right, the sidebar will close, but the Jetpack icon will not be hidden from the top of the right sidebar.

Do the same thing now with the Global Styles icon, if you have it.

Screenshot of Jetpack sidebar and icon
The Jetpack sidebar

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:

Screenshot of Ellipsis sidebar
The Ellipsis sidebar
  • 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 WP 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: 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 inexplicably opens the support guide to the WordPress Editor on the WPorg website. WPcom users can find our guide on our support site.
  • Options: 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:

Screenshot of icons at top left side of Editor workspace
  1. 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!)
  2. Next to that is a blue square with a white plus sign (Block Selector). 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.
  3. The pencil icon indicates that you are in editing mode. Clicking it will reveal a pointer icon that makes selecting specific blocks easier.
  4. Next are the Undo/Redo arrows, which can also be accomplished by keyboard shortcuts.
  5. The circle “i” (information) icon gives you details about your post or page: the number of characters, words, headings, paragraphs, and blocks.
  6. The three horizontal slanted lines are the Post or Page Navigation. 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!

Photo by Pixabay on Pexels.com

Classic!

Adding the Classic Block:

Screenshot of typing prompt in Editor workspace
Start your engine!

Add the Classic block in your Editor workspace by either typing /classic directly on that line or by clicking the black square with the plus sign on the right or by clicking on the blue Block Selector (6) at the top left. Search for “classic” if you don’t see it. Typing /cl on that line and selecting “classic” will get you from 0-60mph the fastest.

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.

The Classic Block’s formatting toolbar looks pretty familiar

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.

Screenshot of Classic Block Settings
Block Settings

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.

Screenshot showing Classic Block image resizing handles and toolbar

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

Move the arrows side-to-side to see the Editor and Preview screens

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 today’s date. Changes are inevitable.

This tutorial is part of a series on creating posts on WordPress.com since the change to the Block Editor took place. Other posts in this series so far:

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 MySite 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!

Hi there! Preparing extensive and detailed tutorials like this one requires lots of time, care and no small amount of coffee. If you feel you learned something from my efforts, please drop a tip in my Ko-fi tip jar. Thanks!

support me on ko-fi

Until December 31, 2020, leaving me a tip will also earn you credit when The Helpdesk launches.

Featured Photo by VisionPicnet on Pexels.com

Published by JenT

Empowered by WPcom since 2006. Never stop learning.

5 thoughts on “Behind the Wheel of the Block Editor’s Classic Block

Kvetch or kvell, it's all good, but be a mensch.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.