Font Library: third-party integration

[wpsoul]

I like new Typography options but problem with this panel is that it's hidden so deep inside settings and users can't find it. It's available after 5 clicks and most of them on different icons that is not intuitive.

I wonder if it's possible to use Modal as component in own react panels?

[colorful-tones]

Are we talking about the Font Library?

[wpsoul]

Are we talking about the Font Library?

Exactly

[colorful-tones]

Based on a search of the codebase. The Font Library utilizes the Modal component from the components library

gutenberg/packages/edit-site/src/components/global-styles/font-library-modal/index.js

Line 6 in 40395f9

Modal,

Here is the Modal component's documentation https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/modal

Hopefully that should get you started in the right direction.

I'm closing this out as it is not related to a feature enhancement or a bug and seems to be more of a support question on how to use components from Gutenberg.

Feel free to jump into WordPress Make Slack and maybe ask questions in #core-editor

[wpsoul]

@colorful-tones I didn't ask how to make Modal, I have own component.

I asked how to use Font Library Component. I think it's not registered as component.

So, yes, it should be not closed and it's Feature Request

[colorful-tones]

@wpsoul I would recommend updating the title of this issue to something more relevant for discoverability. Maybe:

• Font Library: third-party integration
• Font Library: public component usage

Then maybe update the description to be more precise about your particular needs.

Last, consider reviewing this overview issue for the Font Library to see if there might be overlap. I sense that your request is not unique, and it may already exist in another form in another Issue. My search skills were not successful. I’ll reopen this.

[wpsoul]

Ok. Added new title that makes it more clear

[matiasbenedetto]

Hi @wpsoul, could you provide more context about this issue, please? Knowing what you want to achieve around the font library would help clarify the issue.

[wpsoul]

@matiasbenedetto I just need Typography manager to be available as Library item. Like

import {TypographyManager} from ...

But I found that it has one big disadvantage, it doesn't support variable fonts, so currently not usable for me

[matiasbenedetto]

I'm sorry, but I still don't understand what you want to achieve. If you add more context, maybe I can help with that.

it doesn't support variable fonts, so currently not usable for me

This is not 100% accurate. You can upload your variable font assets to the font library and use them as any other font. The editor still lacks some UI controls to set the variable font options, but they are supported, and you can set the missing config options by manipulating the theme.json file.

[marcusig]

@matiasbenedetto I have a similar question.

Here's my use case:

I have a product configurator plugin, in which I want to offer the possibility to users to customize their text.
For example, a customer on the shop would be able to select a font, a font color, and input their text.

The admin needs to be able to add a list of fonts which will be available to the customer to choose from.
The text added by the customer needs to show with the selected font applied.

Obviously the context is different than the site editor, but the need is the same: managing the installed fonts.

So I'm wondering if there is a way to reuse the Font Library out of the Site Editor > Global styles.

[wpsoul]

@marcusig exactly the same as I want

[JohnRDOrazio]

I would find a Font Selector component quite useful so that plugins that provide blocks with InspectorControls can allow the end user to set fonts for elements within the block.

I have made an attempt at integrating a Google Fonts selector into my plugin https://github.com/BibleGet-I-O/bibleget-wordpress.

In order for plugins to start using the Font Library, a reusable Font Selector component would be quite handy. The only Font related component I can find is a font size picker: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/font-size-picker

Are there any plans to release a Font Selector component that plugins can use, for example in the InspectorControls area?

[ironprogrammer]

For fonts added/enabled through the Font Library or wp_register_font_collection, or added through theme.json, these should already be selectable through the Typography panel (field may need to be enabled via the kabob menu):

One of the design decisions with the Font Library was to limit management so that non-admin users don't unintentionally add a bunch of fonts and impose performance issues on the site. It also ensures that font options can be curated consistently with the site design.

If I'm reading the above comments correctly, extending the ability for normal users to activate additional fonts seems at odds with these aims. However, blocks that support Typography settings should be able to tap into already activated fonts. Does any of this clarification help address what's being requested?

[wpsoul]

This is not question about panel in blocks. But ok, I will close it because I found that Typography manager is not useful, as it doesn't support variable fonts, so, I will use my own solution

[marcusig]

I don't think this issue should be closed just yet.

@ironprogrammer In my case, I would like the ability to use the Font library on websites using classic themes. So it is not a question of giving "normal users" access to it, but being able to reuse the component elsewhere.

My use would be like this, in the context of WooCommerce:

1. In the shop settings, the admin / shop manager sets a list of fonts
2. In a custom made product, the shop manager can select from this list of fonts set previously.
3. These selected fonts will be available to the front-end user to preview custom text (e.g. engraving on the product) with the selected font.

So the fonts would not necessarily be available in Gutenberg, but in a different context.
The main thing would be 1) the ability to manage a global font collection

Of course we can develop our own solution, but in my view it would make more sense to be able to reuse the existing solution.

[JohnRDOrazio]

In my use case, I have a custom block that should have global styles. So every block of this kind should have the same styling, and therefore also the same font. In fact, the custom font selector I created for Inspector Tools will save the selection as a global option that will be applied to all blocks of this type.

But I think I'm starting to see how this might be handled in a block, using:

1. Block Supports
2. register_block_style

If custom blocks can have their own fonts handled through the site editor, I'm fine with that. I'll try experimenting a bit to see if I can get it to work properly. In that case, a reusable Font Selector for Inspector Controls would not be needed.

[ironprogrammer]

In response to @marcusig:

In my case, I would like the ability to use the Font library on websites using classic themes. So it is not a question of giving "normal users" access to it, but being able to reuse the component elsewhere.

Since this issue was opened, another issue specifically about extending Font Library to classic themes has been opened here: #64409. They're already discussing how it could be approached, so your input over there would be appreciated!