Consolidate and organize block/style copy/paste menus

[t-hamano]

Related issues/PRs:

• Make it easy to copy (and paste) block styles #44418
• Add paste styles to the block settings #45477
• Differentiate 'Copy' and 'Copy styles' snackbar confirmation messages  #57254
• Proposal: Remove "Copy Styles" from dropdown menu #55611

What problem does this address?

There are two copy actions in the current block settings dropdown: "Copy" and "Copy style". The two are internally the same and simply copy blocks. Which one to paste depends on whether you select "Paste" or "Paste styles".

It might be possible to modify the current copy style action to separate block copying and style copying, but I think the following problems may occur:

• If you copy a block, you cannot paste the style.
• If you copy the style, you cannot paste the block.

I feel like it would be more flexible and understandable if there was just one copy action, like in Google Sheets, and we could choose whether to paste blocks or styles when pasting.

What is your proposed solution?

There was discussion in #44418 and #45477 as to whether block-style copying is necessary at all, but I propose to integrate copy actions and group them as follows.

Before:

Copy
Duplicate
Add before
Add after
---
Copy styles
Paste styles

After:

Copy
Duplicate
Paste
Paste styles
---
Add before
Add after

If this block toolbar dropdown supports nesting in the future, the following UI may be possible.

If it makes sense to accomplish this, I believe that the following secondary tasks are also necessary.

• Add "Paste styles" (cmd + shift + v) shortcut in all editor instances
• Add "Paste styles" to the keyboard shortcut modal in all editor instances
• Display shortcut keys for "Copy", "Paste" and "Paste styles" in the block dropdown menu

cc: @kevin940726 , who developed the paste style, and the @WordPress/gutenberg-design team

[jasmussen]

Length of the dropdown is definitely the main issue at hand here. We want to avoid getting into situations where you have the dropdown actually have a scrollbar, as much as possible. To that end I'd support primarily your last mockup; a single copy action, and nested paste actions.

[kevin940726]

I always support the single copy action from the beginning but there were different concerns 😆. One thing to consider for the nested dropdown is, AFAIK, we don't currently support that in our component library. It might not be trivial to implement considering different UX needs either. However, the adoption of the ariakit library should help a lot here! (c.c. @WordPress/gutenberg-components)

[jasmussen]

DropdownMenu V2 supports nesting now! There are some style issues if I recall correctly, with the menu as it extends from the block toolbar and needs the dark borders and no drop-shadow.

[ciampo]

DropdownMenu V2 supports nesting now! There are some style issues if I recall correctly, with the menu as it extends from the block toolbar and needs the dark borders and no drop-shadow.

Just a word of caution re. the V2 of DrodownMenu. While style issues shouldn't be difficult to solve, we still haven't ironed out all the wrinkles of using it in the editor, particularly in the block settings toolbar.

I have a draft PR where I've been exploring using the new component in the block settings toolbar, but there are still a few blockers that need to be fixed, in particular:

• around the modality of the dropdown and some second-order effects of that decision
• around where in the dom the dropdown contents render (ie. bridging the gap with how the legacy Popover renders in a Popover.Slot)
• around backward compatibility when Slot/Fill are involved — ie., if we update the DropdownMenu to V2, all the legacy MenuItem items injected by third party plugins/etc won't work

We're getting there, but it's a tricky process and in the past months we've been prioritising Data Views, and so we haven't made a ton of progress on this front (cc @mirka )

[t-hamano]

Thank you everyone for your advice. Regardless of whether this menu is replaced by DropdownMenu V2 in the future, my suggestion will not increase the number of dropdown menu items. Therefore, if you agree with this proposal itself, I would like to work on this issue 👍

[bacoords]

I agree with @t-hamano - this suggestion is great because it doesn't increase the number of dropdown items and (as opposed to moving the paste options into yet another deeper layer requiring even more interaction) it makes them feel even more discoverable.

[richtabor]

Add before and after are much more signifiant to the editing experience than copying/pasting styling. I would not prioritize copy over block insertion.

I do feel a bit of hesitancy on putting the "Copy" control nested one level. It's such an integral part of the experience, I don't know that it's worth nested to save one spot on the options menu.

I lean towards something less dramatic:

• Copy
• Duplicate
• Add before
• Add after

---

• Copy/Paste as >
• • Copy as text (a concept, to only copy content)
• • Copy styles
• • Paste styles
• • Paste to replace (a concept, not something we currently support).

This is related to #49271 as well.

[kevin940726]

@richtabor I don't think @t-hamano's proposal is to nest the copy styles action. I believe the proposal is to remove that action instead. They currently do the same thing anyway.

[richtabor]

We should not remove the explicit copy styles control as then the capability would be undiscoverable.

[t-hamano]

We should not remove the explicit copy styles control as then the capability would be undiscoverable.

My question is whether it is necessary to make it discoverable to be able to copy styles. Isn't it enough to have a choice of what to paste when you paste?

Perhaps there are apps that have menus to copy only specific contexts, but in the Google app, for example, there is only one "copy".

Docs:

Sheets:

Slides:

[richtabor]

My question is whether it is necessary to make it discoverable to be able to copy styles.

Yes, I do think it is necessary. Otherwise, you have to know you can just copy styles.

In Google sheets, you can't copy just the styles, you can copy everything and paste without formatting. Copy styles is where you can copy the block style attributes, and paste those attributes on another block. Essentially the opposite of pasting without formatting. It's not an expected behavior without the clarity, even if the controls are technically doing the same thing (copying the block and the styles).