use _links in the font resolver

WordPress · Sep 27, 2024 · 1461989 · 1461989
1 parent ee98b6e
commit 1461989
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 50 deletions.
diff --git a/packages/block-editor/src/components/use-editor-fonts-resolver/index.js b/packages/block-editor/src/components/use-editor-fonts-resolver/index.js
@@ -7,23 +7,31 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { getDisplaySrcFromFontFace, loadFontFaceInBrowser } from './utils';
+import { loadFontFaceInBrowser } from './utils';
 import { store as editorStore } from '../../store';
+import { globalStylesLinksDataKey } from '../../store/private-keys';
+
+function resolveThemeFontFaceSrc( src, _links ) {
+	const firstSrc = Array.isArray( src ) ? src[ 0 ] : src;
+	return _links.find( ( link ) => link.name === firstSrc )?.href || firstSrc;
+}
 
 function useEditorFontsResolver() {
 	const [ loadedFontUrls, setLoadedFontUrls ] = useState( new Set() );
 
-	const { currentTheme = {}, fontFamilies = [] } = useSelect( ( select ) => {
+	const { _links = [], fontFamilies = [] } = useSelect( ( select ) => {
+		const { getSettings } = select( editorStore );
+		const _settings = getSettings();
 		return {
-			currentTheme:
-				select( editorStore ).getSettings()?.__experimentalFeatures
-					?.currentTheme,
+			_links: _settings[ globalStylesLinksDataKey ]?.[ 'wp:theme-file' ],
 			fontFamilies:
-				select( editorStore ).getSettings()?.__experimentalFeatures
-					?.typography?.fontFamilies,
+				_settings?.__experimentalFeatures?.typography?.fontFamilies,
 		};
 	}, [] );
 
+	// eslint-disable-next-line no-console
+	console.log( 'fontFamilies', fontFamilies, 'links', _links );
+
 	const fontFaces = useMemo( () => {
 		return Object.values( fontFamilies )
 			.flat()
@@ -38,10 +46,7 @@ function useEditorFontsResolver() {
 				return;
 			}
 
-			const src = getDisplaySrcFromFontFace(
-				fontFace.src,
-				currentTheme?.stylesheet_uri
-			);
+			const src = resolveThemeFontFaceSrc( fontFace.src, _links );
 
 			if ( ! src || loadedFontUrls.has( src ) ) {
 				return;
@@ -50,7 +55,7 @@ function useEditorFontsResolver() {
 			loadFontFaceInBrowser( fontFace, src, ownerDocument );
 			setLoadedFontUrls( ( prevUrls ) => new Set( prevUrls ).add( src ) );
 		},
-		[ currentTheme, loadedFontUrls ]
+		[ loadedFontUrls, _links ]
 	);
 
 	return useCallback(

diff --git a/packages/block-editor/src/components/use-editor-fonts-resolver/utils.js b/packages/block-editor/src/components/use-editor-fonts-resolver/utils.js
@@ -63,41 +63,3 @@ export async function loadFontFaceInBrowser( fontFace, source, documentRef ) {
 		window.document.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;
-}