From 2b219c1198f3afa25d056fc6a18e28e8eca13155 Mon Sep 17 00:00:00 2001 From: arthur Date: Thu, 15 Feb 2024 18:01:01 +0800 Subject: [PATCH 1/6] Font Library: Load/Unload the font face in browser when toggling the variants --- .../font-library-modal/context.js | 18 +++++++++++ .../font-library-modal/utils/index.js | 32 +++++++++++++++++++ 2 files changed, 50 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js index 9609da1780d3b6..02468abb9f4fe0 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js @@ -27,6 +27,7 @@ import { setUIValuesNeeded, mergeFontFamilies, loadFontFaceInBrowser, + unloadFontFaceInBrowser, getDisplaySrcFromFontFace, makeFontFacesFormData, makeFontFamilyFormData, @@ -407,6 +408,23 @@ function FontLibraryProvider( { children } ) { ...fontFamilies, [ font.source ]: newFonts, } ); + + const activatedFont = newFonts.find( ( f ) => f.slug === font.slug ); + const isFaceActivated = activatedFont?.fontFace?.find( + ( f ) => + f.fontWeight === face.fontWeight && + f.fontStyle === face.fontStyle + ); + if ( isFaceActivated ) { + // Load font faces just in the iframe because they already are in the document. + loadFontFaceInBrowser( + face, + getDisplaySrcFromFontFace( face.src ), + 'all' + ); + } else { + unloadFontFaceInBrowser( face, 'all' ); + } }; const loadFontFaceAsset = async ( fontFace ) => { diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index 1458b47cd010a3..8f9020b4e71a92 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -121,6 +121,38 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) { } } +/* + * Unloads the font face and remove it from the browser. + * It also removes it from the iframe document. + * + * Note that Font faces that were added to the set using the CSS @font-face rule + * remain connected to the corresponding CSS, and cannot be deleted. + */ +export function unloadFontFaceInBrowser( fontFace, addTo = 'all' ) { + const unloadFontFace = ( fonts ) => { + fonts.forEach( ( f ) => { + if ( + f.family === fontFace.fontFamily && + f.weight === fontFace.fontWeight && + f.style === fontFace.fontStyle + ) { + fonts.delete( f ); + } + } ); + }; + + if ( addTo === 'document' || addTo === 'all' ) { + unloadFontFace( document.fonts ); + } + + if ( addTo === 'iframe' || addTo === 'all' ) { + const iframeDocument = document.querySelector( + 'iframe[name="editor-canvas"]' + ).contentDocument; + unloadFontFace( iframeDocument.fonts ); + } +} + /** * Retrieves the display source from a font face src. * From b77d34d71ee710f37b2ede663e89b1f826fb7d87 Mon Sep 17 00:00:00 2001 From: arthur Date: Fri, 16 Feb 2024 15:16:55 +0800 Subject: [PATCH 2/6] Font Library: Unload the deleted font faces --- .../components/global-styles/font-library-modal/context.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js index 02468abb9f4fe0..c53f03e9b916fe 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js @@ -369,6 +369,12 @@ function FontLibraryProvider( { children } ) { ...fontFamilies, [ font.source ]: newCustomFonts, } ); + + if ( font.fontFace ) { + font.fontFace.forEach( ( face ) => { + unloadFontFaceInBrowser( face, 'all' ); + } ); + } }; const activateCustomFontFamilies = ( fontsToAdd ) => { From 581d9eedeb1dfe9ab9cf3793898bff6f319ee9a5 Mon Sep 17 00:00:00 2001 From: arthur Date: Tue, 27 Feb 2024 14:39:12 +0800 Subject: [PATCH 3/6] Address feedback --- .../global-styles/font-library-modal/utils/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index 8f9020b4e71a92..a54a9f6f35ee7c 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -127,8 +127,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) { * * Note that Font faces that were added to the set using the CSS @font-face rule * remain connected to the corresponding CSS, and cannot be deleted. + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete. */ -export function unloadFontFaceInBrowser( fontFace, addTo = 'all' ) { +export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) { const unloadFontFace = ( fonts ) => { fonts.forEach( ( f ) => { if ( @@ -141,11 +143,11 @@ export function unloadFontFaceInBrowser( fontFace, addTo = 'all' ) { } ); }; - if ( addTo === 'document' || addTo === 'all' ) { + if ( removeFrom === 'document' || removeFrom === 'all' ) { unloadFontFace( document.fonts ); } - if ( addTo === 'iframe' || addTo === 'all' ) { + if ( removeFrom === 'iframe' || removeFrom === 'all' ) { const iframeDocument = document.querySelector( 'iframe[name="editor-canvas"]' ).contentDocument; From a8b89381cdc62fb3725be74590a509f5e87598d3 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Mon, 4 Mar 2024 14:11:55 -0300 Subject: [PATCH 4/6] replace repeated implementation by the use of a existing fuction --- .../global-styles/font-library-modal/context.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js index c53f03e9b916fe..2e7f6f733e88f6 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js @@ -415,12 +415,13 @@ function FontLibraryProvider( { children } ) { [ font.source ]: newFonts, } ); - const activatedFont = newFonts.find( ( f ) => f.slug === font.slug ); - const isFaceActivated = activatedFont?.fontFace?.find( - ( f ) => - f.fontWeight === face.fontWeight && - f.fontStyle === face.fontStyle + const isFaceActivated = isFontActivated( + font.slug, + face.fontStyle, + face.fontWeight, + font.source ); + if ( isFaceActivated ) { // Load font faces just in the iframe because they already are in the document. loadFontFaceInBrowser( From 3e4f0643f8ab1337dd30ad7c3fdb1bca94b5d1fd Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Mon, 4 Mar 2024 14:15:14 -0300 Subject: [PATCH 5/6] remove inaccurate comment --- .../src/components/global-styles/font-library-modal/context.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js index 2e7f6f733e88f6..7078ae8d5e600a 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js @@ -423,7 +423,6 @@ function FontLibraryProvider( { children } ) { ); if ( isFaceActivated ) { - // Load font faces just in the iframe because they already are in the document. loadFontFaceInBrowser( face, getDisplaySrcFromFontFace( face.src ), From ec32719bb68f052fce96bb2b0bedb313fdc62a3f Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Mon, 4 Mar 2024 15:47:13 -0300 Subject: [PATCH 6/6] added a formatFontFace call to be able to match fonts in firefox too. --- .../components/global-styles/font-library-modal/utils/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index a54a9f6f35ee7c..cfffc3bcec3177 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -134,7 +134,7 @@ export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) { const unloadFontFace = ( fonts ) => { fonts.forEach( ( f ) => { if ( - f.family === fontFace.fontFamily && + f.family === formatFontFaceName( fontFace.fontFamily ) && f.weight === fontFace.fontWeight && f.style === fontFace.fontStyle ) {