Show a modal when dropping a file outside the dropzone

[javierarce]

In this PR @mtias suggested showing a modal when a user drags a file to the editor but outside of the dropzone.

The text of the modal could indicate the type of the file the user is trying to add (image, video, etc.) or we could go with something more generic, like "media". Something else we could do is to show an error modal if the user drags an unrecognized file type.

Initial exploration

Here are a couple of ideas for such a modal: one with a simple list of text options and another one with images.

Screen.Recording.2022-09-20.at.12.15.47.mov

Figma file

[jasmussen]

Nice, thanks for including the Figma! Just to remix your work here a bit, what if we reduced to a single needed click? Something like this:

I like the visuals, I wonder if we can make them more like icons and less like illustrations, mostly because a single coherent illustration style hasn't really been that established. Thinking something along the lines of the welcome guide in terms of graphics.

[javierarce]

I like the visuals, I wonder if we can make them more like icons and less like illustrations, mostly because a single coherent illustration style hasn't really been that established.

That's a good point but wouldn't "something along the lines of the welcome guide in terms of graphics" is still a bit opinionated in terms of style? What about something like this, just with icons? (note: I'm aware that the paragraph one could be more descriptive and maybe it's not ideal)

I added a border around all the options so they can be read as buttons and put the main action in the modal's title so we can have shorter labels (which will help keep the labels under three lines in other languages).

[jasmussen]

Nice iteration! I love the reduction and I actually think we can combine the compact headers with the compact actions:

I also reduced the size of the icons, I'm not sure it works, but I'm also not sure the upsized icons used as illustrations works entirely well.

That's a good point but wouldn't "something along the lines of the welcome guide in terms of graphics" is still a bit opinionated in terms of style?

To be clear I like your latest iteration, especially if we can get some good icons. We might need to draw new ones (for example a large version of the Image that maintains the stroke width? 🤔) But just to respond to your question on the welcome guide. The following slide isn't great, but I like that it's an abstracted version of the existing UI, kind of like how skeleton indicators are an abstracted version of a page loading:

[jasmussen]

@javierarce we can probably update the main ticket here with your latest iteration, then swap out the tags and send this over to a dev. What do you think?

[javierarce]

@jasmussen done. I ended up using an icon size of 48px… bigger than your last proposal but not so big as my initial one, but we can explore other styles as the feature gets implemented.

[jasmussen]

Looks great!

[apeatling]

This would be a really nice UX win, would be great to get it in 6.3.

[DarkMatter-999]

Reproduction Report

Description

This report outlines the validation process to determine the feasibility of the proposed enhancement.

Environment

• WordPress: 6.9-alpha-60272
• PHP: 8.2.28
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.4.7-MariaDB-ubu2404 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins:
  • Gutenberg Test Plugin, Disable Login Autofocus
  • Gutenberg Test Plugin, Disable Remote Patterns
  • Gutenberg Test Plugin, Enable Templates UI
  • Gutenberg Test Plugin, No-cache Headers
  • Gutenberg Test Plugin, Normalize Theme
  • server-timing.php
• Plugins:
  • Gutenberg 21.2.0-rc.2
  • Test Reports 1.2.0

Actual Results

1. Recent updates to the Gutenberg editor have addressed previously observed issues, resulting in the elimination of dead zones within the editor interface.
2. Areas that were once considered unresponsive ("dead zones") now appropriately add media to the nearest block, as expected.

Supplemental Artifacts

A video has been attached to demonstrate the current behavior.

Screen.Recording.2025-07-16.at.7.31.37.PM.mp4