Font Library: Improve font upload UX

[juanfra]

The current font upload interface is missing clear visual cues that it's a dropzone and doesn't show that you can upload multiple files at once.

Current problems:

• No clear visual indication this is a dropzone
• "Upload font" (singular) makes it seem like you can only upload one file.
• No dashed border like other WordPress dropzones (Media Library)

Proposed improvements:

• Add upload icon. Use the standard upload icon from the design system
• Change to plural, so that it's clear that you can upload more than one font at once.
• Add helper text. Can be a more muted style, I'd go with "Drop files or click to select"
• Add dashed border. (We are already using it in other places like the media library, and it's an established pattern)

These changes will make it obvious the area is interactive, show you can upload multiple files (easier to discover drag and drop) and we'll be following patterns we already have.

Current

Proposed

A. With allowed formats at the bottom	B. Moving allowed formats to the dropzone

[Mustafabharmal]

Yeah, I think by doing this we can form the consistency across the platform as the similar kind of layout is there in the media upload.

[hbhalodia]

• I do have added the label for Design Feedback. I am requesting @WordPress/gutenberg-design could help to provide the best possible way here for consitency, may be as suggested from media upload.

[jasmussen]

Good issue. It refers to this component, which would need to be changed in order to address this issue: DropZone. I've noticed that one of the dropzones inside the updated DataForm uses a new dashed line version. I wonder if that design needs to be propogated here? CC: @jameskoster @ntsekouras

[juanfra]

Thanks for chiming in @jasmussen!

The font uploader already uses DropZone, but it's absolutely positioned to cover the whole area and without any styles. We should probably try to have a unified experience, indeed.

Can't find that in storybook, but I believe you're talking about the styles of MediaEdit?

[jasmussen]

Yes, I'm suggesting DataForm uses a new visual for it, like this:

Design details aside, we should unify.

[juanfra]

Here's a quick mockup of using the new styles. Not entirely sure about how using the accent for it scales to different contexts.

If the plan is to unify we should also get the page/post featured image upload button into the mix. It's currently looking like this