search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.01k stars 4.03k forks source link

Font Library: third-party integration #61145

Open wpsoul opened 2 months ago

wpsoul commented 2 months ago

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 commented 2 months ago

Are we talking about the Font Library?

wpsoul commented 2 months ago

Are we talking about the Font Library?

Exactly

colorful-tones commented 2 months ago

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

https://github.com/WordPress/gutenberg/blob/40395f946f895af707661eca74cee5d0ad13b1d4/packages/edit-site/src/components/global-styles/font-library-modal/index.js#L6

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 commented 2 months ago

@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 commented 2 months ago

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

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 commented 2 months ago

Ok. Added new title that makes it more clear

matiasbenedetto commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

@marcusig exactly the same as I want

JohnRDOrazio commented 2 weeks ago

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?