Image block: show media library preview as placeholder

[oandregal]

This is a proposal that comes from observing users upload the same image every time they use the image block. They didn't know there was a "media library" or sorts or don't remember whether they had uploaded the image already.

This is what the user sees when an image block is added:

What if we showed a preview of the media library instead of that grey background?

[idea--list]

They didn't know there was a "media library"

Exactly that is why there is a button labelled as "media library"

or don't remember whether they had uploaded the image already.

Hmm... sure if there are only 10 uploaded images in the library you can fit all the 10 thumbnails in the preview. But what if there are 100+ images in the library? How can you preview all the thumbnails so that no one will ever want to reupload anything?

IMHO if this is an issue, the media handling should be reweritten and WP should be able to find duplicate images based on content (not just based on filenames or checksums) and ask what is the users intention? Discard the new image and use the previously uploaded one or save the new image even if it is a duplicate.

[oandregal]

if there are only 10 uploaded images in the library you can fit all the 10 thumbnails in the preview. But what if there are 100+ images in the library? How can you preview all the thumbnails so that no one will ever want to reupload anything?

The point is not to display all images from the Media Library, but some of them to prompt the user to remember that there is one. Also: my hypothesis is that the latest images are the most relevant for the post you're writing.

[idea--list]

Well... one can try to make too much speculations but that is contraproductive. Not to mention, in the proposed way the UI would look different each and every time that would lead to confusion and maybe to even more image duplicates. As those who tend to be confused would think only those are already in the library that are there in the preview... And what about the contrast ratio between the ever changing images in the BG and the text of the buttons?

[jasmussen]

Here's a mockup that shows the media library directly inline:

It is, essentially, a resurrection of an idea from #4108, but I think it is still relevant.

One benefit of this is that inserting an image becomes two clicks.

[idea--list]

My feedback:
I do not like it. It feels like a block already filled up with content and made ready for the website visitors.
I mean for the person who edits the page/post it is not obvious anymore that they still need to edit/populate the image block.
Further more it also looks very similar to an already populated gallery block.

[richtabor]

I'm torn here. I see the value in your thought @jasmussen, but I also see the potential issues @idea--list has outlined. Perhaps some sort of "Recent Images" control exists within the placeholder?

But on the other hand, I'm curious what use-case folks are employing that calls for them to re-upload the same image over and over. 🤔

[jasmussen]

Perhaps some sort of "Recent Images" control exists within the placeholder?

The idea as outlined does not yet really contain a mobile play. Which would likely require a button to sit on the placeholder when there isn't room, that button opening the media library as a modal.

But just to be completely clear about the problem this design would solve: it is to make it 3 clicks to insert an image, as opposed to 4 as it is now. Insert block, select image, use, vs. Insert block, open media library, select image, use.

But on the other hand, I'm curious what use-case folks are employing that calls for them to re-upload the same image over and over. 🤔

Can you elaborate a bit here? Do you mean that the upload button on the placeholder suggests that be the primary interaction? Which I totally see by the way.

[richtabor]

Can you elaborate a bit here? Do you mean that the upload button on the placeholder suggests that be the primary interaction? Which I totally see by the way.

Well there's that (which I agree) though I was specifically referring to the use case of adding the same image multiple times. I'm curious what use cases are presenting that activity.

[jasmussen]

I was specifically referring to the use case of adding the same image multiple times. I'm curious what use cases are presenting that activity.

Ah, gotcha, I'll let @nosolosw elaborate on the use case if need be, but I read it as uploading the same image across multiple posts, as opposed to uploading it once then reusing.

[karmatosed]

I think the issue @richtabor might be someone forgetting they uploaded an image. I have seen this and think done myself more than once. By showing some images at least you can know what you have.

I like this, but I do wonder how it scales if you have a lot of images, or is it showing just recent ones?

I can see how someone could mistake it for already having images though and that could be a weird disconnect if they don't select, it doesn't show on the front. I think though it's nice to stop yet another step. I can see through people really like 'insert from URL' so it might be great to keep that.

[jasmussen]

It is worth noting that as of #18745 you can now leverage container query classnames baked into the Placeholder component to show a different interface for different placeholder sizes:

• is-small for when the Placeholder is smaller than 160px
• is-medium for when the Placeholder is between 160 and 320px
• is-large for when the Placeholder is larger than 320px

We could leverage that to show, say, 5 thumbnails at the large breakpoint:

I'm no longer 100% on the idea, but shared the above mockup for the sake of discussion.

[karmatosed]

I sort of like idea of 'insert your image from these or upload', being able to use the smaller thumbnails is kind of nice but could also lead to not being able to see what they are.

[idea--list]

To be frank i do not think it would ever work as intended. Mainly because it is not even UI failure that causes some people to reupload images. One might try to reduce the thumbnail size and maybe show even 30 thumbnails instead of 10. The problem is even small sites have way more pictures than that. Not to mention bloggers most probably will not want to reuse recently used images, so it does not make much sense for me to preview the thumbnails of the most recently used ones. Also each thumbnail adds to the payload.

The only thing that would make sense to leave the UI of the image block alone as it should always remain consistent. The real solution would be to implement a mechanism that tells if a similar image has ever been uploaded to the media library and let the users decide if they want a duplicate or would prefer inserting the previously uploaded image they did not remember anymore.

[paaljoachim]

We could always try out with a mix of this issue:
Tips: suggest the cover block the first time an user adds a block image
#15772
and this one.

Both issues will need design suggestions.

[idea--list]

It is not a matter of design. We simply can not tell in advance what is the user's intention.
Why do we make assumptions like this:
If the editor inserts the first image they wanted to insert it as a cover block so let's make it complicated for them to insert it as an image block. But hey, just for the first image! For any consecutive images let us just flip the logic around and see what the folks say... :-D

[paaljoachim]

Hi @idea--list Peter
It will need more discussion. I believe this likely has a low priority though. We might just close the issue for now and perhaps bring it up again at a future date.

[idea--list]

@paaljoachim

It will need more discussion. I believe this likely has a low priority though. We might just close the issue for now and perhaps bring it up again at a future date.

Agree completely as the issue has nothing to do with UI and or the image block. But here is some further input for the discussion:
People tend to be silly so sometimes they just forget about the already uploaded images. The more images they have in the Media Library, the higher the chance... Then i still did not mention sites that have multiple people writing content. Should they be aware of/use the images another editor uploaded to the library or rather not?

Showing the most recent images as a reminder is for sure the worst idea! Here is why:
With images there are 2 working paths: either you insert images directly into the post as you are editing content. In which case you do not need any reminders what have you uploaded last just some minutes ago... (if still, then you most probably should not edit websites for the public). In case you follow the other path and upload your media assets into the library before creating a post/page then for sure you are not willing to reuse the same images you used in your last post. So again showing the latest thumbnails makes no sense at all.

What would make sense then? Well on the server the images are stored in different libraries each month. What if instead the most recent thumbnails you would try to not to remind on the most recent ones but rather you would show some pictures from last week, other ones from 2 weeks ago. Of course as there is no room enough for all the thumbnails, the ideal solution would somehow weight the daily uploaded images and just show 1-2 thumbnails from each day. That way it would act more as reminder that lets the user associate on almost all the images they uploaded (in case they actually reviewed the pictures before uploading) even if there is no space to show all of them.

Of course the real solution would be to rewrite the whole way how WP stores/handles media but that backlog is just really long. I completely understand why it never gets touched through all the years. I just do not know why intelligent people pimp around with the UI instead, which will never solve any issues of the media handling.

[paaljoachim]

Thanks for the feedback, Peter!
The whole issue will be looked at again at another time.

[oandregal]

There hasn't been activity on this for years now, so I'm closing. If necessary, we can reopen with better details and accounting for the last updates in the block editor & block image.