Move EditorFontsResolver inside EditorStyles, use fontFamilies data f…

…rom block-editor store
WordPress · Sep 13, 2024 · c6a32f9 · c6a32f9
1 parent 65d147a
commit c6a32f9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 />
 		</>
 	);
 }