Load variation font faces with theme relative urls using backend provided full urls (_links)

packages/block-editor/src/components/block-canvas/index.js

@@ -15,6 +15,7 @@ import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
+import EditorFontsResolver from '../editor-fonts-resolver';
 
 // EditorStyles is a memoized component, so avoid passing a new
 // object reference on each render.
@@ -43,6 +44,7 @@ export function ExperimentalBlockCanvas( {
 				__unstableContentRef={ localRef }
 				style={ { height, display: 'flex' } }
 			>
+				<EditorFontsResolver />
 				<EditorStyles
 					styles={ styles }
 					scope=":where(.editor-styles-wrapper)"
@@ -77,6 +79,7 @@ export function ExperimentalBlockCanvas( {
 				} }
 				name="editor-canvas"
 			>
+				<EditorFontsResolver />
 				<EditorStyles styles={ styles } />
 				{ children }
 			</Iframe>

packages/block-editor/src/components/editor-fonts-resolver/index.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalSetting } from '../global-styles/hooks';
+import { getDisplaySrcFromFontFace, loadFontFaceInBrowser } from './utils';
+
+function EditorFontsResolver() {
+	const [ loadedFontUrls ] = useState( new Set() );
+
+	const { currentTheme } = useSelect( ( select ) => {
+		return {
+			currentTheme:
+				// Using 'core' as string to avoid circular dependency importing from @wordpress/core-data
+				select( 'core' ).getCurrentTheme(), // eslint-disable-line @wordpress/data-no-store-string-literals
+		};
+	}, [] );
+
+	//Get the fonts from merged theme.json settings.fontFamilies
+	const [ fontFamilies = [] ] = useGlobalSetting( 'typography.fontFamilies' );
+
+	const fontFaces = useMemo( () => {
+		return Object.values( fontFamilies )
+			.flat()
+			.map( ( family ) => family.fontFace )
+			.filter( Boolean )
+			.flat();
+	}, [ fontFamilies ] );
+
+	const loadFontFaceAsset = async ( fontFace ) => {
+		// If the font doesn't have a src, don't load it.
+		if ( ! fontFace.src ) {
+			return;
+		}
+		// Get the src of the font.
+		const src = getDisplaySrcFromFontFace(
+			fontFace.src,
+			currentTheme?.stylesheet_uri
+		);
+		// If the font is already loaded, don't load it again.
+		if ( ! src || loadedFontUrls.has( src ) ) {
+			return;
+		}
+		// Load the font in the browser.
+		loadFontFaceInBrowser( fontFace, src );
+		// Add the font to the loaded fonts list.
+		loadedFontUrls.add( src );
+	};
+
+	useEffect( () => {
+		fontFaces.forEach( loadFontFaceAsset );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ fontFaces ] );
+
+	return null;
+}
+
+export default EditorFontsResolver;

packages/block-editor/src/components/editor-fonts-resolver/utils.js

@@ -0,0 +1,111 @@
+/*
+ * Format the font face name to use in the font-family property of a font face.
+ *
+ * The input can be a string with the font face name or a string with multiple font face names separated by commas.
+ * It removes the leading and trailing quotes from the font face name.
+ *
+ * @param {string} input - The font face name.
+ * @return {string} The formatted font face name.
+ *
+ * Example:
+ * formatFontFaceName("Open Sans") => "Open Sans"
+ * formatFontFaceName("'Open Sans', sans-serif") => "Open Sans"
+ * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
+ */
+function formatFontFaceName( input ) {
+	if ( ! input ) {
+		return '';
+	}
+
+	let output = input.trim();
+	if ( output.includes( ',' ) ) {
+		output = output
+			.split( ',' )
+			// finds the first item that is not an empty string.
+			.find( ( item ) => item.trim() !== '' )
+			.trim();
+	}
+	// removes leading and trailing quotes.
+	output = output.replace( /^["']|["']$/g, '' );
+
+	// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.
+	if ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {
+		output = `"${ output }"`;
+	}
+	return output;
+}
+
+/*
+ * Loads the font face from a URL and adds it to the browser.
+ * It also adds it to the iframe document.
+ */
+export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
+	let dataSource;
+
+	if ( typeof source === 'string' ) {
+		dataSource = `url(${ source })`;
+		// eslint-disable-next-line no-undef
+	} else {
+		return;
+	}
+
+	const newFont = new window.FontFace(
+		formatFontFaceName( fontFace.fontFamily ),
+		dataSource,
+		{
+			style: fontFace.fontStyle,
+			weight: fontFace.fontWeight,
+		}
+	);
+
+	const loadedFace = await newFont.load();
+
+	if ( addTo === 'document' || addTo === 'all' ) {
+		document.fonts.add( loadedFace );
+	}
+
+	if ( addTo === 'iframe' || addTo === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		iframeDocument.fonts.add( loadedFace );
+	}
+}
+
+function isUrlEncoded( url ) {
+	if ( typeof url !== 'string' ) {
+		return false;
+	}
+	return url !== decodeURIComponent( url );
+}
+
+/*
+ * Retrieves the display source from a font face src.
+ *
+ * @param {string|string[]} fontSrc - The font face src.
+ * @param {string} baseUrl - The base URL to resolve the src.
+ * @return {string|undefined} The display source or undefined if the input is invalid.
+ */
+export function getDisplaySrcFromFontFace( fontSrc, baseUrl ) {
+	if ( ! fontSrc ) {
+		return;
+	}
+
+	let src;
+	if ( Array.isArray( fontSrc ) ) {
+		src = fontSrc[ 0 ];
+	} else {
+		src = fontSrc;
+	}
+
+	if ( ! isUrlEncoded( src ) ) {
+		src = encodeURI( src );
+	}
+
+	// If baseUrl is provided, use it to resolve the src.
+	if ( src.startsWith( 'file:.' ) ) {
+		src = baseUrl + '/' + src.replace( 'file:./', '' );
+	}
+
+	return src;
+}