Consider improving the media placeholder blocks to include images

[jasmussen]

This is slightly related to #1704. Essentially, the traditional flow for adding an image is to open the Media Library, then pick an image, then pick insert.

By virtue of introducing the Inserter as an egalitarian tool for inserting any kind of block, not just media, the act of picking the image has now been relegated to happen after the insertion act.

Here's a mockup for how that flow could be smoothed out a bit:

The gallery block would be fairly similar.

CC: @mtias @nosolosw

[karmatosed]

@jasmussen are you suggesting this pre-filling out real images from the media gallery, or having defaults? I'm trying to understand if this is a placeholder or a real action moved up a level. Note, I am very keen on moving a real action up a level :)

[jasmussen]

On second reading this ticket is a bit bare.

Step one is open the inserter and pick image.

Step 2 is the above mock-up, which shows a redesign of the Image placeholder.

Step 3 to insert an image would be selecting one from that media library you see inline in the placeholder box, and clicking the "Select Image" button which becomes ungrayed as soon as you pick an image.

You could also add an image by dropping one on the entire placeholder from your desktop. Or you could pick the Upload tab. You could also imagine plugins, like Dropbox, adding tabs.

[karmatosed]

Ah gotcha! So basically it's moving things up a step. I think we need to tests this but it makes sense to avoid the extra step. I get a little concerned about squishing that into a small screen, one that gets smaller with other devices.

[oandregal]

Like the direction of this, although screen state was also something I noticed as well. Perhaps we could experiment with compacting the info/actions (there are 3 blocks now: gutenblock title + media/upload/search + selection button) so pictures can get more screen state?

[jasmussen]

Great feedback. Needs another iteration. We want to strike a balance between keeping the placeholder small by showing only the n most recent images, assuming this is what the user will most often act on, and potentially allowing for the user to easily or smartly expand this box if they need to.

[StaggerLeee]

Just do not remove media modal, if you have ideas like this anyway. Developers cannot hook anything inside this small view.

[melchoyce]

How do you see this working when the image placeholder is smaller, for example, thumbnail size?

[jasmussen]

How do you see this working when the image placeholder is smaller, for example, thumbnail size?

The idea here needs maturation, but the point is to utilize the available space when it's there to speed up the inserting of images, and avoid modals when we can. It does seem clear that there will be cases where you need the larger modal.

[jasmussen]

As a bit of repository management, I'm going to close this ticket and file it in the "Ideas" project so we can revisit this in the future: https://github.com/WordPress/gutenberg/projects/8