Block Editor: Tips & Tricks

WordPress is changing its editor permanently and I know that invokes a gut reaction of no thank you! in a lot of people, but really, the blocks editor is great, imo. So I’m going to try convert you to my way of thinking (and also help you out some because it is not easy and definitely frustrating to use at first).

All of your posts will automatically convert to blocks on 1st June, but I would recommend first going through a few to convert manually, to check that the formatting doesn’t somehow get messed up. It does happen, and it’s nicer to know beforehand than to be suddenly hit with it.

But anyway. Some tips and tricks, to make your post-blocks permanency a little bit easier!

First of all, this is your basic layout when you open up a new post.

I’ve highlighted only three things at the moment, but they are the important ones. Top left is the block navigation. This, pretty self-explanatorily, helps you navigate the blocks and tells you what order they come in (it’s not necessarily useful until you have something like an image side-by-side with text). It also helps you select the block, should you be unable to in the post for whatever reason.

In the top right corner, the cog symbol takes you to post settings, where you can tag/categorise/schedule your post. This is the same as in classic editor (thankfully), but should the sidebar disappear for any reason, that’s where you find it.

Finally, the plus symbol I’ve circled lets you add blocks. If you hit enter on a page, the default block is going to be a paragraph but clicking that plus will let you change it (equally, the blue plus in the top left corner — this one is actually better if you want to see the whole range of blocks you can add. The black button is better if you have blocks you use often because it’ll show most common first, although there is a search function).

So. The blocks. I’ll walk you through a few of the ones you’re going to want to use most (images, paragraphs, etc) and highlight how you format things.

Paragraphs

Step one is this little down arrow. At first, it may seem as though you have limited formatting options (alignment, bold, italic, hyperlink), but if you click the arrow, you get options of inline code/image, justify, strikethrough, subscript, superscript, text colour, underline, and uppercase. By selecting the block you’re working on too, the righthand sidebar should also be showing block settings, including typography, which lets you change the text size and line height.

Headings

Headings are pretty similar to paragraphs to be honest. The only difference is that you don’t get the option to justify them, and you have the added option to change the size. Clicking where it says H2 gives you only three options, but if you scroll down the right sidebar, there are more.

It is also a lot easier to do HTML anchors with blocks. If you scroll right to the bottom of the settings sidebar, you will see a section labeled advanced.

Enter a word to refer to the header (e.g. paragraph), then go find where you want to anchor this to and add a link (e.g. #paragraph). I used this in my Fire Emblem rec list so you can see how it works there.

Images

If you choose to enter an image block, this is what you will see. You can only enter single images using this block (if you want to enter more, select gallery — see below). What I like here about blocks over classic is that you can insert from a url straight into the post instead of having to go through the media library (that option is still available though). There’s not a whole lot you can do with this block. Alignment is that strange black square thing floating above the block, and if you want to edit size or dimensions, that’s in the sidebar again (note that when you edit height or width manually, you do need to calculate what the correct width or height is, because it’ll stretch the image rather than keep the ratio the same).

Also if you hit replace (which shows up when you have an image in the block, next to alignment), you can just swap images and keep the same dimensions.

Gallery looks much like images, except you have to insert pictures through the media library. I have to admit to not using this one so much, but you can add as many pictures as you want and organise into columns (in the right sidebar). Just to note: the fewer images you have, the bigger the actual images, as opposed to the space in between them, like with classic.

Lists, quotes, and read more

These are all fairly simple blocks. Read more comes under the title “more” (not page break or anything like that). Lists are under “list”. And quotes, you can either use “quote”, “pullquote”, or “verse”.

Pretty obviously, you can switch between ordered and unordered lists, and change the indentation of each entry. Once again, though, you can’t justify the text in the lists.

Of the quotes, pullquote is probably my favourite, because you can change the colours of the lines above and below the text, as well as the text.

You can always see what the block looks like on your blog with a preview and then change the style if you want though (see next section on tips).

Classic editor

Obviously, if you want to reject the truth (that blocks is better) and return to classic editor, you can. Just add a classic editor block and write your whole post out in that. I think it may have less flexibility than the classic editor itself did though.

Now for the fun part though! There are lots of blocks you can play around with (particularly embed ones), but my favourite is probably stars.

You can do so much with stars (including half stars! — just double click on the star. Goodreads wishes it were this good). You can have the stars filled or outlined, decide how many stars you want to rate out of, and change the colour of them.

See, I told you blocks was good.

You can also switch between blocks easily. Whenever you insert one it tells you what it is with an icon (in the above image it’s that star next to the alignment). If you click that, you open up a bunch of options that you can change the block to. For something like a paragraph, you can change to a quote or heading, for example. There is a limit on the changes you can make though (annoyingly, I don’t think you can change an image block to a gallery or vice versa).

Right next to that icon when you move your mouse over it, will appear two arrows, which you can use to adjust where you want your block to appear (moving it up and down the page). This is especially useful if you want a lot of the same block because you can duplicate the block and move the copies around.

You can duplicate either using ctrl+shift+D (not sure what the Mac command is), or by clicking on more options (to the right of the down arrow in your little menu when you select the block).

One more useful keyboard shortcut: alt+shift+Z (again not sure on the Mac command). This will delete entire blocks (since the delete key only works on some).

I hope this post (although long) is helpful!

If I’ve missed off anything glaring, or you want more clarification, just drop me a comment.