I’m publishing this as a quick, public reference on moving content from editorial in Google Docs to Wordpress. There are a lot of wrong ways to do this, and not really any canonical right way, as far as I can tell. It’s frankly kind of a stupid problem, but it falls in the uncanny valley between being worth $0 to solve and being worth real money to solve, so it just goes unsolved, it seems.
Anyway, I digress.
The Problem with Copy/Paste from Google Docs to Wordpress
There are at least two problems that arise when you copy and paste directly from Google docs:
- You can mess up the appearance and UX of the client’s blog.
- You can mess up Wordpress’s editor and make your own life harder (or the post weird)
The reason these, and possibly other issues, happen is that when you copy and paste from Google docs, a lot of formatting information comes along for the ride without you actually seeing it. To understand, consider this sample I pasted into Make Me a Programmmer from our old author handbook.
That looks unremarkable in the WYSIWYG editor, but here’s what it looks like when you switch to code view.
All of that “span style” junk is embedded formatting information. It usually won’t look like much of anything in the editor, but it can look weird live on the client site. And even if it doesn’t today, it may later, when the client switches themes. And switching themes only to have half of your blog posts look weird because of something that happened a long time ago is going to be a nightmare for the client to track down.
The other thing that can occur is that your own experience in the editor can degrade. The WYSIWYG editor adds and removes all of those tags behind the scenes, and that’s how it’s actually making fonts bold, making things headers, etc. If you add a bunch of superfluous tags, you make its job harder, and it can start to get things wrong. When this happens, you’ll find yourself having to hit backspace multiple times, for instance, to get rid of a single line.
In the end, this extra formatting gunk is a real problem, and we can’t have it.
Fixing This
Method 1: Paste as Plain Text
Reliable, foolproof, and labor-intensive, this is the simplest way to avoid the problem. You simply paste the text from Google docs into Wordpress as plain text (achievable with Ctrl-Shift-v / Cmd-Shift-v, or by pasting into a text editor and then into Wordpress).
When you do this, there’s zero chance of any formatting crap coming along for the ride because absolutely nothing comes along for the ride. The downside is that you’ll have to go in and manually add all of the formatting, such as headers, font-weights, hyperlinks, and bullets.
Generally I find that this is tolerable with refreshes where you’re surgically making changes and maybe adding a section or two. It gets a little onerous for a full length post, though I also will go this route sometimes, maybe while listening to a podcast or something.
Method 2: Word as an Intermediary
Assuming you have Microsoft Word, you can export a Google Doc as a Word file. From the Word file, you can do the same copy and paste you want to with Google docs. The same content from the beginning of the post, in code view, now looks like this (which is fine).
You’ll definitely want to check the formatting when you’re done, because I can’t speak for every edge case of MSWord, but generally it’s a cleaner paste.
If you don’t have Word, you can always try this out with another Word processing desktop client.
Sanity Checking
If you’re going to copy from Google docs in any fashion, it’s good to sanity check what you’ve done. This involves two checks:
- View the post you’re working on in preview mode, which furnishes a live view of what it should look like on the client site.
- Check the code editor view to see if there are a bunch of extra tags or not.
Your Input Welcome
If anyone in our orbit, during the course of ContentOps, comes up with a better, cleaner solution to this problem, we’re all ears. Please let us know and we’ll update this documentation accordingly.
And, finally, here’s a video walking through all of this, if it helps.