UX - Provide mock showing the integration of Unsplash with the WP Media Library

[bmattb]

Feature description

Please provide a mock to clearly illustrate the presentation of the Unsplash search facility within the context of the Media Library. This presentation should show the following:

• how the user accesses Unsplash from the Media Library
• What the user sees when they select the Unsplash view
• accomodates the functionality specified in #133

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Mock shows the required elements and is reviewed / approved by PO / client as required.

Implementation brief

QA testing instructions

Demo

Changelog entry

[cathibosco]

@bmattb Can you please review this flow? I need to complete the issue #125 (adding Unsplash username in the interface) to complete this mockup but I have dramatically simplified the experience based on default Media Library pattern this time.

I included our "success" visual language in 2 places.... Please provide feedback and I will shift my focus on the other issue #125 (adding Unsplash username in the interface). -Thanks!

This mirrors the existing pattern but relocates the loading icon and success indicator and adds an "import" action button. Link to the mocks.

[bmattb]

Feedback - overall this is good start.

1. The mocks show the ability to switch from masonry to grid layout, that functionality isn't presented in the Media selector modal, and I don't see it as critical, please remove
2. Attachment details - The addition of the spinner / check - was this introduced to provide the user feedback on current state of import? We don't provide the same in the media selector, so I'm concerned about introducing a ux that is signifcantly different than the insertion journey.
3. Attachment details - You have introduces a button called update - however native WP simply saves any changed fields on exit from this view, and we should simply replicate that pattern for now
4. Attachment details - These links that are part of core WP are missing from the view - View attachment page | Edit more details | Delete Permanently
5. I don't want to introduce a checkmark on the default state at this point in time as it's not clear what it means or what the value is... however I'm totally open to discussion about this and would love to chat more.

[cathibosco]

1. OK
2. We have a default spinner and word "saved" very tiny already with core up in the corner... I'll remove my version for the Unsplash plugin. We can test it... It happens very quickly up in the corner and disappears. I am concerned it may go unnoticed.
3. OK - would the button then disappear after successful upload? I'll mock it up into a quick prototype to answer that...
4. Those could appear after we upload successfully potentially? Would they be useless before we uplaod/hotlink? There is no attachment page yet... and delete it form where?
5. Ok - I'll apply this feedback and ask for another review.

I added the Photographer's name and link to everything - directly under the thumbnail where appropriate. FYI Thanks @bmattb

[cathibosco]

The views and mocks have been updated - let's discuss the latest iteration @bmattb Link to the mocks

[cathibosco]

[bmattb]

Discussed this am:

1. removal of the masonry icon as there is no alternative view possible so no need to provide this icon
2. A user should indicate to the plugin that they want to add the image to their media library by selecting "Import Image" Once this action is completed, we should let them know, by removing the button and presenting them with "Image imported". Meta changes will continue to be available by allowing the user to update/edit fields in the attachment details view with meta field focus loss triggering the meta update.

[bmattb]

Note to self - we will need implementation stories to cover off:

1. a user edits image meta pior to manually importing into their media Librarry
2. a user accesses the image in the media library after import and updates the meta

[cathibosco]

Mocks were updated. Link to the mocks

[bmattb]

this was completed