Font library: load font assets on editor canvas #54334
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them. Re: #51764
vcanales
added
[Type] Enhancement
|
Size Change: +88 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
matiasbenedetto
requested changes
Sep 11, 2023
There was a problem hiding this comment.
Hi, thanks for working on this! It is a nice and simple workaround to the original problem. I tested it, and I found the following:
- ✅ It works fine for fonts just uploaded and activated.
2023-09-11.09-25-42.mp4
- ❎ It doesn't work if a font was installed but not activated. When you activate it, the font is not loaded into the iframe as expected.
2023-09-11.09-26-57.mp4
Apart from that, there is a problem loading fonts from custom global styles (you can see the problem when the font asset does not load properly after refreshing the page, at the end of the first video), but that is not inside this PR's scope.(fixed)
Fixing number 2 will make it ready to merge.
Addressed by f919f40. There's some repetition there, but the way in which the assets are loaded is different in both instances (arrayBuffer vs source file URI); we might want to look into turning this into a more generic function in future iterations, but I think this is good for now. Screen.Recording.2023-09-11.at.11.58.29.mov |
…enberg into update-font-face-on-iframe
…ntFaceInBrowser that was doing almost the same
matiasbenedetto
approved these changes
Sep 11, 2023
There was a problem hiding this comment.
Cool! It's working as expected now.
I added a commit to consolidate 2 very similar functions into only one: 7c3eef1
LGTM. 🚀
matiasbenedetto
merged commit 6bb6a98
into
try/fonts-library-frontend-stage1
43 of 45 checks passed
matiasbenedetto
added a commit
that referenced
this pull request
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 <tonya.mork@automattic.com> * 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 <824344+ironprogrammer@users.noreply.github.com> * 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 <824344+ironprogrammer@users.noreply.github.com> * remove extra space Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com> * 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 <matias.benedetto@gmail.com> * 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 <tonya.mork@automattic.com> Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com> Co-authored-by: Sarah Norris <sarah@sekai.co.uk> Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com> Co-authored-by: Vicente Canales <vicente.canales@automattic.com> Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com> Co-authored-by: jasmussen <joen@automattic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them.
Why?
The parent document assets were not being loaded in the editor canvas iframe, so they have to be loaded manually.
Closes #51764
Testing Instructions
Screenshots or screencast
iframe.fonts.mov