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 index a63111614b23ec..4539464d52a7d4 100644 --- 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 index 467eb4ef82a01a..4bd2f5db26aa02 100644 --- 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; -}