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

Load font assets dynamically in the editor's iframe when the global settings are modified #51764

Closed
matiasbenedetto opened this issue Jun 21, 2023 · 6 comments · Fixed by #54334
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Typography Font and typography-related issues and PRs Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Comments

@matiasbenedetto
Copy link
Contributor

Description

If you update the theme JSON data modified client side using useGlobalSettings hook in the editor's Iframe without reloading the page, the font presets are loaded on the editor's iframe correctly, but the assets linked in the font presets are not. If I reload the page, the assets added client side are loaded as expected. /

I think the font assets should be automatically loaded if you update the settings.

Step-by-step reproduction instructions

  1. add font families to typography.fontFamilies global settings using the useGlobalSettings hook.
  2. Observe that the new font families assets are not loaded in the editor iframe.
  3. Reload the page and observe that now the font assets are loaded in the iframe.

Screenshots, screen recording, code snippet

No response

Environment info

  • Gutenberg trunk
  • WordPress 6.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@matiasbenedetto matiasbenedetto added [Feature] Typography Font and typography-related issues and PRs Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Jun 21, 2023
@ellatrix
Copy link
Member

ellatrix commented Jul 4, 2023

How is it done currently for other globals styles? Cc @oandregal

@ellatrix
Copy link
Member

What exactly are these assets?

@oandregal
Copy link
Member

@matiasbenedetto What I hear is that the font face definition provided via global styles is not updated upon client changes. This is, the wp-fonts-local stylesheet is not updated and only contains the old definitions:

image

Is this what you mean?

I don't have much context about how font assets are loaded in the editors, though I searched around and this is what I learned: by searching for wp-fonts-local ID I only found this PHP code. This code is responsible for creating the stylesheet with the font faces declared via theme.json. However, I could not find anything similar for the client. That's what you need: the same code, in the client, so that the font face declarations work like any other style dependent on theme.json data: they are updated upon changes in the theme.json data store in the client settings. Is this helpful?

@ellatrix
Copy link
Member

See also #52767, and #52888 for another proposal.

vcanales pushed a commit that referenced this issue Sep 10, 2023
This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them.

Re: #51764
@vcanales
Copy link
Member

A work-around sort of proposal, that gets the font files loaded in the iframe at the same time that they're loaded into the parent container: #54334

@mikachan mikachan linked a pull request Sep 11, 2023 that will close this issue
matiasbenedetto added a commit that referenced this issue Sep 11, 2023
* Font library: load font assets on editor canvas

This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them.

Re: #51764

* load font families on iframe on activation

* removing addFontFaceToBrowser function and consolidate it with loadFontFaceInBrowser that was doing almost the same

---------

Co-authored-by: Matias Benedetto <[email protected]>
@mikachan
Copy link
Member

Closing this as fixed by #54334.

matiasbenedetto added a commit that referenced this issue Sep 14, 2023
* adding files from original branch try/font-library

* importing remaining files

* renaming font library to fonts library

* renaming FontLibraryModal to FontsLibraryModal

* update frontend based on backend changes

* TEMPORAL FIX: Adding Google fonts endpoint a font families list

* update uninstall functionality to latest backend implementation

* fix loadedUrls state

* fixing library not refreshing after uninstall

* move uninstall notification functionality to context

* Add notification on snackbar when installing fonts

* lint js

* renaming FontS Library to Font Library

* Removing google_fonts api endpoint

* Removing Google fonts specific code

* refresh library after local fonts upload

* remove unwanted console.log

* css fix

* removing file key from fontface data sent to the server

* open local fonts tab when click the + button

* remove font slug prefix

* removing empty line

Co-authored-by: Tonya Mork <[email protected]>

* check by source (theme and custom)if fonts are activated

* delete demo related component and function

* remove font family previews

* modal width

* implementing mockups look for library font variants

* reduce margin

* display unintall button disabled when the font can not be uninstalled

* removing preview controls link

* removing unused imports

* lint css

* lint css

* fix import

* deactivate font families before uninstalling them

* flip buttons order

* Moving uninstall button to modal footer

* be able to indicate nested paths on __experimentalSaveSpecifiedEntityEdits

* save only fontFamilies when persisting global styles from font library modal

* Add edits data to the useEntityRecord

* disable save button when there are no changes to be saved

* add notification when font families are updated

* upload local fonts just after selecting them

* Removing upload local fonts tab from modal

* drop zone background color

* remove unused import

* activate fonts just after installed

* fix typo

* hide confirm dialog after deleting font

* remove + button

* fix merging font families functions

* add tests for mergeFontFamilies and mergeFontFaces functions

* add tests  for getFontFaceVariantName

* fix logic bug and add tests for isUrlEnconded function

* fix logic bug in setUIValuesNeeded function

* add tests for  setUIValuesNeeded function

* move utils and utils tests

* remove import not needed

* remove default demo config

* fix typo

Co-authored-by: Brian Alexander <[email protected]>

* update file extensions allowed in file dialog on mac

In macOS Safari and Chrome, using font/* for the system upload dialog allows .ttf and .otf, but doesn't allow .woff/.woff2.

Co-authored-by: Brian Alexander <[email protected]>

* remove extra space

Co-authored-by: Brian Alexander <[email protected]>

* Apply coding standards

* Make font cards buttons

* Fix linter errors

* Fix max depth error

* Revert font lib formatting

* Fix linter errors

* Undo e2e test linter fixes

Not related to this PR

* Remove more e2e test changes

* fixing error persisting activation changes

* improving font previews

* adding unit tests for getPreviewStyle util

* lint fix

* fix accepted file extensions not working properly on firefox

* sort font faces by weight

* move the code of toggleActivatedFont to a another file to reduce their size and make it easier to read

* adding tests for toggleFont

* lint

* avoid resetting theme font families when activating or deactivating font famiies when install or uninstall

* fix issue where fontFace length is zero

* Add deps comment to toggleFont file

* Fix theme and custom undefined errors

* Add initial e2e tests

* Refactor e2e test order

* avoid re-activating all the font faces of a installed font when a new font face is installed

* adding tests for utils functions

* renaming parameters

* adding jsdoc for function

* remove code no longer needed

* avoid potential errors with non existing fontFace array

* Revert "avoid potential errors with non existing fontFace array"

This reverts commit 43dae16.

* fix error uploading several font faces from different font families

* Fix font library modal prop typo

* activate the right font faces (the installed ones instead of the local definitions).

* Font library: load font assets on editor canvas (#54334)

* Font library: load font assets on editor canvas

This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them.

Re: #51764

* load font families on iframe on activation

* removing addFontFaceToBrowser function and consolidate it with loadFontFaceInBrowser that was doing almost the same

---------

Co-authored-by: Matias Benedetto <[email protected]>

* removing success snackbar notifications

* update  uninstall font family button look

* delete any change to save-button component

* use a simple file id for uploaded files

* Update delete button to be tertiary.

* fix test

* use FONT_LIBRARY_DISABLE constant to disable Font Library and Font Face loading and load Font API instead

* move confirm uninstall dialog to a new component

* adding progress bar while installing fonts

* add early return

* format php

* removing not needed changes to save hub button

---------

Co-authored-by: Tonya Mork <[email protected]>
Co-authored-by: Brian Alexander <[email protected]>
Co-authored-by: Sarah Norris <[email protected]>
Co-authored-by: madhusudhand <[email protected]>
Co-authored-by: Vicente Canales <[email protected]>
Co-authored-by: Vicente Canales <[email protected]>
Co-authored-by: jasmussen <[email protected]>
peterwilsoncc pushed a commit to peterwilsoncc/gutenberg-build that referenced this issue Sep 9, 2024
* adding files from original branch try/font-library

* importing remaining files

* renaming font library to fonts library

* renaming FontLibraryModal to FontsLibraryModal

* update frontend based on backend changes

* TEMPORAL FIX: Adding Google fonts endpoint a font families list

* update uninstall functionality to latest backend implementation

* fix loadedUrls state

* fixing library not refreshing after uninstall

* move uninstall notification functionality to context

* Add notification on snackbar when installing fonts

* lint js

* renaming FontS Library to Font Library

* Removing google_fonts api endpoint

* Removing Google fonts specific code

* refresh library after local fonts upload

* remove unwanted console.log

* css fix

* removing file key from fontface data sent to the server

* open local fonts tab when click the + button

* remove font slug prefix

* removing empty line

Co-authored-by: Tonya Mork <[email protected]>

* check by source (theme and custom)if fonts are activated

* delete demo related component and function

* remove font family previews

* modal width

* implementing mockups look for library font variants

* reduce margin

* display unintall button disabled when the font can not be uninstalled

* removing preview controls link

* removing unused imports

* lint css

* lint css

* fix import

* deactivate font families before uninstalling them

* flip buttons order

* Moving uninstall button to modal footer

* be able to indicate nested paths on __experimentalSaveSpecifiedEntityEdits

* save only fontFamilies when persisting global styles from font library modal

* Add edits data to the useEntityRecord

* disable save button when there are no changes to be saved

* add notification when font families are updated

* upload local fonts just after selecting them

* Removing upload local fonts tab from modal

* drop zone background color

* remove unused import

* activate fonts just after installed

* fix typo

* hide confirm dialog after deleting font

* remove + button

* fix merging font families functions

* add tests for mergeFontFamilies and mergeFontFaces functions

* add tests  for getFontFaceVariantName

* fix logic bug and add tests for isUrlEnconded function

* fix logic bug in setUIValuesNeeded function

* add tests for  setUIValuesNeeded function

* move utils and utils tests

* remove import not needed

* remove default demo config

* fix typo

Co-authored-by: Brian Alexander <[email protected]>

* update file extensions allowed in file dialog on mac

In macOS Safari and Chrome, using font/* for the system upload dialog allows .ttf and .otf, but doesn't allow .woff/.woff2.

Co-authored-by: Brian Alexander <[email protected]>

* remove extra space

Co-authored-by: Brian Alexander <[email protected]>

* Apply coding standards

* Make font cards buttons

* Fix linter errors

* Fix max depth error

* Revert font lib formatting

* Fix linter errors

* Undo e2e test linter fixes

Not related to this PR

* Remove more e2e test changes

* fixing error persisting activation changes

* improving font previews

* adding unit tests for getPreviewStyle util

* lint fix

* fix accepted file extensions not working properly on firefox

* sort font faces by weight

* move the code of toggleActivatedFont to a another file to reduce their size and make it easier to read

* adding tests for toggleFont

* lint

* avoid resetting theme font families when activating or deactivating font famiies when install or uninstall

* fix issue where fontFace length is zero

* Add deps comment to toggleFont file

* Fix theme and custom undefined errors

* Add initial e2e tests

* Refactor e2e test order

* avoid re-activating all the font faces of a installed font when a new font face is installed

* adding tests for utils functions

* renaming parameters

* adding jsdoc for function

* remove code no longer needed

* avoid potential errors with non existing fontFace array

* Revert "avoid potential errors with non existing fontFace array"

This reverts commit 43dae169d80290f00486dbbe729e70042c731e8a.

* fix error uploading several font faces from different font families

* Fix font library modal prop typo

* activate the right font faces (the installed ones instead of the local definitions).

* Font library: load font assets on editor canvas (#54334)

* Font library: load font assets on editor canvas

This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them.

Re: WordPress/gutenberg#51764

* load font families on iframe on activation

* removing addFontFaceToBrowser function and consolidate it with loadFontFaceInBrowser that was doing almost the same

---------

Co-authored-by: Matias Benedetto <[email protected]>

* removing success snackbar notifications

* update  uninstall font family button look

* delete any change to save-button component

* use a simple file id for uploaded files

* Update delete button to be tertiary.

* fix test

* use FONT_LIBRARY_DISABLE constant to disable Font Library and Font Face loading and load Font API instead

* move confirm uninstall dialog to a new component

* adding progress bar while installing fonts

* add early return

* format php

* removing not needed changes to save hub button

---------

Co-authored-by: Tonya Mork <[email protected]>
Co-authored-by: Brian Alexander <[email protected]>
Co-authored-by: Sarah Norris <[email protected]>
Co-authored-by: madhusudhand <[email protected]>
Co-authored-by: Vicente Canales <[email protected]>
Co-authored-by: Vicente Canales <[email protected]>
Co-authored-by: jasmussen <[email protected]>

Source: WordPress/gutenberg@933abd6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Typography Font and typography-related issues and PRs Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants