Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font Library: How to add lib-font package (or equivalent). #53653

Open
Tracked by #60528
matiasbenedetto opened this issue Aug 14, 2023 · 6 comments · May be fixed by #54440
Open
Tracked by #60528

Font Library: How to add lib-font package (or equivalent). #53653

matiasbenedetto opened this issue Aug 14, 2023 · 6 comments · May be fixed by #54440
Assignees
Labels
[Feature] Font Library [Feature] Typography Font and typography-related issues and PRs Needs Technical Feedback Needs testing from a developer perspective. [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@matiasbenedetto
Copy link
Contributor

matiasbenedetto commented Aug 14, 2023

What ?

We need to add the lib-font package (or a better equivalent) to read font assets metadata in the Font Library.

Current situation:

We are adding the files library files in the codebase, adding minor changes:

See these how we are adding the library files on Font Library Frontend PR:
https://github.com/WordPress/gutenberg/tree/d01a98d03724c90fb08a47a2504608e52c78b800/packages/edit-site/lib

Context

In Create Block Theme plugin, we use the same library to read the font assets metadata (font name, font weight, font style, etc) without changing the library source code. To avoid compiling errors, we needed to add custom Webpack config options.

@youknowriad suggested that we should avoid changing the Webpack configuration file for Gutenberg. Because of that, we are using the bundling approach, changing a few things in the library's source code (see the comments in the Fonts Library frontend PR ).

More Context

Added a question in the lib-font repo about the Webpack bundling: Pomax/lib-font#135

Alternatives

It is not a requirement to use Lib-font. We can try another alternative.
The pros of this lib:

  • It is used on Create Block Theme plugin, and it is working OK
  • The most lightweight alternative I found.

The con seems to be this issue.

Tracking issue

#52698

@jorgefilipecosta jorgefilipecosta added Needs Technical Feedback Needs testing from a developer perspective. [Feature] Fonts API labels Aug 15, 2023
@hellofromtonya hellofromtonya changed the title Fonts Library: How to add lib-font package (or equivalent). Font Library: How to add lib-font package (or equivalent). Aug 17, 2023
@hellofromtonya hellofromtonya added [Feature] Typography Font and typography-related issues and PRs and removed [Feature] Fonts API labels Aug 17, 2023
@mikachan
Copy link
Member

Do we have to bundle the package in Gutenberg? I'm wondering if we could call the lib-font functionality from a CDN like unpkg.com or jsDelivr, e.g. from https://www.unpkg.com/lib-font@2.4.0/lib-font.js / https://cdn.jsdelivr.net/npm/lib-font@2.4.0/lib-font.js.

@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 30, 2023
@vcanales vcanales self-assigned this Sep 5, 2023
@mikachan mikachan moved this to In Progress in WordPress 6.4 Editor Tasks Sep 6, 2023
@jeffikus
Copy link

As far as I'm aware, MIT license is compatible with the GPL, but I'm trying to find out more about this.

@youknowriad
Copy link
Contributor

youknowriad commented Sep 13, 2023

Judging by the response here Pomax/lib-font#135 (comment)

I wonder if it's possible to just do import lib-font/lib-font.browser.js (or something like that) and just rely on window.Font afterwards. (the path above is just an example though, you need to locate the right file in the node_modules).

@vcanales vcanales linked a pull request Sep 13, 2023 that will close this issue
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Sep 13, 2023
vcanales pushed a commit that referenced this issue Sep 13, 2023
This changed required applying a change in the webpack config suggested by
lib-font's developer, detailed [here](https://github.com/Pomax/lib-font/#how-do-i-use-this-with-webpack).

Closes #53653
@annezazu annezazu moved this from In Progress to Punted to 6.5 in WordPress 6.4 Editor Tasks Oct 5, 2023
@bph bph moved this to 🏗️ In Progress in WordPress 6.5 Editor Tasks Nov 23, 2023
@annezazu
Copy link
Contributor

annezazu commented Feb 8, 2024

What's happening here for 6.5? Asking as it's caused some confusion for the core editor triage folks and I want to make sure it's in the right spot for the 6.5 release.

@youknowriad
Copy link
Contributor

Looking at the code again, "lib-font" has been copied within the "lib" directory within the edit-site package. I think that works for now, obviously, the ideal scenario would be to not have to include these in our repo and avoid webpack custom config.

So I'm leaving this issue open but it's low priority now.

@youknowriad youknowriad added the [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later label Feb 8, 2024
@sirreal
Copy link
Member

sirreal commented Jun 18, 2024

I've created #62573 to treat the packages/edit-site/lib directory as vendored code while this issue remains.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Font Library [Feature] Typography Font and typography-related issues and PRs Needs Technical Feedback Needs testing from a developer perspective. [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.