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: adding docs #54477

Draft
wants to merge 11 commits into
base: trunk
Choose a base branch
from
Draft

Font Library: adding docs #54477

wants to merge 11 commits into from

Conversation

matiasbenedetto
Copy link
Contributor

@matiasbenedetto matiasbenedetto commented Sep 14, 2023

⚠️ this is a work in progress
Some of the things documented here can change soon.

What?

Font Library: adding docs

Why?

To inform the key concepts and functionality around Font Library.

How?

By documenting the existing functionality.

Testing Instructions

  • Read the docs.
  • Check if they make sense.
  • Propose changes and additions.

@github-actions
Copy link

github-actions bot commented Sep 14, 2023

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ lib/compat/wordpress-6.5/fonts/README.md

@matiasbenedetto matiasbenedetto added [Type] Enhancement A suggestion for improvement. [Feature] Typography Font and typography-related issues and PRs labels Sep 14, 2023
@matiasbenedetto matiasbenedetto added the [Type] Developer Documentation Documentation for developers label Sep 15, 2023
@github-actions
Copy link

github-actions bot commented Sep 15, 2023

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
  • Labels found: [Type] Enhancement, [Type] Developer Documentation, [Feature] Typography, [Feature] Font Library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

Copy link
Contributor

@annezazu annezazu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In case it helps, left some quick copy feedback :)


#### Install a font from external sources and serve it from your site
Let's say you want to install a font family that uses assets located outside of your site and download it while installing to serve them always from your WordPress `/wp-content/fonts` folder. This can be useful if you want to avoid depending on external sites for technical or legal reasons. In that case, you need to set the `downloadFromUrl` property on each font face.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to change this once the ability to change this directory is implemented, in order to specify that the directory might not always be /wp-content/fonts.

#### Install a font providing the font asset
Let's say you want to install a font family using the font files you are providing in an HTTP request. These font file assets will be stored in your WordPress `/wp-content/fonts` folder and they will always be served from your site. As the previous way, this can be useful if you want to avoid depending on external sites for technical or legal reasons. You need to add the file to your HTTP request and add a reference for it in the font face definition.


Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above; this might not always be the directory where fonts are served from in the future.

@mikachan
Copy link
Member

Noting that we should find a good place in the docs to put the information from #57980.

@colorful-tones
Copy link
Member

We'll want to add a section on how to deactivate the Font Library with filter, see #57818

Here is the code copied from merged ticket:

function disable_font_library_ui( $editor_settings ) { 
    $editor_settings['fontLibraryEnabled'] = false;
    return $editor_settings; 
}

add_filter( "block_editor_settings_all", "disable_font_library_ui" );

Copy link

github-actions bot commented Feb 5, 2024

Flaky tests detected in b3561b0.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7788944655
📝 Reported issues:

Copy link
Contributor

@ironprogrammer ironprogrammer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@matiasbenedetto I was testing custom collections today, so had a few updates to share. I hope these are helpful as the docs are coming together.

```

#### Unregister a font collection
To unregister a font collection you need to add an action calling `wp_unregister_font_collection` with the font collection slug as the only parameter. The unregistered font collections won't appear as a font library modal tab and it won't be listed on the `/font-collections/` REST API endpoint.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To unregister a font collection you need to add an action calling `wp_unregister_font_collection` with the font collection slug as the only parameter. The unregistered font collections won't appear as a font library modal tab and it won't be listed on the `/font-collections/` REST API endpoint.
To unregister a font collection, add an action calling `wp_unregister_font_collection` with the font collection slug as the only parameter. Unregistered font collections won't appear in the Font Library modal tab list, and won't be returned from the `/font-collections/` REST API endpoint.

Massaging this a little.

#### Unregister a font collection
To unregister a font collection you need to add an action calling `wp_unregister_font_collection` with the font collection slug as the only parameter. The unregistered font collections won't appear as a font library modal tab and it won't be listed on the `/font-collections/` REST API endpoint.

Example:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Example:
Example:

Added a line break above code block. To my eyes this is easier to scan in .md.

wp_register_font_collection ( 'my-font-foundry', 'https://example.com/fonts/my-collection.json' );
}

add_action( 'init',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
add_action( 'init',
add_action( 'init', 'register_my_collection' );

Fix.


```json
{
"$schema": "https://schemas.wp.org/trunk/font-collection.json",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"$schema": "https://schemas.wp.org/trunk/font-collection.json",
"$schema": "https://schemas.wp.org/trunk/font-collection.json",
"slug": "my-font-foundry-collection",

Adds slug.

Comment on lines +136 to +137
{ "id": "sans-serif", "name": "Sans Serif" },
{ "id": "serif", "name": "Serif" },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{ "id": "sans-serif", "name": "Sans Serif" },
{ "id": "serif", "name": "Serif" },
{
"name": "Sans Serif",
"slug": "sans-serif",
},
{
"name": "Serif",
"slug": "serif"
},

Reformat and switch id to slug.


#### Install a font with external assets
In a situation where you want to install a font family that needs to add font faces using external font file assets, you can define font families like this:
```json
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```json
```json

Adds line break before code block.


#### Get a font collection
Get a particular font collection and its data.
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```
```console

Adds line break before code block, updates formatting.

#### Get font collections
Gets the list of fonts collections available.

```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```
```console

Updates formatting.


If the font family being uninstalled is using local font file assets, those files will be removed from the `/wp-content/fonts` folder.

```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```
```console

Updates formatting.


Save a font family may or may not include storing the font files assets localy to disk in `/wp-content/fonts` folder. That depends on how the font family sent to this endpoint is defined.

```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```
```console

Updates formatting.

Example using a local JSON file:
```php
function register_my_collection(){
wp_register_font_collection ( 'my-font-foundry', path_join( __DIR__, 'my-collection.json' ) );
Copy link
Contributor

@ironprogrammer ironprogrammer Feb 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
wp_register_font_collection ( 'my-font-foundry', path_join( __DIR__, 'my-collection.json' ) );
wp_register_font_collection (
'my-font-foundry',
array(
'name' => 'My Font Foundry',
'font_families' => path_join( __DIR__, 'my-collection.json' )
)
);

This method changed in WordPress/wordpress-develop@8ced706.

Example using a JSON from an URL:
```php
function register_my_collection(){
wp_register_font_collection ( 'my-font-foundry', 'https://example.com/fonts/my-collection.json' );
Copy link
Contributor

@ironprogrammer ironprogrammer Feb 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
wp_register_font_collection ( 'my-font-foundry', 'https://example.com/fonts/my-collection.json' );
wp_register_font_collection (
'my-font-foundry',
array(
'name' => 'My Font Foundry',
'font_families' => 'https://example.com/fonts/my-collection.json'
)
);

Same change as noted above in https://github.com/WordPress/gutenberg/pull/54477/files#r1500148930.

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 [Type] Developer Documentation Documentation for developers [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants