Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update/link control show preview of attachment in suggestion list #57824

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

n2erjo00
Copy link
Contributor

What?

This is PR modifies LinkControl component to render preview of attachments instead of generic icon. But only if suggestion item type is attachment and mime type tells the component suggestion is indeed an image

Why?

Closes #57776

Issue was brought up by the linked issue.
Not in any way major new feature but this PR adds nice cherry on top of the editor experience.

How?

First problem was to figure out to know when it is okay to render preview image and when not (media library can contain other files than images). This was achieved by tracking the code which does the REST API call and purges bloating data from return data. Here I added new field mineType. See diff on __experimental-fetch-link-suggestions

Now that there is clear way of knowing what kind of attachment it is SearchItemIcon component is able to switch icon to img tag. As a side note clarity img tag has width and height attribute(s) but the block-editor styles overwrite height attribute to auto. I left it there to be extra transparent that image is going use 1/1 aspect ratio

Testing Instructions

  1. Upload some test images (can be SVG also) media. Also add non-image files there (videos, pdf documents, go crazy here)
  2. Open post or page and start playing around with LinkControl component. For example use "Buttons" block
  3. Make searches that return those files and observe that when attachment is indeed image then you see preview of image and if not you see good 'ol classic icon

Testing Instructions for Keyboard

Screenshots or screencast

Screenshot 2024-01-13 at 11 26 37

@Mamaduka Mamaduka added [Type] Enhancement A suggestion for improvement. [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) labels Jan 15, 2024
@getdave
Copy link
Contributor

getdave commented Jan 15, 2024

On my review list.

@MaggieCabrera
Copy link
Contributor

I'm sorry I started #58458 without checking there was an open PR already! I hadn't thought of the mimeType solution, really nice! Also, the original issue is prompting to change the link preview too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

LinkControl: Add support for images for in attachment search results
4 participants