Make it easy to copy (and paste) block styles

[jameskoster]

It would be nice if there was a way to copy styles for a block, and 'paste' them onto another. Currently the only way to do this is to duplicate the entire block which is not always convenient, or to manually copy the tools/settings one-by-one which is extremely tedious for heavily styled blocks.

Related to #44417 and #38267, and this issue contains designs based on #44361.

Surfacing copy and paste styles in a context menu provides the full block context, and manages prominence. If possible, using nested menus option would be the clearest path forward, to further manage prominence.

A smaller option would be to accept a longer ellipsis menu:

---

Issue updated Oct 11.

[mtias]

Also related to #38267.

I see this tool operating at the level of the "appearance" / "settings", exposed like we have "Duplicate" for the entire block in the ellipsis menu.

[talldan]

The other option that came to my mind is something that works a bit like 'Paint format' does in a spreadsheet, where you can copy from one block and click/select the other block to apply.

[jameskoster]

I wonder if we could group all the copy/paste actions into a single flyout?

That might be useful in the future if we decide to allow block settings to be copy/pasted independently as well.

Copy/Paste >
    Copy Block
    Copy Styles
    Copy Settings
    ---
    Paste Block
    Paste Styles
    Paste Settings

[javierarce]

That was more or less the first thing I tried, but then I noticed we don't give the option to paste blocks (because of privacy concerns, I suppose).

But now that I think of it again, a possible workaround to avoid asking for clipboard permissions could be to store the copied block in the Local Storage too, as I imagine we will need to do with Styles and Settings.

Figma file

[jameskoster]

Good points. Perhaps your second design would be a good place to start. Should there be keyboard shortcuts for these actions?

[kevin940726]

a possible workaround to avoid asking for clipboard permissions could be to store the copied block in the Local Storage to

One thing to consider is that this workaround won't work for data copied from other tabs. For instance, copying from the patterns directory in wordpress.org cannot be pasted on a WordPress instance. We would need to handle that gracefully to reduce inconsistency.

[kevin940726]

Maybe we can learn from Google Sheets and only provide a single "copy" action but provide several "special paste" actions.

This works by copying the whole block along with the styles into the clipboard, and deciding which part to paste depending on user intentions (both, block only, styles only).

Note the "Paste block" action is still available in the top-level settings. This is to make it clear that it should be the most used action and avoid confusion.

A bonus benefit of this approach is that we can allow pasting styles from different contexts, either from a new browser tab or from a completely different app. Imagine being able to paste only the styles from wp.org/patterns for instance.

[jameskoster]

Thinking about this a little more, I'm not sure 'Paste block' is an action we want to add to this menu just yet.

This makes me lean towards @javierarce's original design with the three actions

• Copy block
• Copy styles
• Paste styles

The styles action could be grouped under a flyout in the future, but it's not essential to begin with.

[kevin940726]

I still don't think "copy styles" should be an individual action. Styles only make sense in a WordPress environment, there's nothing to be pasted in other applications. It might create some confusion around it. Instead, we should handle the paste events on our side to support both blocks and styles. This gives us more control over how the internals should be implemented too.

"Paste block" is quite awkward 😅. Since we're in the settings dropdown of an existing block, pasting blocks might actually mean replacing it.

I wonder if the wording of "Paste styles" can be refined too. Maybe something like "Paste and apply styles only" makes more sense. But I think this is trivial.

[kevin940726]

I opened a draft PR #45477 for adding "paste styles" to the block settings. There are a lot of unanswered questions, but I figured a working branch would better explain the details. Please try it out and share any feedback here or there!

[javierarce]

I still don't think "copy styles" should be an individual action.

I'm not completely sure about this decision. I think not having explicitly complementary actions is confusing. We can be smart about it and implement it in the way you mention, but in the end users will need to copy a block in order to paste a style.

[kevin940726]

I think not having explicitly complementary actions is confusing. We can be smart about it and implement it in the way you mention, but in the end users will need to copy a block in order to paste a style.

That's a fair point! Apple's Numbers has a separate "Copy Style" action, while Google's Sheets and Microsoft's Excel have only one "Copy" action but multiple "special" pasting actions. It's hard to decide which one is better for UX without data.

However, while trying Numbers' approach, I found the interactions quite interesting. It seems like "Copy" and "Copy style" belong to different "types" of clipboards. Data copied from the "Copy" action cannot use "Paste style" to paste to somewhere; Styles copied from the "Copy style" action cannot use "Paste" to paste to somewhere either. I think it's possible because the clipboard API is less restricted at the OS level. I don't think we can do the same in the browsers though, clipboard.readText() can only access the latest copied data from the clipboard.

Another thing that might be worth mentioning is that blocks (and styles) don't only exist in a WordPress instance, they can exist anywhere on the web too. A good example is wp.org/patterns, one can copy patterns from there and paste the styles somewhere in their editor. I think it might be confusing for the users when they can't find the "Copy style" button there. They might just think that it's impossible to copy the styles of the blocks there.

In addition, I'm not sure if it's a good idea to add two buttons with the exact same behaviors ("Copy" and "Copy style").

[jasmussen]

Noting that #44361 was just updated with mockups that include style copy/paste actions. Should we merge the issues, or would you like me to extract the copy pieces for this one?

[priethor]

I think it's better to keep them separated so that we can more clearly divide and parallelize the development work.

[jasmussen]

I went ahead and updated the issue! Since it already has a dev assigned, it's mostly a formality.