Gutenberg Copy Paste Styles - Unclear how to resolve clipboard permissions error

[Gustavo-Hilario]

Quick summary

When we try to copy and paste styles into another block, we get this error message:

Unable to paste styles. Please allow browser clipboard permissions before continuing.

Even after enabling clipboard permission for WordPress.com, the styles cannot be pasted.

Steps to reproduce

1. Create a new page or post.
2. Create some content, like paragraphs with text, and customize it. You can try to add new colors, borders, or anything else.
3. Create another element and try copying the styles from the previous block into this new one.
4. You should get the error: Unable to paste styles. Please allow browser clipboard permissions before continuing.

What you expected to happen

I'd expect the customization made to the block to be copied and passed into the new one.

What actually happened

Pasting styles don't work even on a simple paragraph block. It seems to be working more like the Copy Block option.

Screen.Capture.on.2023-03-16.at.15-55-53.mp4

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

The workaround here is to copy and paste the block and edit the content.

This feature isn't publicly documented yet. I can't find anything on our support documentation that teach us how to use these options. Also, the error message doesn't give us details on what and how to adjust the clipboard settings:

Unable to paste styles. Please allow browser clipboard permissions before continuing.

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple: Replicated
• Tested on AT: Replicated
• Tested on Self-hosted: Replicated
• Replicable on Core? Yes - by design

Update - found the introduction of the Copy Styles feature here: WordPress/gutenberg#45477 (from Gutenberg 15.0). It seems this clipboard permissions issue is expected; but it's pretty tough to tell what to do about it. (From the original PR:)

Worth noting that for security reasons, reading from the clipboard requires additional permissions. If permission is denied, we'll show a warning snackbar to notify the user. Different browsers have different ways to ask for permissions natively.

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated in all test environments.

Self-Hosted Example

Screen.Capture.on.2023-03-28.at.17-58-27.mov

📌 ACTIONS

• Assigned to Cylon
• Escalated here: p1680052868853139-slack-CBTN58FTJ to seek further input on how we can improve this experience

[cuemarie]

Even after enabling clipboard permission for WordPress.com, the styles cannot be pasted.

Hey @Gustavo-Hilario , how did you enable the clipboard permissions? Thank you! not urgent as looks like folks are working on this already :)

[kevin940726]

It's a cross-origin iframe issue that didn't come to my mind when I first implemented it 😞 . Fortunately, the fix seems to be relatively simple enough, at least from WordPress.com's standpoint. Based on this article, the easiest way to fix this is to add the necessary allow attribute to the iframe.

<iframe
  <!-- ... -->
  allow="clipboard-read"
/>

Note that adding it in the devtools doesn't seem to work without reloading the frame.

Firefox seems to require the same attribute, while Safari seems to be working without it 🤔 .

Anything I can do to help add it? 🙇

[mattwiebe]

@kevin940726 you might be able to add it here: https://github.com/Automattic/wp-calypso/blob/trunk/client/gutenberg/editor/iframe.tsx

[kevin940726]

@mattwiebe Thanks! I created #75082. I don't think I'm able to setup the dev environment though. Will be nice if someone can help me test it 🙇 .

[kevin940726]

I think we can close this now that #75082 is merged? Please re-open it if the problem still exists 🙇 !

[pablorq]

It doesn't work on Firefox 114.

Workaround
about:config
dom.events.asyncClipboard.readText = true

More info
https://wordpress.org/support/topic/copy-paste-style-not-working-with-firefox-or-safari/
https://caniuse.com/?search=clipboard.read

[jrmyfranck]

dom.events.asyncClipboard.readText = true

@pablorq Thank you so much — this was driving me crazy in FF.
Any downsides to this approach?

[fdevin]

In my particular case, it happened with Reusable Blocks. Trying to copy the styles of the block to another similar block (just not reusable) launched that warning

[wpgaurav]

It's still happening even after addingdom.events.asyncClipboard.readText = true. Firefox 116 on MacOS Sonoma

[Brian-MCO]

This error persists. Safari 17, MacOS Sonoma,

[jakejackson1]

It's still happening even after addingdom.events.asyncClipboard.readText = true. Firefox 116 on MacOS Sonoma

I had to also set dom.events.testing.asyncClipboard = true for this to work.

[KevinChauvet]

It's still happening even after addingdom.events.asyncClipboard.readText = true. Firefox 116 on MacOS Sonoma

I had to also set dom.events.testing.asyncClipboard = true for this to work.

You rock mate! It is still an issue on Firefox, but works with your solution!

[jrd10]

Thank you

Style copy-paste with: WP 6.6.1, on:

• Firefox ESR (Ubuntu) 115.14.0esr (64-bit)

• Floorp 11.17.5 (64-bit)

with True for

• devtools.screenshot.clipboard.enabled
  and
• dom.events.testing.asyncClipboard

work fine

Have a nice Sunday