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

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 #8322

Open
mintplugins opened this issue Jul 31, 2018 · 37 comments

Comments

@mintplugins
Copy link

@mintplugins mintplugins commented Jul 31, 2018

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:

add-media-button-gutenberg

@sarahmonster

This comment has been minimized.

Copy link
Member

@sarahmonster sarahmonster commented Jul 31, 2018

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

This comment has been minimized.

Copy link
Member

@designsimply designsimply commented Jul 31, 2018

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:

screen shot 2018-07-31 at tue jul 31 11 56 58 am
Seen at http://alittletestblog.com/wp-admin/post.php?post=14091&action=edit using Firefox 61.0.1 on macOS 10.13.6.

@sarahmonster

This comment has been minimized.

Copy link
Member

@sarahmonster sarahmonster commented Aug 1, 2018

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

This comment has been minimized.

Copy link
Author

@mintplugins mintplugins commented Aug 1, 2018

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

This comment has been minimized.

Copy link

@maddisondesigns maddisondesigns commented Aug 7, 2018

@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

This comment has been minimized.

Copy link
Member

@chrisvanpatten chrisvanpatten commented Oct 3, 2018

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

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Oct 11, 2018

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:

screenshot 2018-10-11 at 12 31 28

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

screenshot 2018-10-11 at 12 31 42

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

This comment has been minimized.

Copy link
Contributor

@mtias mtias commented Oct 12, 2018

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.

@mtias mtias closed this Oct 12, 2018
@mintplugins

This comment has been minimized.

Copy link
Author

@mintplugins mintplugins commented Oct 12, 2018

@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

This comment has been minimized.

Copy link
Contributor

@JJJ JJJ commented Oct 22, 2018

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

@mindctrl

This comment has been minimized.

Copy link

@mindctrl mindctrl commented Nov 2, 2018

@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

This comment has been minimized.

Copy link

@karks88 karks88 commented Nov 8, 2018

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

This comment has been minimized.

Copy link
Contributor

@earnjam earnjam commented Nov 8, 2018

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.

@earnjam earnjam reopened this Nov 8, 2018
@earnjam earnjam added this to the Future: 5.1 milestone Nov 8, 2018
@mtias

This comment has been minimized.

Copy link
Contributor

@mtias mtias commented Nov 12, 2018

@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

This comment has been minimized.

Copy link

@burnuser burnuser commented Nov 29, 2018

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 comment has been minimized.

Copy link

@andrew-dixon andrew-dixon commented Jan 11, 2019

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

This comment has been minimized.

Copy link

@roryashfordbentley roryashfordbentley commented Jan 11, 2019

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

This comment has been minimized.

Copy link

@EricDu EricDu commented Jan 14, 2019

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.

wp-media-link

@EricDu

This comment has been minimized.

Copy link

@EricDu EricDu commented Jan 28, 2019

@andrew-dixon, I will not argue with you for supporting my initial idea ;-)

To clarify, the way the UI first appears would be exactly the same as it currently is (clean and basic). Only the drop-down would have more options.
wp-media-link-2

There will always be arguments about which features should be front-and-center (making the UI more complex) and which ones should be slightly hidden. This is what the Design feedback discussion is for. I favor keeping it in the dropdown because it keeps the UI simple and takes the exact same amount of clicks to add a link as a separate button would.

@karmatosed karmatosed removed this from To do in Phase 2 design Jan 31, 2019
@karmatosed karmatosed added this to To Do in Phase 2 via automation Jan 31, 2019
@karmatosed karmatosed moved this from To Do to Tighten Up in Phase 2 Jan 31, 2019
@kjellr

This comment has been minimized.

Copy link
Contributor

@kjellr kjellr commented Feb 18, 2019

Another potential direction: Using the treatment from the featured image sidebar setting:

file

This field allows you to: drag & drop something in, or click to open the media library. From there, you can upload or select an existing item.

One question I have though (for all of these options): Once you have an item selected... would we display it here?

frame

@kjellr

This comment has been minimized.

Copy link
Contributor

@kjellr kjellr commented Feb 18, 2019

Another general thought here (might be out of scope of this change):

Using the ellipsis button here seems a little unexpected. Traditionally, we use the ellipsis button to expand a menu (see the block toolbar and top toolbar for example), not to show/hide a panel. The closest other indicator we have currently is the cog to show/hide the sidebar, but I think that gets a little confusing too.

I wonder if a treatment along these lines makes more sense in this case:

Expand/Collapse Panel (Collapsed by default)
frame


Replacing the ellipsis with a down chevron
frame2

@iamthomasbishop

This comment has been minimized.

Copy link

@iamthomasbishop iamthomasbishop commented Feb 18, 2019

@kjellr These options all are all improvements to the ellipsis, imo – well done! I honestly like both variations, especially like your thinking on the first option because while it takes up more real estate, it's more obvious.

If we were to utilize the second approach for simplicity (considering this option doesn't move the placement, just icon), I would propose that we add a divider between the enter icon and the dropdown/up toggle to add a slight bit of visual separation and consistency with other toolbars. Example:

screen shot 2019-02-18 at 12 06 31 pm

(might need some padding adjustment, but you get the idea 😄 )

@kjellr

This comment has been minimized.

Copy link
Contributor

@kjellr kjellr commented Feb 18, 2019

Good call, @iamthomasbishop. Updated comp:

frame

@EricDu

This comment has been minimized.

Copy link

@EricDu EricDu commented Feb 18, 2019

I like it. It has the same functionality as my initial proposal but a bigger drop zone.

For the drop-down button, I would follow what is used elsewhere in Gutenberg (as to not reinvent the wheel). The arrow is more intuitive than the ellipsis.

Finally, there's the naming issue. Do we need to mention the word "media" so users realize we're tying into the media library? There are also people who think "files" means PDF or MS Word docs, and don't realize photos are files too. How much do we need to cater to the lowest common denominator?

Maybe just adding the Media icon before "Linked to a file" is enough to clarify.

@youknowriad youknowriad modified the milestones: Future, WordPress 5.x Feb 19, 2019
@melchoyce

This comment has been minimized.

Copy link
Contributor

@melchoyce melchoyce commented Feb 19, 2019

For future reference re: https://core.trac.wordpress.org/ticket/43151, we should make sure the dropzone is a styled button, rather than a clickable div.

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Mar 8, 2019

Looks like we've got a strong direction forward from @kjellr's last mockups. I'm dropping "Needs Design Feedback" and adding "Needs Dev."

@mapk mapk added Needs Dev and removed Needs Design Feedback labels Mar 8, 2019
@designsimply designsimply changed the title How does one upload a PDF file and link it to text from the Gutenberg view? 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 Apr 15, 2019
@noisysocks

This comment has been minimized.

Copy link
Member

@noisysocks noisysocks commented Jul 11, 2019

I'll look into this! edit: j/k, I got pulled away onto something else 🙂

Ideally we should use the same component for both Featured Image and Link to a file.

@noisysocks noisysocks self-assigned this Jul 11, 2019
@noisysocks noisysocks removed this from Tighten Up in Phase 2 Jul 19, 2019
@noisysocks noisysocks added this to To Do in Tightening Up Jul 19, 2019
@noisysocks noisysocks removed their assignment Jul 31, 2019
@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Oct 21, 2019

Related: #17557

@karmatosed karmatosed moved this from Inbox to Needs design in Tightening Up Oct 21, 2019
@melchoyce melchoyce removed the Needs Design label Dec 2, 2019
@melchoyce melchoyce moved this from Needs design to Ready to create in Tightening Up Dec 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Tightening Up
  
Ready to create
You can’t perform that action at this time.