Pasting text from Microsoft Word creates an Image block instead of text in a Paragraph Block

[sstabrizi]

Quick summary

I've had multiple reports (2) that pasting text from Microsoft Word generates an Image Block instead of pasting the text into the Paragraph Block.

Steps to reproduce

I'm in chat so I've been unable to test.

What you expected to happen

The text should have been added as text in a paragraph block.

What actually happened

When pasting the test shows up as an image block and is added as a file in media.

Context

33069050-hc

Simple, Atomic or both?

No response

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

No response

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

• Option 1: Paste text in a text editor like notepad first, then paste that text in a paragraph block.
• Option 2: Use the Classic Block which after the pasting can be converted into standard blocks.
• Option 3, not always reliable: right-clicking and using "Paste and Match Style"

[fresatomica]

We've seen numerous reports of this on the forums: https://wordpress.com/forums/topic/pasted-text-becomes-image/?view=all.
https://wordpress.com/forums/topic/pasting-text-from-microsoft-word/

I tested this on MacBook but was unable to reproduce, not sure if it's something that only happens on Microsoft.

[fresatomica]

Another report from the forums: https://wordpress.com/forums/topic/pasting-text-from-a-word-document-with-hyperlinks/?view=all

When I use command+V it will paste the text as an image. I can use command+shift+V to paste the text but it does so without the formatting and the embedded hyperlinks.

[sharonlaker19]

Another report at 31592894-hc, shared the recommended workarounds.

[mxhassani]

Two other cases:
4799135-zen (< Predef here)
34291775-hc

Another workaround would be to use the Classic block

It supports formating as expected.

[hacchism]

Another report in 32252137-hc. Shared the recommended workaround.

[mcsf]

Likely culprit: WordPress/gutenberg#38459 (mine)

I'll take a look. The first step is to get a copy of Word to work on my Windows virtual machine.

[mcsf]

I see feedback from others being unable to reproduce the bug, so it would be useful to know if there are specific operating systems or versions of Word where this happens.

[mxhassani]

@mcsf Not sure about Word version, but all of the above hc links refer to Mac OS X
Not sure if it was already the case, I am able to replicate with Big Sur - Numbers: simple past to editor shows an image, past to a classic block shows a table.

[mcsf]

Not sure if it was already the case, I am able to replicate with Big Sur - Numbers: simple past to editor shows an image, past to a classic block shows a table.

This is helpful, because I was still under the impression that Office was the only suite doing the weird trick of copying an image render of the content. If not, then we should move away from the current approach — which was to detect pastes from Word — to something based on the kind of content found in the HTML payload.

[mcsf]

Ongoing fix at WordPress/gutenberg#38992

[mcsf]

I've been testing this fix in several environments, with different kinds of content, but I need all the testing I can get.

I've pushed my little VM to the limit, so anyone who has:

• a working copy of desktop MS Word on Windows, or
• a working copy of Google Chrome on Windows + access to the in-browser Word client

could test the following scenarios:

• copy an image from the Word document, paste into Gutenberg; verify that a new Image block appears and that the image was actually uploaded to the WordPress site; verify that it's not a Paragraph block with an inline image
• copy a region of rich text from the Word document (e.g. a heading and a paragraph), paste into Gutenberg; verify that the appropriate blocks have been created to reflect the source (e.g. Heading and Paragraph blocks)
• copy a region that includes both rich text and an image, paste into Gutenberg, verify that the result was satisfactory (and let me know what it was!).

For each of these scenarios, keep an eye on the browser console and collect the lines that read "Received HTML:" and "Received plain text:".

Thank you. 🙏

[zdenys]

4805355-zd-woothemes I suggested using the Classic Block which after the pasting can be converted into standard blocks.

[tvolpert]

I had two instances of this recently:
31490503-hc
34032942-hc

for the first user, right-clicking and using "Paste and Match Style" worked, but the second user got the same result with that flow.

[CoachBirgit]

Also reported 4801745-ZD

User is pasting content several years from Word to the block editor without big hassle, but recently, there must be a change, so the pasted text renders into an image block.

MacOS + Chrome

I could reproduce this behavior on my system:

Copy & paste unformatted text from Microsoft Word to WordPress Editor resulted into a rendered image with text as an image block

• MacOS Monterey 12.2.1
• Microsoft Word for Mac 16.58
• Google Chrome Version 98.0.4758.109

No issues with Firefox

Pasting content with CMD + Shift + V results in a paragraph block without formatting

[formosattic]

Internal ping for help testing on Windows: p1646127166880879-slack-C03UXG192

Thanks for sharing other workarounds @zdenys, @tvolpert , I've added them to the initial report.

@CoachBirgit, thanks for the report! Where it still fails in Chrome, could you check the browser console and share the lines that read "Received HTML:" and "Received plain text:".

[mcsf]

This should be fixed as of #60969; please confirm.

[CoachBirgit]

ping formosattic

@CoachBirgit, thanks for the report! Where it still fails in Chrome, could you check the browser console and share the lines that read "Received HTML:" and "Received plain text:".

I checked this some minutes ago. It seems to work now on my reported setup with Chrome on MacOS. The text copied from Word is pasted formatted into a paragraph block.

Received HTML:

<p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'>Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Aliquam vel neque pretium, semper
tellus at, rhoncus purus. Ut pretium ligula nec feugiat consequat. Suspendisse
fringilla tempor augue, sed convallis magna posuere nec. Suspendisse a cursus
arcu. Duis eget egestas tortor. <b>In hac habitasse platea dictumst</b>. Nullam
sagittis nulla ut sodales sollicitudin. Curabitur eu ex ornare, viverra ipsum
eget, convallis augue. </span>Vestibulum pulvinar eu massa et rhoncus. Fusce
diam magna, porttitor ut elit id, mattis consectetur elit.<o:p></o:p></p>

Received plain text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque pretium, semper tellus at, rhoncus purus. Ut pretium ligula nec feugiat consequat. Suspendisse fringilla tempor augue, sed convallis magna posuere nec. Suspendisse a cursus arcu. Duis eget egestas tortor. In hac habitasse platea dictumst. Nullam sagittis nulla ut sodales sollicitudin. Curabitur eu ex ornare, viverra ipsum eget, convallis augue. Vestibulum pulvinar eu massa et rhoncus. Fusce diam magna, porttitor ut elit id, mattis consectetur elit.

Processed HTML piece:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque pretium, semper tellus at, rhoncus purus. Ut pretium ligula nec feugiat consequat. Suspendisse fringilla tempor augue, sed convallis magna posuere nec. Suspendisse a cursus arcu. Duis eget egestas tortor. <strong>In hac habitasse platea dictumst</strong>. Nullam sagittis nulla ut sodales sollicitudin. Curabitur eu ex ornare, viverra ipsum eget, convallis augue. Vestibulum pulvinar eu massa et rhoncus. Fusce diam magna, porttitor ut elit id, mattis consectetur elit.</p>

[formosattic]

Thanks for the fix @mcsf , and @CoachBirgit for checking! Looks safe to close.

[ahegyes]

We got a report of this happening again just the other day: 5409300-zd-woothemes

The user was kind enough to share their Word document with me, and I was able to isolate the troublesome part in this "Lorem Ipsum" version of it: Pasted as PNG bug.docx

Basically what I think is going on is that the picture embedded into the document is malformed and throws off the Gutenberg import into thinking the whole thing is an image. I still think it's kind of cool that it then turns the text around it into a proper picture, but not good ...

I tested this both on Windows and Mac, both on WordPress.com and a self-hosted WP site. I was able to reproduce the issue in Safari, Chrome, and Edge, but NOT in Firefox.

The workaround for this was to paste it into the title field instead of the body.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 4799135-zen
• 4805355-zen
• 4801745-zen
• 5409300-zen

[Robertght]

It looks like this may come as a fix in Gutenberg 13.8: WordPress/gutenberg#42321

[mcsf]

@ahegyes: I'm not detecting anything unexpected in my testing using the file you provided, so could you record a quick video of the issue? Thanks.

[ahegyes]

@mcsf Here's a recording of my screen performing the steps: https://d.pr/v/jQOwGE

[mcsf]

Thanks, @ahegyes. I can only repro in Chrome, at least on macOS. Firefox and Safari both do the right thing. Can you confirm that, on Windows, this only affects Chrome and not Firefox? Is Edge also affected (since it's based on Chromium)?

[ahegyes]

So I went ahead and tried this again on both laptops @mcsf; for some reason, I was not able to reproduce this on Windows neither on Edge, Chrome, or Firefox (now I'm questioning whether I actually tried or just meant to and forgot earlier -- apologies for that);

On macOS, however, I could consistently reproduce this both in Chrome and Edge. It works for me in Firefox and Safari. The recording I linked earlier was actually from Edge on macOS.

The user in the ZenDesk ticket I linked is using Safari (visible in one of the screenshots she sent) and she is experiencing this as well. Both my document and hers were working right now for me on Safari though.

Could it be that it depends on the actual versions of the software being used? Like a Safari/macOS/Word update changing whether this is reproducible or not?

[mcsf]

Thanks for the details and testing. I have a fix at WordPress/gutenberg#42785, though I'm not quite happy with it. That is, I'm confident that it fixes that particular edge case, but it makes assumptions that I don't like, potentially creating new classes of false positives.

There's always the possibility of filing an issue / asking around in the Chromium project, to determine whether we could consider this a browser bug.

[mcsf]

@ahegyes: the fix was just merged and should be available in the next Gutenberg version, 13.8. Feel free to close this.

[ahegyes]

Thank you, @mcsf!