Improvement suggestion: Font families panels

[beafialho]

Each font panel is so large it fills the entire screen, this makes it difficult to browse and edit the fonts:

I feel it would be an improvement is to:

• Either have the fonts dropdowns collapsed by default
• Or, even better, have a sidebar showing all the fonts uploaded to the theme, like this:

That way, it would be easier to browse and edit all the font families.

cc: @iamarinoh @iamtakashi

[matiasbenedetto]

Hi @beafialho 👋
I have a few questions about the mockup:

• Is the sidebar an outline of all the font families available, right?
• What's the expected functionality from the three dots that appear at the right of the names?
• For reading order clarity, what do you think about moving the sidebar to the right side? My rationale here is: as it appears to be an outline of the font families available, and those changes are done in the main part, it seems like the outline is a result of the content of the main view and it feels more natural to put it after the main area.
• Not a question but a proposal: I think we could add a little bit more info about the fonts used, like the quantity of variants included and the total weight of the font assets.

[matiasbenedetto]

Apart from that, I think we could split this issue into 2 items because the first one is very quick to implement.

• Font families collapsed by default #229
• Implement a sidebar with outline info about font families
  

[beafialho]

Hi @matiasbenedetto!

Is the sidebar an outline of all the font families available, right?

That's right, like a summary with all the fonts on your theme.

What's the expected functionality from the three dots that appear at the right of the names?

I could see an "Edit" and "Remove" there. Maybe it could be divided with labels by "Local" and "Google" too for more clarity?

For reading order clarity, what do you think about moving the sidebar to the right side? My rationale here is: as it appears to be an outline of the font families available, and those changes are done in the main part, it seems like the outline is a result of the content of the main view and it feels more natural to put it after the main area.

Good point, I think that can work too 👍🏼

I think we could add a little bit more info about the fonts used, like the quantity of variants included and the total weight of the font assets.

Totally, where do you see that info showing?

[henriqueiamarino]

Maybe we could drink from the fountain of one of our greatest resources, Google Fonts.
This is how they deal with previews and styles, also offering different views such as Card and List.

[beafialho]

@henriqueiamarino it's a good reference! I have a preference for list as default, but having those two options sounds cool.

[matiasbenedetto]

I'm closing this as completed in #260
Feel free to re-open if #260 only covers some of the expectations for this issue.