From c6a32f9d7381e4f93a3c471de7214023f4984edd Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Fri, 13 Sep 2024 16:58:24 -0300
Subject: [PATCH] Move EditorFontsResolver inside EditorStyles, use
 fontFamilies data from block-editor store

---
 .../block-editor/src/components/block-canvas/index.js  |  3 ---
 .../src/components/editor-fonts-resolver/index.js      | 10 +++++-----
 .../block-editor/src/components/editor-styles/index.js |  3 ++-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 03f3a4f2eb5f1..9bad3ca22e95f 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -15,7 +15,6 @@ 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.
@@ -44,7 +43,6 @@ export function ExperimentalBlockCanvas( {
 				__unstableContentRef={ localRef }
 				style={ { height, display: 'flex' } }
 			>
-				<EditorFontsResolver />
 				<EditorStyles
 					styles={ styles }
 					scope=":where(.editor-styles-wrapper)"
@@ -79,7 +77,6 @@ export function ExperimentalBlockCanvas( {
 				} }
 				name="editor-canvas"
 			>
-				<EditorFontsResolver />
 				<EditorStyles styles={ styles } />
 				{ children }
 			</Iframe>
diff --git a/packages/block-editor/src/components/editor-fonts-resolver/index.js b/packages/block-editor/src/components/editor-fonts-resolver/index.js
index 1ba220f47b1af..97f490e11c40a 100644
--- a/packages/block-editor/src/components/editor-fonts-resolver/index.js
+++ b/packages/block-editor/src/components/editor-fonts-resolver/index.js
@@ -7,24 +7,24 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useGlobalSetting } from '../global-styles/hooks';
 import { getDisplaySrcFromFontFace, loadFontFaceInBrowser } from './utils';
+import { store as editorStore } from '../../store';
 
 function EditorFontsResolver() {
 	const [ loadedFontUrls, setLoadedFontUrls ] = useState( new Set() );
 
-	const { currentTheme } = useSelect( ( select ) => {
+	const { currentTheme, fontFamilies = [] } = useSelect( ( select ) => {
 		return {
 			currentTheme:
 				// Disable Reason: Using 'core' as string to avoid circular dependency importing from @wordpress/core-data.
 				// eslint-disable-next-line @wordpress/data-no-store-string-literals
 				select( 'core' ).getCurrentTheme(),
+			fontFamilies:
+				select( editorStore ).getSettings()?.__experimentalFeatures
+					?.typography?.fontFamilies,
 		};
 	}, [] );
 
-	// Get the fonts from merged theme.json settings.fontFamilies.
-	const [ fontFamilies = [] ] = useGlobalSetting( 'typography.fontFamilies' );
-
 	const fontFaces = useMemo( () => {
 		return Object.values( fontFamilies )
 			.flat()
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index a59ac310bcd30..5108e8fae7b51 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -18,6 +18,7 @@ import { useSelect } from '@wordpress/data';
 import transformStyles from '../../utils/transform-styles';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import EditorFontsResolver from '../editor-fonts-resolver';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -27,7 +28,6 @@ function useDarkThemeBodyClassName( styles, scope ) {
 			if ( ! node ) {
 				return;
 			}
-
 			const { ownerDocument } = node;
 			const { defaultView, body } = ownerDocument;
 			const canvas = scope ? ownerDocument.querySelector( scope ) : body;
@@ -122,6 +122,7 @@ function EditorStyles( { styles, scope, transformOptions } ) {
 				} }
 				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
 			/>
+			<EditorFontsResolver />
 		</>
 	);
 }