Web-stories-wp: Font Picker: Search fonts

[jauyong]

Feature description

This is a follow up to ampproject/amp-wp#3759

Fonts Figma spec

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

1. User is able to search for fonts
2. After the user enters chars, search results are displayed based on the input
3. If there are no matches for a search, indicate that no matches are found
4. After the user clicks on font picker, the focused is placed on search field

Implementation brief

QA testing instructions

Demo

Changelog entry

[ndev1991]

Do we have any requirements for popular fonts and suggested fonts?

[swissspidy]

^ @jauyong @pbakaus @o-fernandez

[pbakaus]

^ @samitron7

[o-fernandez]

I'd go with what's in the Figma spec for now.

[swissspidy]

I don‘t think Comic Sans is popular :-)
The design on Figma looks like the old font list from the legacy editor. We need to cone up with a better definition of popular fonts.

[o-fernandez]

@samitron7 @pbakaus anything you had in mind when it comes to popular fonts? If not, I'd say we skip this for now. Seems like a plausible enhancement to do later if not readily spec'd.

Unless there's any opposition, I'd suggest splitting that into its own issue, and keeping the rest of the spec'd items in here. @jauyong

[ndev1991]

@pbakaus @o-fernandez @samitron7 Do we have any updates here for popular fonts, suggested fonts?

[swissspidy]

Personally I'd say, when opening the fonts dropdown, we should just show the N first fonts from the list. Popular fonts can be looked at later.

[o-fernandez]

Agree, per my prior comment I suggest separating the "Popular fonts" into its own ticket. I'll update this ticket to reflect that.

[pbakaus]

+1. I'd do popular fonts after launch.

[miina]

If this issue addresses search only then it looks like it already has a PR and is in review by https://github.com/google/web-stories-wp/pull/1300 which in addition to preview also implements search. cc @ndev1991 to confirm.

[ndev1991]

If this issue addresses search only then it looks like it already has a PR and is in review by #1300 which in addition to preview also implements search. cc @ndev1991 to confirm.

Yes, that basic features already implemented on #1300 .

1. Input search box focus on open
2. List default fonts lists
3. Search has two separate lists that starts with and includes
4. Recent used fonts feature added (Just temp state for used fonts. Refresh will clean that state)

[swissspidy]

I just realized that we could get the most popular fonts from Google Fonts. That would not include system fonts like Arial though, but I don't think that'd be a huge issue.

[ndev1991]

I just realized that we could get the most popular fonts from Google Fonts. That would not include system fonts like Arial though, but I don't think that'd be a huge issue.

That sounds great! Can you post some more details?

[swissspidy]

@ndev1991 well, the Google Fonts API supports sorting fonts by popularity, so basically we could create something like the existing fonts.json file, but just with the top X popular fonts.

Something we can pursue after launch. Unless we want to determine popularity ourselves.

[pbakaus]

I think this is great as first step (popularity from Google fonts).

[ndev1991]

@ndev1991 well, the Google Fonts API supports sorting fonts by popularity, so basically we could create something like the existing fonts.json file, but just with the top X popular fonts.

Something we can pursue after launch. Unless we want to determine popularity ourselves.

@swissspidy Do we have any plan to add that fields to current fonts.json file? Maybe fonts.json will be generated by some cron job from php?

[swissspidy]

Do we have any plan to add that fields to current fonts.json file?

No plans yet. We'll get there once we need to implement popularity. Could be either be a field in fonts.json or a new popular-fonts.json file - we will see.

Maybe fonts.json will be generated by some cron job from php?

The fonts.json file is already generated by a cron job _in the repository_. This cannot be done in PHP within the plugin.

[o-fernandez]

Agree with @swissspidy - to clarify, no popularity to be implemented as part of this ticket. We can explore this in the future. :)