Image Block: Right-click context menu is unavailable

[t-hamano]

• Props to @megane9988 for discovering this problem.
• Note: I'm not sure if this is considered a bug by everyone, but it feels like one to me.

Description

Most popular browsers provide image-specific context menus when you right-click on an image in a document, such as "Open image in new tab" or "Save image as...".

However, due to the effects of the following two PRs, it is no longer possible to right-click on an image within the Image block:

• Image block: unwrap img element in editor #68666
• Block editor: try direct drag (outside text editable) #67305

This issue will occur not only with the Image block, but with any block that contains images.

There are two causes for this problem:

1. To enable dragging of blocks, we disable the browser's default image dragging:
   

   gutenberg/packages/block-editor/src/components/block-draggable/content.scss

   Lines 23 to 26 in 022282b

   	.wp-block img:not([draggable]),
   	.wp-block svg:not([draggable]) {
   	pointer-events: none;
   	}

2. Because the ResizableBox component exists in parallel with the img element, we cannot right-click on the image:

   <figure class="block-editor-block-list__block wp-block wp-block-image">
     <img />
     <div class="components-resizable-box__container has-show-handle">
     </div>
   </figure>

I'm not sure if this is technically possible, but I'm wondering if it's possible to enable the right-click menu for images while maintaining the following two functions:

• Blocks containing images can be dragged with the mouse
• The drag handle of the ResizableBox component can be operated

cc @stokesman @ellatrix

Step-by-step reproduction instructions

• Insert an Image block.
• Right-click the image.
• Confirm the browser menu items.

Screenshots, screen recording, code snippet

When I right-click on an image, no image-specific menu appears.

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[megane9988]

I became aware of this bug through a report from the client.
They are reporting that due to this change, they can no longer use the following add-ons.

https://chromewebstore.google.com/detail/%E7%94%BB%E5%83%8F%E3%82%92-jpgpngwebp-%E3%81%A8%E3%81%97%E3%81%A6%E4%BF%9D%E5%AD%98/gabfmnliflodkdafenbcpjdlppllnemd?hl=ja

[ramonjd]

Do you think we could enable right click while disabling left click via onclick="return false;" on the <img> tag or

					onClick={ ( e ) => {
						if ( ! e.target.getAttribute( 'draggable' ) ) {
							e.preventDefault();
							e.stopPropagation();
							return true;
						}
					} }

?

That appears to work but only when the image is not selected 🙃 , since there's also the matter of components-resizable-box__container, which is positioned absolutely on top of the selected image.

It could get complicated 🤔

[karthikeya-io]

This issue has also been reported on the WordPress support forum here:
Images in blog posts not downloading with right-click after WordPress 6.8.1.

[t-hamano]

Thank you all for your feedback. I think the ideal solution to this issue would need to meet the following criteria:

• Works in all browsers (Chrome, Safari, Firefox).
• Don't hardcode the fix into a specific block, because this issue occurs in all blocks that contain img elements.

I haven't found the ideal solution yet 😅

[karthikeya-io]

I have checked which blocks show image specific menu in editor for images in 6.7

	6.7	6.8
Image	y	n
Gallery	y	n
Media Text	y	n
Site Logo	n	n
Featured Image	y	n
Cover	n	n
Image in classic editor block	y	n

I’ve implemented a fix that restores right-click functionality for all blocks where it was available in 6.7., Looking for any suggestions before raising the PR

Instead of disabling pointer events (pointer-events: none), I set images as draggable="false", Used mutation observer to handle edge cases like updating images or adding new images in classic editor block, For most blocks, the code up to setDraggableFalse(editorRoot); works.

Diff

--- a/packages/block-editor/src/components/block-draggable/content.scss
+++ b/packages/block-editor/src/components/block-draggable/content.scss
@@ -17,10 +17,3 @@
                content: none !important;
        }
 }
-
-// Images are draggable by default, so disable drag for them if not explicitly
-// set. This is done so that the block can capture the drag event instead.
-.wp-block img:not([draggable]),
-.wp-block svg:not([draggable]) {
-       pointer-events: none;
-}

--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -172,6 +172,47 @@ const BlockDraggable = ( {
                visibleInserter,
        ] );

+       // Images are draggable by default, so disable drag for them if not explicitly
+       // set. This is done so that the block can capture the drag event instead.
+       useEffect( () => {
+               if ( ! editorRoot ) {
+                       return;
+               }
+
+               const selector = 'img:not([draggable]), svg:not([draggable])';
+
+               const setDraggableFalse = ( root ) => {
+                       root.querySelectorAll( selector ).forEach( ( el ) =>
+                               el.setAttribute( 'draggable', 'false' )
+                       );
+               };
+
+               setDraggableFalse( editorRoot );
+
+               // Observe the editor root for added or modified nodes
+               // and set draggable to false for images and svgs.
+               const observer = new window.MutationObserver( ( mutations ) => {
+                       for ( const m of mutations ) {
+                               m.addedNodes.forEach( ( node ) => {
+                                       // Ignore non-element nodes.
+                                       if ( node.nodeType !== 1 ) {
+                                               return;
+                                       }
+
+                                       if ( node.matches?.( selector ) ) {
+                                               node.setAttribute( 'draggable', 'false' );
+                                       }
+
+                                       setDraggableFalse( node );
+                               } );
+                       }
+               } );
+
+               observer.observe( editorRoot, { childList: true, subtree: true } );
+
+               return () => observer.disconnect();
+       }, [ editorRoot ] );
+
        if ( ! isDraggable ) {
                return children( { draggable: false } );
        }

To fix image block

--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -30,6 +30,15 @@ figure.wp-block-image:not(.wp-block) {
                transform: translate(-50%, -50%);
                margin: 0;
        }
+
+       .components-resizable-box__container {
+               pointer-events: none;
+       }
+
+       .components-resizable-box__handle {
+               pointer-events: auto;
+       }
+
 }

Satisfies the following

Blocks containing images can be dragged with the mouse
The drag handle of the ResizableBox component can be operated
Works in all browsers (Chrome, Safari, Firefox).
Don't hardcode the fix into a specific block, because this issue occurs in all blocks that contain img elements.

[Mamaduka]

Personally, I would be in favor of a CSS-only solution if that's possible.

[karthikeya-io]

we can use -webkit-user-drag: none; which works for chrome and safari, but I can't find a equivalent that works for Firefox

[t-hamano]

we can use -webkit-user-drag: none; which works for chrome and safari, but I can't find a equivalent that works for Firefox

I think you're right. If we could use webkit-user-drag in Firefox, this problem should be solved with CSS alone 😅

See: 1886402 - Missing support for webkit-user-drag