Add the Openverse Media Library

[ryelle]

Fixes #37 — Add a modal for searching the Openverse collection of images. Built on top of #373.

This is a rough draft of a search interface for finding images from Openverse. The only working test case is the Image block (other blocks use slightly different flows).

In the following recording, I've added an image block, found and selected an image, replaced the image, then re-replaced the image using the keyboard only.

Screen.Recording.2021-11-10.at.11.46.06.AM.mov

Steps to finish this PR:

• Check that the "openverse image object to block image object" conversion is okay
• Check if we need OAuth to run searches on openverse API
• Use the OAuth flow for API requests Openverse: Add endpoint to proxy search requests with authentication #382 (marking complete since it's not a blocker for this PR, either can go in first)
• Make the image selection work with other image blocks: Gallery, Cover, Media & Text
• Get something in place for non-image media blocks: Audio, Video, File (eventually will be supported in Openverse, but not yet)
• Accessibility — currently this is using buttons, but the images have no alt text or displayed title, so keyboard-only selection works but not screen readers. Will also need a different selection method when selecting a gallery, maybe an extra button to "Select" the image(s) like the core media modal? (IMO following the core structure here is probably best, as it's been tested and proven already)
• Design help in general 😅

Screenshots

Open the modal, shows a request to get all images. Here we could prepopulate a search term, or make some other specific request.

Type in the search bar, returns the results

If there are no results, we show an empty state

[ryelle]

The latest commits add support for Gallery selection too, and now uses the 2-step process that the core media modal does - you first select an image (which is highlighted with a blue border), then "Add media" in the modal footer. Still tweaking the keyboard interaction, I think the whole grid will be a single tab stop, with arrow keys to select.

[shaunandrews]

This is super cool. Here's some designs for how I see this looking:

Some notable changes:

• Replaced "Openverse Media" with "Pattern media" (Note the sentence case.)
• Added a "Powered By Openverse" badge.
• Search is now centered and the whole layout uses a single column.
• Added some "suggested keywords" that might help reduce the pressure to come up with a search term.
• Added a "featured" section for when you haven't searched yet. I imagine this would be a small collection of images/videos/audio that we think would work best in most cases. I realize this might be out of scope.
• Added a reminder that uploading is disabled.
• I mimicked the Core media library when selecting multiple items by listing those items in the modal's footer.

[sarayourfriend]

This is so rad!

One piece of early feedback (I hope this is okay!) is that we'd likely want to surface the license requirements for each result as early as possible and the resulting image block would need to include the attribution (preferrably in some way that is obvious that it shouldn't be removed for images where the license requires attribution). I'm not sure how the attribution would be handled for the gallery block but hopefully a designer can help with that.

[ryelle]

@sarayourfriend for the Pattern Directory, we're only allowing CC0 images to be returned, so we shouldn't need to worry about attribution. Though we could probably drop it into the caption, and let pattern authors decide to leave it or remove it…? Not sure about that - right now just the item title is added to the caption. (I also want to figure out a good solution for alt text, both when browsing and when inserting images)

[sarayourfriend]

Oh perfect! I didn't catch that when I scanned the code, but that makes sense 🎉

For the alt text, on Openverse we use the image title.

https://github.com/WordPress/openverse-frontend/blob/51af7b01c7b53afbcccfd4ecbe895ae801b7c5de/src/utils/attribution-html.js#L10

[ryelle]

Latest commits get the styling almost-there:

I need to get the loading state centered, but I think that's the only thing remaining.

@shaunandrews I noticed an issue for the focus states on the images- when images are selected, there's no distinction between focused or not, and TBH there's not much distinction between focused/selected on the unselected images:

In core, there's a checkbox that appears on selected items for a clear distinction between focused/selected, we could do something similar with an icon? Open to any other solution too.

[ryelle]

I'm running into trouble trying to get the media blocks + openverse media to play together… The media blocks use image IDs to indicate what’s currently selected (for example, a gallery is a list of IDs). If we don’t pass through the OV item’s ID, it doesn’t persist selections - you can select images for a gallery, then open the Media Library again and it won’t know that you already have a gallery. On the other hand, if we do pass the OV item ID, the editor tries to make a request to /media/[id], assuming it’s a core media item. The request fails, since the OV IDs are not integers.

We're already intercepting some media API requests, so possibly I could intercept requests that look like OV IDs and short-circuit the return value, but I'm not sure if there's an easier way :)

Edit: Bypassing the API works to prevent the failed request, but it won't save the selected image ID because the media blocks expect the ID attribute to be a number and it does validation.

[shaunandrews]

when images are selected, there's no distinction between focused or not, and TBH there's not much distinction between focused/selected on the unselected images

I like using the check icon, along with some borders to help identify the various states:

[ryelle]

@shaunandrews thanks for the updated styles, I just pushed that change up to the branch so it looks like this now:

[shaunandrews]

Great. Looks like the "Cancel" button at the button is getting cut off somehow.

Will the results always be "10000"? If so, maybe we don't need the number of results. If the number could/does change, can we give it a proper counting treatment? That is, adding comma's/point's where they belong. Like, "10,000" instead?

[ryelle]

Cancel button: I think that's just because I'm downsizing by taking a 1x screenshot - it looks correct in real life:

Result count: The demo suggestions are all very broad, so they max out at 10,000 - result counts are different for more specific searches. I'll see about formatting the number better.

[ryelle]

Updated to use pagination for viewing older images — images selected on earlier pages stay selected, and are visible in the footer, so you can move between pages and search results to select anything you want.

[ryelle]

I'm going to merge this to get the framework in, and the remaining issues can be done in followup PRs:

• The item ID issue Add the Openverse Media Library #375 (comment)
• After the API PR Openverse: Add endpoint to proxy search requests with authentication #382 is merged, another PR will be needed to update which endpoint the modal uses