The pain with sourcecode in WordPress

I don’t know why, but I always felt better when I prepared my blog posts somewhere else (Google Docs in my case) and then just pasted them to wordpress.com. I wanted some backup – but there is WordPress feature for that. But the most important factor was their editor. It was able to mess up with the post in a one-way way (when undo doesn’t help), so I just refused to use it in the first place. Google has versioning, reliable undo, auto-saves often, etc.

The biggest issue was always related to posting source code examples. In “good old” WordPress editor I had some workflow that worked well enough when I was pasting code from Google Docs, I had to go through it and fix some details, but it was usable.

And then their new editor (Beep beep boop) came. What was easy before became nearly impossible now. Not to be all negative, normal formatted text can be easily copied/pasted from Google Doc to WordPress, so I don’t have to care about hyperlinks and formatting anymore. But the source code – that had its issues before – got virtually “unpastable”. At least not directly.

With old editor I often just started in HTML view, pasted the plaintext there and formatted headers and bolds and links in Visual mode. Annoying, but working. But we will not discuss this scenario, because that requires a lot of work after the paste. We will focus on the Visual mode of new editor – how unreliable that one is when you want to just copy/paste something in it. After all, I expected that more will work with new editor – but it didn’t deliver.

Basic workflow

It’s pretty easy. I open the WordPress editor, paste the post title and then paste the whole post in Visual mode. At the bottom of it I have my tags for the post. Tags are just another new stupid issue with the new editor, but it doesn’t kill so much time as source code does. I use sources a lot in my posts, it’s my line of work after all.

So after the whole post is there, it’s time to go over all the sources and fix them one by one. Well, let’s see what happens when you paste code from Google Doc directly:

copy-paste-source-from-googledocYou can paste with Ctrl+V or Ctrl+Shift+V – but the latter is not useful when you need formatting in your post – and you always do. Ctrl+Shift+V would be useful during fixing the codes one by one, but it doesn’t work when you do it directly from Google Doc anyway. It just screws them in different manner.

Spoiler: You can copy/paste directly in HTML mode. But we will stay in Visual mode for a bit longer and introduce more of its annoyances.

Copy/paste inside the post breaks it too!

Ok, this really got me. Maybe we can have some understanding when some editor doesn’t accept pasted stuff from different product – but this one cannot even accept its own stuff. I wanted to rewrite “tags” to in order to get syntax highlighting. Let’s see how that went:

copy-paste-demages-sourcesWhich leads us to another problem – undo. It completely breaks sources that were OK before. And not just the one that is around, but also others:

undo-damages-other-sourcesThis renders undo as extremely unreliable feature. There is no way to undo this mess after it happened. You have to fix it manually or reload the page to get the last working draft (if you made some changes – your fault). It will tell you about newer version and asks you to restore it, which you – of course – don’t want now. To get rid of this, click on Save Draft (after that reload). Trash probably removes the whole post I guess, so there is no way to discard current changes.

Any way to copy stuff?

As I mentioned, you can try it in HTML mode if it is what leads to success – and in case of it seems to be working solution. But how about in Visual mode? If you copy/paste things a lot – funny I do, because I fight copy/paste coding mercilessly – you might have noticed that often the source program kinda affects how the things are pasted. In this case it results in mess whether you use Ctrl+V or the same with Shift added (normally works as copy without format, not sure what it suppose to do in Beep-beep-poo editor though).

But what if we drag the text through something that makes it plain text? So I tried to paste it into a notepad first (Notepad2 here, but it doesn’t make a difference) and then copy it from there:

paste-via-notepadA bit longer “video”, again this is not without its twist. We have to Ctrl+Shift+V from plain text editor, otherwise the pasted text contains nbsp… which may be harmless (haven’t tried), but I simply don’t want it there. I expect some “canonical” representation of what I work on in my editor, not low level HTML stuff.

Undo is documented again – after simple paste only the pasted code is messed, after Undo other codes are affected too.

Tags

This again seems like win of Web 2.0 over reason. Before I could just copy/paste all my tags separated with a comma – at once. Not anymore. If you do so they will all form one giant tag. You simply have to write (or paste) them one by one. While writing, comma works as a separator and it instantly ends the word and makes it a tag bubble. But goodbye to “batch” copy/paste.

Final words

The biggest trouble is how brittle it all is. How easy it is to damage all the nicely formatted source code with a single Undo. Would you seriously consider writing in such an editor? I merely tip-toe around it, paste my post, fix the mess and Publish as soon as I can. It is possible to Edit simple typos later. But anything beyond that…? Well my trust is not there.

If WordPress developers ever change the editor again, I hope they will go for usability that actually involves copy/paste as well. I don’t know, maybe I’m such a weirdo and “lucky” to find all these corner-cases (it’s not only WordPress after all) – maybe I’d be great tester. But I seriously don’t think I’m pushing everything to some limits or so.

After all – I just copy/pasted in this case! 🙂

BTW: My previous post was copy/pasted to Visual editor to preserve all the formatting and links, and then I switched to HTML where I easily copied all the code (one by one). Seems to be my workflow of choice for some time. Visual editor and code simply don’t go together.

Advertisements

About virgo47
Java Developer by profession in the first place. Gamer and amateur musician. And father too. Naive believer in brighter future. Step by step.

Leave a Reply

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s