Font Library: Improve font upload UX

Open Beginner friendly
#76,674 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
Half a day
Newbie friendliness
68/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
javascript
Domain
design, frontend

Research direction

Start at the Font Library upload interface and compare its current dropzone with the established Media Library pattern mentioned in the issue. Update the upload area to include the standard upload icon, plural wording, helper text, and a dashed border; done means the interface clearly communicates drag-and-drop and multiple-file uploads.

Written by the indexing model from the issue text.

Description

[Feature] Font Library [Status] In Progress [Type] Enhancement Needs Design Feedback

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

Image

Proposed

A. With allowed formats at the bottom B. Moving allowed formats to the dropzone
Image Image
Dominant language
JavaScript
Stars
11.8k
Forks
4.9k
Avg merge
1d 22h
Merged PRs (30d)
560

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from WordPress/gutenberg

All issues in WordPress/gutenberg

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.