How to Easily Paste Content into Gutenberg
WordPress Tutorial #14, Updated for the Gutenberg WordPress Editor
I’ve got good news and better news. Pasting content to your WordPress site is easier and smoother than ever with the Gutenberg editor.
Back when version 3.9 was the latest and greatest from WordPress, I wrote a post called Don’t Screw Up the Code: How to Copy and Paste Text into WordPress.
With WordPress version 5.0 (as I write this, we’re at 5.1), everything changed. This is an updated tutorial on how to copy and paste content into WordPress posts and pages using the new Gutenberg editor. If you’re still using the Classic Editor, though, follow the old instructions.
Gutenberg will smoothly take your pasted copy — from a Google Document, Word, Apple Pages, Evernote, and more — and render it into a (mostly) properly formatted WordPress page or post.
With few exceptions, it will handle headings, images, lists, and tables gracefully.
Here’s an example of some text I took from a Google Document:
Notice that it pulls the image in seamlessly, something that didn’t happen before Gutenberg.
The code is clean — here’s a code view of one paragraph:
Pasting a chunk of copy from Apple Pages yielded equally good results. Since I don’t use MS Word, I’m relying on other reports when I tell you that it handles Word documents well.
The following helpful table (click the table to see an enlarged version) from The Gutenberg Times shows what you can expect from the most frequently used programs you’ll likely be pasting copy from:
So what should you be prepared for? Let’s walk through what you’ll need to do, and any extra steps you should take, to bring your content in painlessly.
Google Docs
Pasting from a document that includes headings and images is smooth and clean.
Extra step needed:
If your copy includes images, know that they are being displayed from their original location on Google’s servers.
Here’s what the underlying code looks like:
Click the image above to see a larger version.
Note what follows the code beginning with “<img src=” — that’s the server location of the image.
Now, if you’re hosting your images in a cloud server like Amazon S3 and you want to use that cloud server to host the images on your WordPress site, you don’t need to do a thing.
But you probably don’t want to host images on your personal Google Drive account for your WordPress site, so you’ll need to swap these images out for images that you upload to your WordPress Media Library.
Also, note that the image you pasted from your Google Doc has no alt tags. You’ll want to add those when you swap the images.
Apple Pages
When you paste from Pages, your headings get lost (they’re converted to bold text), and the images don’t get pulled in.
It’s important to use proper headings, rather than leaving only bolded text, because headings affect SEO, so you want to use them properly.
Extra Steps
Using your original document as a reference, you’ll need to apply the headings manually.
It’s easy to do.
- Highlight the block that should be a heading
- Notice the Bold icon is highlighted — click to unbold the text.
- Click the paragraph symbol to change the block type to T (heading) and select the appropriate heading level.
Once you’ve fixed the headings, you’ll need to manually add the images as well.
MS Word Online and Evernote
You’ll need to adjust your headings manually when pasting from MS Word Online and from Evernote.
MS Word
While Gutenberg will handle headings alright, you’ll have to manually fix your images.
Legacy (non-Gutenberg) WordPress
Be prepared for image adjustments here as well. Note that, in the Classic Editor, you can remove images, but you cannot add them! You’ll need to convert the copy to blocks before you can add a new image.
This article replaces a previous version, titled, Don’t Screw Up the Code. If you’re using the Classic Editor rather than Gutenberg, you should follow the instructions there. Do you have questions about copying and pasting content into WordPress? Leave a comment below, or contact me.
Originally published at https://wpbuildingblocks.com on May 9, 2019.
