Consider adding a way to link to a file from the link inserter so someone can upload a PDF file and link it to text

[mintplugins]

My apologies for the question, but I am posting here because I believe it is a UX issue with Gutenberg that could be improved.

In the classic WordPress editor, the "Add Media" button allowed you to easily upload files to the media library without leaving the page. This allowed for easy uploading of something like a PDF file, which you could then attach to some text like Click here to download this PDF.

I know there are separate/dedicated blocks for this type of thing, but what if I'd prefer to have the text inside a paragraph block type?

I see 2 possibly ways currently, neither of which are very user friendly or obvious:

1. I can leave the page entirely, navigate to the "Media Library" page, upload the image, copy the URL, navigate back to the Gutenberg editor, select the text in my paragraph block, click the chain icon, and then paste the URL.

2. I can add a "File" block, upload the PDF, copy the URL, remove the file block, select the text in my paragraph block, click the chain icon, and paste the URL.

Proposal:
Add the "Add Media" button as an option to the paragraph block's controls:

[sarahmonster]

Agreed that this is currently something of a sub-optimal experience as it currently stands. I noticed this whilst working on #8295 but I suspect that this sort of thing may be better resolved by inline/nested blocks, once that becomes more of A Thing.

[designsimply]

Another possible solution might be to allow searching media, such as PDFs, as an option in the floating link toolbar. For reference, here is a screenshot showing how search results currently look in that toolbar:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14091&action=edit using Firefox 61.0.1 on macOS 10.13.6.}

[sarahmonster]

I think that'd probably be a better solution (than an inline file block, which may not accomplish the same thing), but it'd require some adjustments to the UI to account for it. You'd probably also want to allow for uploads directly, rather than having to switch to the media library to upload the file, then switch back to Gutenberg. (And for parity with the classic editor!)

[mintplugins]

While a great idea to allow searching of media, it introduces a new UI for browsing media, which duplicates functionality that already exists with the media uploader/browser. It also wouldnt allow you to upload without leaving the gutenberg editor, correct?

[maddisondesigns]

@designsimply That doesn't resolve the issue of not being able to upload a file. Having the Add Media button on the existing TinyMCE toolbar is considerably more flexible. It's much easier (and more intuitive) adding inline images, than being forced to insert an Inline Image Block. It also allows you to easily upload and link to files such as PDF's or DOCX files, without having to disrupt your editing experience by exiting the editor, going to the media library, uploading the file, and then finally going back into the editor again.

[chrisvanpatten]

Just noting there was some extra discussion on #10280.

I think this could also be an interesting use case for the richtext formatting API so it's handled in a similar way to inline images.

[jasmussen]

So the way to do this now is to use the file block, or just drag and drop the PDF to upload it. This results in the following:

You can then click the "copy URL" button, and paste the resulting link over text:

This is how it's done today.

But I agree this flow is not ideal, and can be optimized. So labelling it as such.

[mtias]

Going to close this since there is a block for Files and you can grab the URL from it. In the future, it'd be nice to expand the "Link" tool to also search for files, media, etc, to link directly.

[mintplugins]

@mtias I'm a little bit confused. What does closing this issue mean to you? Does it mean that it's being punted to a future release? Or is the intention that it become lost to the archives of closed issues and forgotten, or that hopefully someone brings it up again in the future? I'm just wondering what the intention of closing this issue is, since you yourself agree that it is a valid issue.

Please note that I spoke about the file block when I opened this issue. The purpose of this issue was to outline usability issues with the current file upload flow, and that the File Block is not sufficient for a user-friendly experience.

[JJJ]

I agree that closing this issue seems premature. Nothing has been fixed, and the issue still exists.

[mindctrl]

@mtias can you please reopen this issue? Everyone acknowledges this is a hacky workaround, and you say it would be nice to have a legit fix in the future. This seems like the best place to track this issue for that future since it's well documented here and won't require duplicating efforts to document it again.

[karks88]

I've got to agree, this needs a better solution. I actually had to find this thread before I knew how to upload a PDF and link to it.

[earnjam]

I'm going to reopen this and milestone it for 5.1.

Requiring the creation of a temporary block just to copy a file url and paste onto a link is a pretty poor step back from the old editor for what is a very common use case—simply linking to a document inline.

I think if we have enhancements that we know we'd like to address in the future, but just don't know when, then we should keep them open and possibly assign some indeterminate future milestone. This is how we’d handle them on Trac, so I think we should continue that here. Closing issues makes them very difficult to find and surface later.

[mtias]

@mintplugins sorry I missed your ping here before. It sounds good to me to keep this open and assign to a future milestone. If there are other ideas on how to handle this, please share.

[burnuser]

A textual search like for pages and post would help, but would maybe not sufficient, because filenames (without preview in the mediathek) are not always really clear AND a future solution should have the same power as the classic one and allow text-linking of ALL filteypes in the mediathek (with preview for selection).
So we need a button solution which leads to the mediathek.

I see 2 options:
a) Toolbar button (like suggested by mintplugins at the beginning)
b) additional button only in the link-enterform (where it belongs)

[andrew-dixon]

This is the first issue I've had raised with me by someone using Gutenberg and it took me to find this post to know how you are currently meant to do it, which is an extremely sub-optimal solution.

I think that both suggestions are required. You need to be able to search for an existing media item from the "link" option as well as having the option to upload a new link.

Also, it would be nice to be able to select some text and then drag and drop a file onto the page and it automatically upload that file to the media library and link the selected text, instead of it inserting the file block.

[roryashfordbentley]

Would it be possible to have a Media Library button within the new Link dialog, whereby if you select a media item rather than embedding it it adds a link to the file, or a link to the attachment page?

[EricDu]

How about simply expending the link options panel to include options to upload new media or link to existing media? The Upload button could also accept drops.

[webdados]

@baskettcase @karolgrudzinski welcome to the club

[getdave]

@karolgrudzinski @webdados Whilst I'm not saying it's perfect (it's still a Draft) would something like #39701 go someway to improving this situation?

[karolgrudzinski]

@getdave This is exactly what I'm looking for. I guess it'll take weeks (months?) before it gets to users and I need something working today :(.

[karks88]

One temporary workaround I've done is create a little custom block using Advanced Custom Fields. It's a repeater field that lets me upload a file and give it a title.

[buckmanhands]

I have been using the featured image sidebar to gain access to the media. Rudy

On Wed, Mar 23, 2022 at 10:21 AM Eric Karkovack ***@***.***> wrote: One temporary workaround I've done is create a little custom block using Advanced Custom Fields. It's a repeater field that lets me upload a file and give it a title. — Reply to this email directly, view it on GitHub <#8322 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAENKR4PXBVQDGWKSGHYFH3VBNHKBANCNFSM4FNBUKLA> . You are receiving this because you commented.Message ID: ***@***.***>

-- Tiny phone, fat fingers. please excuse my misspellings and brevity.

[webdados]

@getdave It's looking good

[getdave]

@getdave This is exactly what I'm looking for. I guess it'll take weeks (months?) before it gets to users and I need something working today :(.

That's good to hear. I can't get something to you today but the Gutenberg Plugin is updated every 2 weeks with the latest from trunk so if you're using that then you might get the upgrade sooner (at the cost of less stability).

[karolgrudzinski]

That's good to hear. I can't get something to you today but the Gutenberg Plugin is updated every 2 weeks with the latest from trunk so if you're using that then you might get the upgrade sooner (at the cost of less stability).

I decided for now to leave text without download links and put them in File Blocks (with preview disabled) on the bottom instead and wait for official Gutenberg/Wordpress release.

[getdave]

#39701 has been merged which means that once it's released you will be able to see Attachment posts in the Link UI search results. See the PR for more details.

[webdados]

https://media.giphy.com/media/dsGcvvBPzXJ9KSnLPg/giphy.gif

[MadtownLems]

The ability to find existing Media Library files with the link creation UI is a huge help, but the ability to actually upload a new file from the Editor still seems like an absolute must-have.

Using a temporary File block to upload and get the UI is not really reasonable as a permanent solution, in my opinion. (Nor is telling people to open the Media Library in a new tab, or to be sure to go upload the file first.)

Please don't consider this issue resolved until that's possible 🙏

[slingshotdesign]

Hi folks, is it possible relook at this issue please?

All of my clients add links to PDFs in their post content and the current ways of doing this are painful. In some cases, for clients who add a lot of links I have to recommend they use the Classic Block, which defeats of the point of Gutenberg.

As the original poster asked, is it possible to add an "Add media" button to the toolbar for headings and paragraphs to work in exactly the same was as the Media icon in the classic editor, please?

[Soean]

I think the new media inserter could be a good place. But at the moment it only support images, audio and video.

[slingshotdesign]

Thanks for the input @Soean that's a great new feature and I would love to see that expanded to other types of media. It seems to work in a similar way to inserting an image or file block. Do you think it could to utilised to insert a link to the media file as well?

[getdave]

@ntsekouras As you were instrumental in adding media here what do you think about a means to upload media here as well?

[MadtownLems]

I would LOVE for this to be able to insert pdfs (and Word and similar) documents directly from this 'Media' inserter. Our users are going to be very confused that the upcoming "Media" tab doesn't include all items from their "Media Library" otherwise.

[andrew-dixon]

I feel like there is a bit of conflation between the idea of "inserting" (embedding) a PDF and simply linking to a PDF from a piece of text going on here and they are very different things. This ticket is about linking to. a PDF from a piece text, not "inserting" (embedding) it into the page. Having said that, how has this not been resolved in nearly 5 years?

[slingshotdesign]

I have made a plugin to acheive this today.

It's not very refined but does the job and may help others for the moment. I will share a link shortly.

[karks88]

Anything that can simplify this process would be greatly appreciated. We have the ability to add an inline image. Maybe an inline file link would work?

[getdave]

@slingshotdesign Would you consider contributing the code to Gutenberg Core itself instead of making a Plugin? PRs are always welcome.

[slingshotdesign]

@getdave I would definately prefer to contribute than make a plugin but not sure how the process works at the moment. I've wanted to get involved for some time. I needed a quick fix for my current project hence the plugin and will share it as soon as I can to check what everyone thinks before attempting to contribute to Core.

[slingshotdesign]

Hi folks,

Here's a plugin that Adds a Media button to the RichText Toolbar in Gutenberg.

I would have preferred the icon to be next to the link icon but couldn't figure that out.

I belive this solves the issue of the OP.

If this works for other people I would be happy to try and contribute this to core (may need some help).

[SJNBham]

Hi @slingshotdesign - We tried installing the plugin and it won't activate because a fatal error occurs. We would prefer to see the existing link option extended along the lines of what @EricDu was proposing.

[slingshotdesign]

Hi @SJNBham - sorry about the error, it was due to the way I had zipped the plugin files. I have changed that now so it should install corrctly if you download the code zip now. I appreciate that there are many ways to acheive this and @EricDu solution could be really good, especially if the link search includes attachment files as created by @getdave work above.

[getdave]

I can to check what everyone thinks before attempting to contribute to Core.

@slingshotdesign No need to ask permission to contribute 😄 You'd be very welcome. The project is absolutely open for contributions.

The Getting Started guide here is a useful resource.

Basically

• Set up dev environment of your choice.
• Fork this repo
• Make your changes in a branch.
• Push to your repo.
• Create a PR on this repo from your repo.
• Let me know. I will label it and see if I can round up folks for reviews.

I started exploring an idea around this in #37260 but it never got anywhere. Maybe you can borrow some ideas but don't feel obliged.

[ntsekouras]

@ntsekouras As you were instrumental in adding media here what do you think about a means to upload media here as well?

I feel like there is a bit of conflation between the idea of "inserting" (embedding) a PDF and simply linking to a PDF from a piece of text going on here and they are very different things

I'd echo @andrew-dixon that these are different things. It seems to me something like @getdave 's #37260 would be the way to go.

[slingshotdesign]

I also think @getdave 's #37260 is a really great way to go!

[buckmanhands]

This particular request thread was supposed to be about finding a way to easily add a link to a pdf as the href value of an <a>. Nothing to do with embedding a pdf visually in the page.

On Tue, Mar 21, 2023 at 6:00 AM Slingshot Design ***@***.***> wrote: I also think @getdave <https://github.com/getdave> 's #37260 <#37260> is a really great way to go! — Reply to this email directly, view it on GitHub <#8322 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAENKRZ6PQ5O2EKR7FDFDBTW5GRAJANCNFSM4FNBUKLA> . You are receiving this because you commented.Message ID: ***@***.***>

-- Tiny phone, fat fingers. please excuse my misspellings and brevity.