Fix: Contributors can not use drag & drop

[jorgefilipecosta]

Currently, if the user has no permission to upload files, the user is not able to use block drag & drop.
This PR fixes the problem.

How has this been tested?

I added some paragraphs in Gutenberg playground.
I hovered with the mouse at the left side of the paragraph until the hand to grab the paragraph appeared. The reason why the block movers don't become visible on the playground is probably another bug that I will try to find the cause.
I changed the paragraph position by dropping it above the blue line in another position.

I tried to drag a file to the playground and verified it was not possible to do it and the blue line to drop never appeared -- in the playground the user is not able to upload files.

[oandregal]

This will render the dropzone and will allow the user to drop an image from the desktop. It won't work, though, because the DropZoneProvider checks whether the DnD type is supported. We should take the DnD type into account in the DropZoneComponent's render method as well.

[oandregal]

Was thinking how to improve readability here to better communicate the difference. Some raw thoughts:

1. Do not use the MediaUploadCheck component but use the hasUploadPermissions prop:

<DropZone
    className={ ... }
    onHTMLDrop={ this.onHTMLDrop }
    onDrop={ this.onDrop }
    onFilesDrop={ hasUploadPermissions ? this.onFilesDrop : null }
    />

2. Extract and rename the dropzone components so we return:

return (
    <MediaUploadCheck
        fallback={ dropZoneWithoutFileDrop }>
        dropZoneWithFileDrop
    </MediaUploadCheck>
);

[jorgefilipecosta]

Hi @nosolosw, I updated the code to follow your first suggestion.

[jorgefilipecosta]

Hi @nosolosw thank you for the review, I applied a code simplification based on your suggestions.

This will render the dropzone and will allow the user to drop an image from the desktop. It won't work, though, because the DropZoneProvider checks whether the DnD type is supported. We should take the DnD type into account in the DropZoneComponent's render method as well.

In my tests, I can drag & drop blocks and files in the normal editor, and on the widgets editor (/admin.php?page=gutenberg-widgets) I can drag blocks but not files because uploads are not supported yet. This seems to work exectly as expected I'm probably missing a usage, what is failing in your tests/what are the steps to reproduce the problem?

[oandregal]

These are my testing steps:

• Create a user with contributor role (it doesn't have upload permissions).
• Open the editor.
• Grab an image from desktop and drop it into the editor

In master the image won't be dropped in the editor.

In this branch, it will, although unsuccessfully (an user without upload permissions shouldn't be able to drag anything from the desktop):

[jorgefilipecosta]

Thank you for providing clear steps to reproduce the issue you found @nosolosw 👍 The problem was fixed.

[oandregal]

I still can upload files with the steps above (although the visual indicator isn't rendered).

[jorgefilipecosta]

I still can upload files with the steps above (although the visual indicator isn't rendered).

Hi @nosolosw, I'm not being able to reproduce the problem. For contributor roles, the blue bar does not appear and the upload does not happen if I drag a file over the position the blue bar would appear. Maybe there was a caching issue? Would it be possible to do another try? Thank you in advance!
Edited: It may also be browser related, could you please share what browser was used in the tests.

reviews were addressed

[jorgefilipecosta]

This PR was rebased and retested and it seems to still be valid.
Most of the PR can easily be live tested using the playground available https://deploy-preview-15054--gutenberg-playground.netlify.com/.

[oandregal]

I gave it a spin today at this. This is what I've done:

• Created a new user with contributor role.
• Opened the demo Gutenberg content.
• Tested that the contributor could drag and drop things around (they see the blue bar indicating the target and so on). This is great and expected!
• Tested dragging files from the desktop: although the blue bar indicating the target isn't shown, in some situations I was able to drop the image from desktop, resulting in an error. See below.

GIF (note how the first time I dropped the image nothing happened, but the second time an invalid block was created):

The code for the invalid block:

<!-- wp:image -->
<figure class="wp-block-image">
    <img
        src="blob:http://localhost:8889/6a9516cb-fc73-4283-9b10-3ac959c110bc"
        alt=""/>
</figure>
<!-- /wp:image -->

[jorgefilipecosta]

Hi @nosolosw thank you for the review! Unfortunately, I was never able to replicate the problem. But from the issue description and gif, it seems for some reason onFilesDrop is being called. I added a check for upload permissions inside onFileDrop.

[oandregal]

Now DnD works for contributors as well!