I’m not sure exactly how new is the WordPress block editor, I’ve been using it for some time, but being with WordPress for over 12 years now I can say it’s new for me. I’ve decided to go over my older post and fix whatever is broken. As I often wrote about technical topics related to software including code was one of those things I did often. And very often with tons of pain. What I remember most, you couldn’t even edit and save the article without its code blocks being totally broken.
Blocks for your blogs
Yeah, I know WordPress is not only blogs. Actually I’m not overly enthusiastic about WordPress, we also run it for our company site and are not at all happy. It got much more complex and perhaps not suitable for simpler sites. I also always thought of WordPress as being pretty buggy too – I was just too lazy to move on.
I respect WordPress, it hosts my occasional blogs for free, perhaps throwing ads here and there, so what. I never trusted the site enough to actually write the post directly there. I always prepared my posts on Google Docs first, then copy/pasted them into WordPress editor and did the final touches – typically around those code blocks (not to be mistaken for the “new blocks”).
When I first encountered the block editor I was surprised and can’t remember the feelings exactly – perhaps it’s good. Let’s just focus on what stayed, perhaps it was affected by some improvements. One of the most impressive things for me is that I can still copy/paste the article and it looks good.
I also went over a couple of older posts with some code and so far so good. Sure, none of those articles had any XML/HTML code in it but there were some ampersands which also happens to be a rascal. But it’s not all rosy – and as often these days it has to do with UX.
Slash commands
I’ve authored a lot of AsciiDoc text during the last two years, mostly using AsciiDoctor as it is the most live thing on the scene, really. I love it, it’s still a plain-text mark-up language (read sort of Markdown) just more powerful and more suited for technical documentation. And as with this kind of language you are really productive.
With WordPress blocks you click a lot. There are many types of blocks you can choose from and with all the changes in UI you have to read some manual or watch a tutorial as the “clean” UI is so clean you have to guess what is what and be thankful there are at least tooltips. But hovering over questionable icons is not my idea of fun. There are also very few icons, everything rolls out when you click on something. Looks neat, but it’s pain to use, really.
Today I needed to insert more codeblocks I could stand with all that clicking so I searched for a better way, for a macro or command. And there really are slash commands for inserting specific block types! So you can write /cod<Enter> and bang – there is a code block waiting for you. Of course a lot is to be desired, like why can’t I quickly type (with suggestions, of course!) also the language I want to use for syntax highlighter, but even this is a big timesaver.
There are also some keyboard shortcuts, but these are easy to forget unless you use the editor daily. But – again, nice touch – they are mentioned in context menus so when I forget I just need to do it once with the mouse and then remember it even for a while.
In my case I needed Remove Block a lot, some blocks are difficult to get rid of and I also didn’t have to remember whether I need to use Backspace or Delete key without accidentally adjusting the format of the adjacent block.
Pictures and UX
One of the things that got broken in my older posts were the pictures I linked from Google Photos. Now you can always rely on a non-affiliated service to mess the things up. So I decided to move the pictures on WordPress. Don’t expect any REST API kung-fu here, I plan to go over it manually and reflect on my past.
And here is my biggest gripe with the new editor yet. I have to google how to work with it’s media editor. Yes, it’s easy to just copy/paste the picture – but it’s also easy to do it twice. For example, if you want the same picture in the post and as a featured image (above the article title) and you just copy/paste it twice, there is no deduplication – although I admit it is a bit of an advanced requirement.
I was also extremely confused how to get to the media library from the post. There is no icon, it’s all use-case driven – which is probably OK, but you just can’t suddenly have the idea like me “let’s see my images”. So even if you don’t want to insert an image or change the featured image you need to act like you do. Just open a new block, write /im<Enter> and you can get to the Media Library!
Just don’t try to exit this by clicking elsewhere, this is a block already! If you pressed Escape to get rid of the Media Library, you did well. But here Escape will not save you. But clicking the “three-dots” menu will show the way – or just press Shift+Alt+Z to remove this “block embryo”, however unintuitive it is.
In the Media Library it’s again hit and miss approach to find out whether my images are uploaded in their full size as it is not obvious in the post. To find out, you have to select the image and click Edit, that’s where you can finally see the resolution.
In the editor itself you can choose the image size and it’s scaling in % and they work in tandem – I have no idea what I actually want to use. Sometimes setting the size lower makes the image bigger at first, no idea what is happening. And linking to the full image? It’s not on the right sidebar (aka Block settings) but in the Block Toolbar.
Now when you know all this, it seems OK and after a while I know exactly where to click – but it’s still a lot of clicking! Also, images narrower than the text seems to be centered but that’s just an illusion. You have to use align from the block toolbar, which looks different from normal text align for some good UX reason.
Conclusion
Now, remembering that pain of the old editor I believe this one is much better. It’s a rather unorthodox approach and I have to give the WordPress team the credit for what they are trying to do. It’s a lot of clicking though and things are non-obvious at best. Why not suggest slash-commands somewhere in the process? Actually… they did – but again in an obscure way. When I press Enter to start a new block, this is what I see:
Their blocks are often even less obvious, sometimes when I click back into the block it doesn’t even show me the blinking cursor before I start writing. But if you click away from that empty block or press Escape the magic happens (red box emphasis is mine):
Pity they hide it at first. But now I see that they tried and they care.
So the editor obviously needs more attention, but for something so completely different, so blocky and clickity I totally appreciate that copy/paste works so great.
And if this post ends here, it means I had no troubles with it on the way from Google Docs. And that’s good.
Post conclusion
Nearly! The images were there, but they didn’t make it to the Media Library. I had to download them manually as files, not even URL for posted content worked. So this is something to be desired – not even copy/paste directly to Media Library works now so this process is a bit tedious. But there should be an option for the WordPress editor to take the ownership of these images instead of just linking to them.
Also copy/pasting image blocks in the editor doesn’t seem to work and moving them by clicking arrows is awful. Hopefully some there will be keyboard shortcuts for this too.
Well… it was close. I can manage in the meantime.