From a8274f69a676e97e0cbe3e2e347fb0e596d05b34 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Thu, 8 Feb 2024 18:46:07 +0100 Subject: [PATCH 1/5] Remove `formatFontFamily` from `loadFontFaceInBrowser` to avoid problems loading fonts with several words in the font name. --- .../global-styles/font-library-modal/utils/index.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 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 d0a53a4acea4f8..2d2ce6ed906a38 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 @@ -9,7 +9,6 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { FONT_WEIGHTS, FONT_STYLES } from './constants'; import { unlock } from '../../../../lock-unlock'; import { fetchInstallFontFace } from '../resolvers'; -import { formatFontFamily } from './preview-styles'; /** * Browser dependencies @@ -98,14 +97,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) { return; } - const newFont = new window.FontFace( - formatFontFamily( fontFace.fontFamily ), - dataSource, - { - style: fontFace.fontStyle, - weight: fontFace.fontWeight, - } - ); + const newFont = new window.FontFace( fontFace.fontFamily, dataSource, { + style: fontFace.fontStyle, + weight: fontFace.fontWeight, + } ); const loadedFace = await newFont.load(); From e29db06a2e04d7148094d0addc6056d7934e03a8 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Fri, 9 Feb 2024 17:30:05 +0100 Subject: [PATCH 2/5] Only wrap multi-word font families with quotes when there are several fonts. Avoid using quotes when it's only one font, so Google Chrome can load it properly. --- .../font-library-modal/utils/index.js | 13 ++++--- .../utils/preview-styles.js | 34 +++++++++++-------- 2 files changed, 28 insertions(+), 19 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 2d2ce6ed906a38..d0a53a4acea4f8 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 @@ -9,6 +9,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { FONT_WEIGHTS, FONT_STYLES } from './constants'; import { unlock } from '../../../../lock-unlock'; import { fetchInstallFontFace } from '../resolvers'; +import { formatFontFamily } from './preview-styles'; /** * Browser dependencies @@ -97,10 +98,14 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) { return; } - const newFont = new window.FontFace( fontFace.fontFamily, dataSource, { - style: fontFace.fontStyle, - weight: fontFace.fontWeight, - } ); + const newFont = new window.FontFace( + formatFontFamily( fontFace.fontFamily ), + dataSource, + { + style: fontFace.fontStyle, + weight: fontFace.fontWeight, + } + ); const loadedFace = await newFont.load(); diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js index 389cebde9249af..28bd65285f439f 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js @@ -31,21 +31,25 @@ function extractFontWeights( fontFaces ) { } export function formatFontFamily( input ) { - return input - .split( ',' ) - .map( ( font ) => { - font = font.trim(); // Remove any leading or trailing white spaces - // If the font doesn't start with quotes and contains a space, then wrap in quotes. - // Check that string starts with a single or double quote and not a space - if ( - ! ( font.startsWith( '"' ) || font.startsWith( "'" ) ) && - font.indexOf( ' ' ) !== -1 - ) { - return `"${ font }"`; - } - return font; // Return font as is if no transformation is needed - } ) - .join( ', ' ); + return input.includes( ',' ) + ? input + .split( ',' ) + .map( ( font ) => { + font = font.trim(); // Remove any leading or trailing white spaces + // If the font doesn't start with quotes and contains a space, then wrap in quotes. + // Check that string starts with a single or double quote and not a space + if ( + ! ( + font.startsWith( '"' ) || font.startsWith( "'" ) + ) && + font.indexOf( ' ' ) !== -1 + ) { + return `"${ font }"`; + } + return font; // Return font as is if no transformation is needed + } ) + .join( ', ' ) + : input.replace( /"/g, '' ); } export function getFamilyPreviewStyle( family ) { From ce15e51c320d882d629c3d23043db79c767cb17b Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Fri, 9 Feb 2024 17:32:05 +0100 Subject: [PATCH 3/5] Load font face in the browser so that it can also affect the sidebar. --- .../components/global-styles/font-library-modal/context.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 2b9efd2ddccd69..d112242b41b8b7 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 @@ -397,11 +397,11 @@ function FontLibraryProvider( { children } ) { fontsToAdd.forEach( ( font ) => { if ( font.fontFace ) { font.fontFace.forEach( ( face ) => { - // Load font faces just in the iframe because they already are in the document. + // Load font face in the browser. loadFontFaceInBrowser( face, getDisplaySrcFromFontFace( face.src ), - 'iframe' + 'all' ); } ); } From cb5b9c5508e39894e0d7ff9ca2b2c9975809e38b Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Fri, 9 Feb 2024 17:32:40 +0100 Subject: [PATCH 4/5] Fix typo in variables. --- .../font-library-modal/context.js | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 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 d112242b41b8b7..ec7dc492802ada 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 @@ -263,28 +263,29 @@ function FontLibraryProvider( { children } ) { } // Install the fonts (upload the font files to the server and create the post in the database). - let sucessfullyInstalledFontFaces = []; - let unsucessfullyInstalledFontFaces = []; + let successfullyInstalledFontFaces = []; + let unsuccessfullyInstalledFontFaces = []; if ( fontFamilyToInstall?.fontFace?.length > 0 ) { const response = await batchInstallFontFaces( installedFontFamily.id, makeFontFacesFormData( fontFamilyToInstall ) ); - sucessfullyInstalledFontFaces = response?.successes; - unsucessfullyInstalledFontFaces = response?.errors; + successfullyInstalledFontFaces = response?.successes; + unsuccessfullyInstalledFontFaces = response?.errors; } - const detailedErrorMessage = unsucessfullyInstalledFontFaces.reduce( - ( errorMessageCollection, error ) => { - return `${ errorMessageCollection } ${ error.message }`; - }, - '' - ); + const detailedErrorMessage = + unsuccessfullyInstalledFontFaces.reduce( + ( errorMessageCollection, error ) => { + return `${ errorMessageCollection } ${ error.message }`; + }, + '' + ); // If there were no successes and nothing already installed then we don't need to activate anything and can bounce now. if ( fontFamilyToInstall?.fontFace?.length > 0 && - sucessfullyInstalledFontFaces.length === 0 && + successfullyInstalledFontFaces.length === 0 && alreadyInstalledFontFaces.length === 0 ) { throw new Error( @@ -296,14 +297,14 @@ function FontLibraryProvider( { children } ) { ); } - // Use the sucessfully installed font faces + // Use the successfully installed font faces // As well as any font faces that were already installed (those will be activated) if ( - sucessfullyInstalledFontFaces?.length > 0 || + successfullyInstalledFontFaces?.length > 0 || alreadyInstalledFontFaces?.length > 0 ) { fontFamilyToInstall.fontFace = [ - ...sucessfullyInstalledFontFaces, + ...successfullyInstalledFontFaces, ...alreadyInstalledFontFaces, ]; } @@ -318,7 +319,7 @@ function FontLibraryProvider( { children } ) { refreshLibrary(); - if ( unsucessfullyInstalledFontFaces.length > 0 ) { + if ( unsuccessfullyInstalledFontFaces.length > 0 ) { throw new Error( sprintf( /* translators: %s: Specific error message returned from server. */ From f5d03252fe2d61577edb7744c2a25d0ff307a3b5 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Fri, 9 Feb 2024 17:45:09 +0100 Subject: [PATCH 5/5] Update test. --- .../font-library-modal/utils/test/preview-styles.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js index 0273709502a43d..9cfc5bbbdcd8d2 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js @@ -143,8 +143,8 @@ describe( 'formatFontFamily', () => { ); } ); - it( 'should wrap single font name with spaces in quotes', () => { - expect( formatFontFamily( 'Baloo 2' ) ).toBe( '"Baloo 2"' ); + it( 'should not add quotes to single font name with spaces', () => { + expect( formatFontFamily( 'Baloo 2' ) ).toBe( 'Baloo 2' ); } ); it( 'should wrap multiple font names with spaces in quotes', () => {