In this short blog post we wanted to introduce the method that we use to upload word documents to our Gutenberg editor in WordPress.
A common workflow for authors is to write their documents in Word, and then move them to whatever platform they are going to be published on. We follow this workflow at Isotropic Design When publishing articles to our WordPress blog.
In most circles, Microsoft Word is known as the gold standard of content creation software. This is due to the immense power and tools behind it, like a very well featured spell check, grammar Lee integration, dictation, and basic text editing and styling.
In the past couple of years, WordPress transitioned from the classic editor to the Gutenberg block editor. The Gutenberg block editor is a massive update, and extremely welcomed by most authors and content creators who use the open source content management system. Gutenberg allows for block based WordPress posts, so we can easily insert images, galleries, text, and more in a visual manner.
One of the biggest issues with the Gutenberg editor is being unable to natively add content from word to word press. This is because word doesn't format its content with typical HTML. If word styled its content with HTML, simply copying and pasting from word into word press would work perfectly.
This is because word adds Microsoft Office specific tags to some styles and content within it. While typical HTML markup with bolding, italicizing, and underlining works, tables may not, images may not, and more simply might not carry over to HTML.
That means that copying and pasting word into Gutenberg which is, in essence, a HTML editor doesn't always work.
Another big issue is that copying and pasting content from anywhere into Gutenberg doesn't upload the images automatically. Instead, we find that copying and pasting content from word into Gutenberg will insert image placeholders, where you will need to upload images themselves.
If we're publishing a 5000 word article with 200 images, uploading all of these images is a complete waste of time. It makes sense that images are automatically uploaded into WordPress if you're copying and pasting from a local computer too the Gutenberg editor, but unfortunately this completely destroys the workflow an adds tons of time to the content creation process if you're simply copying and pasting.
So, you need a solution that allows you to easily add word files to Gutenberg, bring in all of the word content formatted correctly, and automatically upload and insert images.
The solution for this is called Mammoth .DOCX Converter, which is a free WordPress plugin that allows you to easily upload Microsoft Word documents to word press, automatically converts them into HTML, and then inserts them into the Gutenberg editor.
Once you've installed the plugin, all you need to do is go to the bottom of the Gutenberg editor, and upload your Microsoft Word file.
Mammoth will then automatically converted into HTML. all you need to do is click the insert into editor button, and your Microsoft Word document will be inserted into your WordPress Gutenberg block editor, ready for public consumption.
The single drawback of this plugin is that it isn't fully functional with Gutenberg. Instead it inserts all of the content into a classic editor block within Gutenberg. That means that out of the box, the plugin won't automatically translate individual paragraphs into individual Gutenberg blocks, which is what we're looking for.
There's a simple fix to this which is simply selecting all the content in the classic editor block, cutting it, and then re pasting it into the Gutenberg document. This will convert it into Gutenberg blocks, and you can happily publish your blog post quickly and easily.
So now our workflow looks like this:
We hope that this blog post has helped you in your search for a good method of uploading Microsoft Word documents into WordPress, while retaining the styling and automatically uploading and inserting images. Mammoth .DOCX Converter is free on the WordPress repository, and works very well for what we're using it for.
IsoGroup- Web Dev/Design, WordPress and More