Using the Classic Editor Block

Edited to Add: for those of you comfortable with minimal directions, the gallery at the bottom might be all that is needed and you can probably get through it in under five minutes.

This is a long post and composed entirely using the Classic Editor Block in the Block Editor environment.

Yes, the Classic Editor is still available, and yes, people prefer it (including me) . . . BUT . . . this is coming, so I figure I’d do a tutorial.

Using the Classic Editor block is a way to ease into using blocks and while I have a lot of slides, it’s not because it’s difficult. It’s actually super-easy, barely an inconvenience (but some inconvenience).

I think the problem is that people aren’t familiar with what are, frankly, some confusing aspects of working with block.

WARNING: this is a long post, but it’s mostly slides (and there’s a gallery of all the slides at the end).

NOTE: I’m using a PC. I don’t use my phone to compose stuff unless I want to punish myself. If you’re on a phone reading this, you won’t get anything from it because you won’t be able to read the text.

This should be the same for both free and paid blogs (not the .ORG blogs as I don’t have those so I don’t know).

So, here we go . . . begin by going to your dashboard . . . (mostly slides from here on) . . .

01b02b03b04b05b06b07b09b

OK, so you are now editing in the Block Editor’s Classic Editor Block. Let me cover a few things about working in this environment . . . .

11b12b13b14b

To reiterate what happened, you clicked and typed outside the Classic Block and you created a new block. The way you know it is that the “regular” menu has disappeared and you now have a different menu (the Paragraph Block Menu).

Note: I made a typo in some of the next examples and I didn’t want to go back and recreate the screen captures, so I scratch out the error. I had meant to say a new block is created “outside” the Classic Block but I instead typed “within” (it was late; I was tired).

15a15b15c

What likely frustrates many new users is that you cannot tell you are in different block . . . well, you can turn on something that helps . . .

17b

18b

Note where the cursor is on the following slide; the side menu tells me I’m in a “Paragraph” block (meaning, I’m outside the Classic Block).

19b

When I click on the first sentence, my cursor moves, and the side menu shows me that I’m back inside the Classic Block.

Note, also, that you still can’t tell where the blocks end.

20b

I know this is a post about using the Classic Block, but let me take a small detour and highlight some things that you can do with paragraph blocks . . .

21B22B

OK, back to the Classic Block and working in this environment.

23B

I didn’t mention it, but if you are working on a long post, the menu with all the formatting is always visible at the top of your window. It floats to always be visible. If you don’t see it, you’ve gone off the reservation.

24B

This next part might also be a source of confusion . . .

25B

The next slide is what it looks like the moment I type anything there.

26B

27B

28B

Just to be clear . . . before you type anything outside the Classic Block (or any block), you can click the [+] box and choose what type of new block you want. In this case, I’ll add another Classic Block.

29B

Here’s how you can move individual blocks . . .

30B31B32B33B

OK, Disperser, you dolt! You’re missing the point!

I don’t want to learn how to use blocks! I just want to use the one block . . . the Classic Block!!!

OK, OK . . . so, here’s what I do . . . When I create a Classic Block, I immediately add a line of text that tells me where the end of the block is . . . in my case, I also add line markers, but you don’t have to.

Here, let me show you.

34B35B36B37B38B39B

Disperser! You idiot! That’s too complicated for me!

OK, then just do this:

40B41B42B

Hey, Disperser . . . how do I publish a post once I’m done composing it?

Glad you asked . . .

43B44B45B

WAIT!! . . . I FORGOT TO ADD PICTURES!

46B

Take note of that . . . you cannot just drag and drop into the classic block (or any block) because it will always create a new Image Block . . .

47B48B

So, I can’t add pictures inside the Classic Block?

Yes you can, but you have to use the Insert Media icon to do it . . .

49B50B51B52B

You can also add a gallery by choosing more than one photo . . .

52C52D52E52f

OK, we’re near the finish line . . . how to work with individual photos inside the Classic Block . . .

Pretty much like when using the Classic Editor (mostly).

53b54a54b55b56b

Edited to Add: So, right now, in editing this, I get the “other” photo menu . . . the one that has the more familiar options and the option to add a border (on the above slide and the one below), so I don’t know what’s going on.

I’m going to leave the following section in here for those who don’t get the menu above.

OK, I’ll add this next part, but it’s probably outside the interest of most people . . . but just in case . . .

Honest, I add my borders with my photo editor, and perhaps they will add the option in the Classic Block (it could be there and I just haven’t found it).

Anyway, HTML editing . . .

57b58b60b61b62b63b

These two links are some of the places you can find help with HTML editing.

https://www.wpbeginner.com/beginners-guide/how-to-add-a-border-around-an-image-in-wordpress/

https://html-color-codes.info/

64b

Here’s what you find at the first link:

64c

Here’s what you find at the second link:

64d65b

And with this, I’ll call this post done.

Feel free to ask questions and if I know the answer I’ll try to provide it, but before you do, at least try to duplicate the clicks and sequences of the above slides . . . doing is the best way to learn.

If you have learned anything from this it should be (at the minimum):

  1. Create Classic Block

  2. Mark where the end of the block is.

  3. Never type below that unless you want to add other blocks.

  4. Meaning, always make sure you are within the Classic Block when editing, and you should be OK.

Here is the gallery of all the slides in sequence. It’s easier with my comments in between, but for a quick reference, here it is . . .

Edited to add:

NOTE: the gallery contains the directions on how to use HTML to add a border around a photo, but the original method still works and it’s a LOT easier. Confusing, I know, but scroll back up to the section on editing a photo and you’ll see an image of the simpler photo menu. Sorry about the confusion.Β 

End of Block (I left this in here to remind people to use a marker for the end of the Classic Block).