Explore right-click open menu

[MackenzieHartung]

As a user I want to be able to use the right-click option to expose the 3-dot menu, including copy/paste options.

AC1: Explore right-click open menu as an option to display the 3-dot menu to users
AC2: (Dependent on outcome of AC1...if possible) create an issue for enabling right-click
AC3: (Dependent on outcome of AC1...if possible) create an issue for copy/paste

Note: if not possible, we need to revisit

[swissspidy]

AC1 / AC2:

While there was a special contextmenu attribute in HTML5 for a brief period of time, this has to be done manually nowadays by listening to the contextmenu event.

We might be able to do that by using the editor.BlockEdit filter to wrap all blocks in a new container where we can add this event listener. This would catch all right-click attempts when the cursor is on a page, but not somewhere else, which I think is a reasonable limitation.

Upon right click, we would then use the BlockSettingsMenu component to display the menu.

Note: Considerations need to be put into accessibility, making sure that keyboard navigation and focus handling works as expected.

It would be good if we could try a quick proof-of-concept of this, to see whether it actually works.

I haven't found any upstream issues about a similar feature. Given that right-click on the web is mainly found in RIAs like Google Slides or Google Docs, and not so much in a CMS, it's probably unlikely to be implemented there. Also, unlike the Stories editor the block toolbar with its options menu can be directly attached to a block in Gutenberg, reducing the need for having the same things accessible via right click.

AC3:

I think in addition to copy and paste it should also handle cut.

Looks like programmatically adding a block (or data in general) to the clipboard is doable. Gutenberg is doing it here:

https://github.com/WordPress/gutenberg/blob/b95e865de32ee62d722be3e3e71b334a4b639032/packages/block-editor/src/components/copy-handler/index.js#L26-L57

https://github.com/WordPress/gutenberg/blob/b95e865de32ee62d722be3e3e71b334a4b639032/packages/components/src/clipboard-button/index.js#L27-L67

Pasting would be handled by the RichText component which we use in all the text-based blocks and has some complex logic for handling the clipboard data properly:

https://github.com/WordPress/gutenberg/blob/03121c5e59c63d4c79a293f71bbb7b9613fd311c/packages/rich-text/src/component/index.js#L187-L260

To make the pasting work via the context menu, I feel like we'd need to copy most of that component's logic.

[miina]

We might be able to do that by using the editor.BlockEdit filter to wrap all blocks in a new container where we can add this event listener.

Should this be available at any times or only for the selected block(s)? Also, should it work for Pages as well or just inner blocks? Thoughts?

[swissspidy]

Should this be available at any times or only for the selected block(s)? Also, should it work for Pages as well or just inner blocks? Thoughts?

One use case for right click:

Copy a block on page A, then go over to page B, right click anywhere to open the context menu and click on the "Paste" menu item.

For that, it would need to work at any times and not only for selected blocks, and also work for pages. Unless I'm missing something.

[miina]

Yep, rephrasing the question:

• Should the right-click open menu allow copying Pages as well? E.g. copy a Page and paste it between other pages?

[swissspidy]

Oh, I see!

Copying pages and pasting them between other pages could be a bit difficult to do as a user. Where would you click on to paste? Maybe a better solution there is to duplicate a page and then reorder pages.

[miina]

Hmm, I guess they could click on the small area between the Pages for pasting? Not sure :)
E.g. the user copies/cuts the Page, scrolls a few Pages forward, then clicks the area between the two pages where they'd like to paste it.

That's just a thought, if it seems like overkill then we could ignore it for the sake of this issue, I don't have very strong feelings about it. 🤷‍♀

[swissspidy]

What if the user would right click on the page for pasting and then gets to options "Insert before" and "Insert after"?

[miina]

What if the user would right click on the page for pasting and then gets to options "Insert before" and "Insert after"?

That could be a good idea. So in case of pasting a Page it would offer that choice.
As long as it doesn't get confusing that a different menu opens depending on which block is being copied. I guess it should be OK? Might need user testing to actually know if it's intuitive but sounds like a good option to try out.

[swissspidy]

Moving to the review column so we can summarize this in a new issue and estimate it properly.

[MackenzieHartung]

@swissspidy / @miina is it possible to validate the ability to delete a block within the right-click action?

[swissspidy]

@MackenzieHartung I think this is covered by AC1:

AC1: Explore right-click open menu as an option to display the 3-dot menu to users

The 3-dot menu already includes an option to remove the block:

[MackenzieHartung]

Awesome! Thanks @swissspidy!

[swissspidy]

Added two new issues as a result of this:

• Right-Click: Add options to cut/copy/paste blocks #2989
• Right-Click: Display block settings menu #2990