Inserter: Add Media tab and explore basic Openverse integration

[mtias]

The inserter currently has tabs for Blocks, Patterns, and Reusable blocks. You can drag and drop content from these tabs into the canvas to build your pages. #44028 further redesigns this with a two-column split, and clearer categories.

This convenient way of adding content translates well to media as well. It'd be nice to starting exploring a "Media" tab for easy access to your library. The Media tab can explore integrating Openverse as well, plus an option to open the full media library.

The inserter panel should support the ability to drag media from the inserter into the canvas, including dragging into block placeholders to quickly update patterns and such with your own content. The Media tab would allow users to choose between categorized assets from the media library, and from Openverse.

The default state for the Media sidebar would show the last N items from the Media Library. We could also consider hiding the empty tabs, so initially, users will only see the Openverse one.

To avoid having two search boxes side by side, we should consider moving the inserter search box under the segment control, but we could still recommend both types of items (patterns and blocks) when users search for the other category as we do now.

Openverse

We should figure out which kind of media and licenses we'd like to show. I imagine that for the first iteration of this feature we could limit the results to just images that are in the Public Domain or CC0 licensed, but in the future we could explore showing more types of media and giving more fine-grained filtering options.

See the comments for some more explorations on openverse branding.

Figma file with the explorations.

See also: #41379.

---

Issue updated Sep 30.

[jameskoster]

A PR exploring the Openverse integration: #44424

[javierarce]

Here are some design explorations for this feature:

The inserter sidebar could have three tabs: Blocks, Patterns, and Media. This last tab would allow users to choose between three types of media assets (Images, Audio, and Video) or select media from Openverse.

The default state for the Media sidebar would show the last N items from the Media Library. We could also consider hiding the empty tabs, so initially, users will only see the Openverse one.

To avoid having two search boxes side by side, we should consider moving the inserter search box under the segment control, but we could still recommend both types of items (patterns and blocks) when users search for the other category as we do now.

Openverse

We could brand the Openverse sidebar's initial state with its color palette and other visual elements. Here's an idea of a possible layout that includes assets from predefined searches like the Openverse homepage.

We should figure out which kind of media and licenses we'd like to show. I imagine that for the first iteration of this feature we could limit the results to just images that are in the Public Domain or CC0 licensed, but in the future we could explore showing more types of media and giving more fine-grained filtering options.

Figma file with the explorations.

[jameskoster]

We could also consider hiding the empty tabs

Would it be possible to drag media into the tabs to upload? Then we might display empty tabs with a hint.

I'm curious if it is a conscious decision to give top-level placement to Openverse here? Did we consider a version where the Images, Audio, Video tabs have an option to switch between local (media library) and Openverse? I mention it because the flow might be a bit strange to go Openverse > Images, when there is already a top-level Images section. Arranging things this way might also solve the issue whereby it's not obvious that you can search local media.

[javierarce]

Would it be possible to drag media into the tabs to upload?

I explored that idea on an initial iteration, but it was discarded as users can drag the media to the canvas and it will be added to the library. I guess this is something we could explore on a future version of the feature.

I'm curious if it is a conscious decision to give top-level placement to Openverse here? Did we consider a version where the Images, Audio, Video tabs have an option to switch between local (media library) and Openverse?

I pointed to that here as this categorization could be confusing, but since we are exploring a basic Openverse integration I thought the version above could be a good starting point.

[jameskoster]

It seems a shame to have to go back and forth to apply the same search locally (media library) or globally (Openverse). But I appreciate the desire to keep things simple to begin with.

[jasmussen]

In my mind, the flow for the media tab would likely be to explore recent uploads first and foremost with search as a fallback, because otherwise you could just drag the item into the canvas. In that light, I think it makes sense, including for the tab-order, to move search into the flyout.

Similarly, if I choose Openverse as my option, I would imagine my mindset to be one of finding new media, so having its own search there works to add context. Not a strong opinion, though, and I would imagine that the particulars of an OV integration would likely evolve.

[jasmussen]

I updated this ticket with the latest mockups. It should be ready to dev, which honestly just matches the current state of affairs since #44424 has been opened!

[ntsekouras]

To avoid having two search boxes side by side, we should consider moving the inserter search box under the segment control, but we could still recommend both types of items (patterns and blocks) when users search for the other category as we do now.

Is this required for v1? If yes, does this mean we'd have a search input inside every tab content? It's not clear to me from the current designs.

[jasmussen]

I don't know if it's a requirement for a V1, but it's definitely where we want to end up. So that is: search under the tabs for Blocks, search under each flyout category for both patterns and media. Does that sound right @javierarce?

[javierarce]

So that is: search under the tabs for Blocks, search under each flyout category for both patterns and media. Does that sound right @javierarce?

Yes, that sounds totally right 👍

I'll provide designs for the search results because they could potentially behave a bit differently than the current version.

[javierarce]

Here's a proposal to show the search results:

The current search in the inserter is global and returns the results in the same order (block, patterns, external blocks) no matter where the user starts the search.

With the search field under the tab control, one option could be to show the top results match the selected tab and the other items appear below as suggestions (maybe with a better heading)

That said, I find the previous design potentially confusing, so my proposal would be just showing the results for the selected type of item:

[ntsekouras]

Thanks for the mock ups @javierarce! I think they can be extracted to a separate issue, as they do not depend on this one.

Having said that I'm not sure what are we going to do with the Media tab search. I have updated the description of my PR with video.

Will be a single search control under media similar to the above designs for blocks/patterns?

[mtias]

Unified search has a lot of complexities I'm not sure we should be doing — like seeing results from your library and from other people, can be a very off-putting experience

[bph]

My immediate question to seeing the mockups in this PR is what happens to the tabs when there are reusable blocks on the site? I guess, I got myself a test case for this PR. 😉
Looking at the current screenshot, it feels quite cramped.

[jasmussen]

@bph the solution we've gone with for now makes reusable blocks into an icon, it's working fairly well IMO.

[jasmussen]

It does have a tooltip 👍 👍

[zackkrida]

@ntsekouras could we leave this issue open to continue tracking the Openverse part of the project, which was extracted from #44918?

[annezazu]

@zackkrida where is that work being tracked? Can you link to some PRs? I want to be sure we have all the pieces covered for keeping these issues up to date.

[ntsekouras]

@zackkrida where is that work being tracked? Can you link to some PRs? I want to be sure we have all the pieces covered for keeping these issues up to date.

There is no PR yet. I plan to start one as soon as I can(hopefully tomorrow) and will probably create a new separate issue for Openverse integration with info extracted from this one.

[simison]

When there is only one type of media available (e.g. images), would it make sense to just show those images in the sidebar directly? Multiple types of media would then show up as categories.

[ntsekouras]

Closing this one as the Media Tab has been merged and a separate issue for Openverse has been created.

@simison regarding your comment, we'd need design feedback --cc @WordPress/gutenberg-design

[jasmussen]

When there is only one type of media available (e.g. images), would it make sense to just show those images in the sidebar directly? Multiple types of media would then show up as categories.

I understand the desire for fewer clicks, and perhaps especially that the inserter shouldn't cover content. However I think it's important that the UI doesn't change "randomly", i.e. that the inserter changes appearance as soon as you upload a PDF. As is, it also shares DNA with the pattern inserter, and there's still room to expand the inserter interface in terms of allowing uploads or otherwise.

[tomjn]

I'm concerned that this UX was designed to look cool and pretty on large monitors without much consideration for actually using it, or accessibility. There are no alt texts, no ARIA markup, alt tags, licensing information etc. None of this information carries through to the image block that gets inserted.

Noting that this design has a very low information density and doesn't show many options.

Here is Frontenberg out of the box showing only 3 options:

Note that there is also no title/author/license information, which is important if Openverse is being integrated.

This means I as a user can search for and select images that require no commercial usage, or attribution, then use those for commercial use without attribution violating their license, and I would never know about it.

This interface can be trivially improved by limiting the height of the thumbnails. If I use 142px I increase the density from 3 to 5 images:

I can also use 2 columns and double the available options to almost 10:

The media library by default shows 29, with room for more:

[tomjn]

Note that the problem of information density and discoverability has solutions already elsewhere in the inserter, e.g. looking at the block inserter here I can type to search .org and 16 blocks are immediatley visible without any interaction:

Likewise I can see 10 footers in this pattern selector:

I do foresee the height issue being a problem for other patterns though, but it's exacerbated in the case of images

[richtabor]

The media library by default shows 29, with room for more:

I’m not sure if we should, but if images were displayed in a cropped 1:1 grid (like they are in the Media Library), there would be more images in view.

[tomjn]

I made the following adjustments:

.block-editor-inserter__media-list {
    flex-wrap: wrap;
    flex-direction: row;
    display: flex;
    column-gap: 16px;
}

.block-editor-inserter__media-dialog {
    width: 460px;
}

.block-editor-inserter__media-list__list-item {
    max-width: 126px;
    max-height: 126px;
}

Which resulted in this:

It's very rough around the edges but demonstrates a big jump in browsability.

This is much more browsable, and with some adjustment could be both prettier and more usable:

• masonry style layout to avoid gaps
• consistent column/row gaps, as well as alt text
• a license icon in the corner of openverse images
• a preview with author/title etc details before insertion

Openverse selections should also carry over licensing and attribution data automatically to image blocks that get created

[ntsekouras]

@tomjn can you create a new issue with your design suggestions about the media tab? They will probably get more attention this way, than being here in the closed issue about the introduction of the tab.

Openverse selections should also carry over licensing and attribution data automatically to image blocks that get created

Right now there is no Openverse integration, but it's being implemented here and there is the licensing info and attribution.

[chyvak1831]

Would be great to have ability to hide this Media tab.

It confuses me as developer and more confuses for our content managers, there are some questions (and answers) which appears:

• why do we have Media tab? does it give us any new ability in sitebuilding? (no it does not)
• what the difference between image inserted via 'Blocks->Image' and image inserted via 'Media' tab (there is difference - see video attached)?
• can I insert a few images via 'Media' tab aka gallery? (no we can't)

So there are 4 tabs on the same level in navigation: 'Blocks', 'Patterns', 'Media', 'Synced patterns'. The same level means that they are equal in opportunities. i.e. each give us unuqie ability in sitebuilding.
And while 3 of these tabs ('Blocks', 'Patterns', 'Media', 'Synced patterns') are real unique ability in sitebuilding, but 'Media' tab give us nothing new because it's available to insert the same and much more via 'Blocks' tab -> Media section

'Media' tab is just reduced ability to add media.

In additional image inserted via block and via 'Media' tab inserted with different resolution, and it looks really strange: image inserted via 'Blocks' tab inserted in 'Full Size' resolution, but the same image inserted via this 'Media' tab inserted in smallest resolution. Video attached.

Add.New.Post.1.mp4

[bph]

@chyvak1831 this is an interesting request. It would be best to get more eyes on this discussion. If you create a new issue with this feature request, it would put it on the radar not only of the developers who worked on this issue, who have moved on since this issue was closed on October 2022. Then we can also give it the proper labeling like "Feature request, needs design feedback, Media library". Work on the Media Library is part of Phase 3 of Gutenberg, so your timing is impeccable :-)

[mrfoxtalbot]

Is there a way to filter what media is shown in this new Media tab based on certain criteria, for instance, user roles and capabilities? (more context here)

I realize that this might not be the best place to ask so, please do let me know if I should be asking somewhere else.

[ntsekouras]

Is there a way to filter what media is shown in this new Media tab based on certain criteria, for instance, user roles and capabilities?

Right now, no. Could you create a new issue @mrfoxtalbot ?

[mrfoxtalbot]

You got it! #58944
Thank you, @ntsekouras!