Font Library: Font loading/unloading fails in Code Editor #69139
Description
Originally reported in Core Ticket: https://core.trac.wordpress.org/ticket/62941
What problem does this address?
The font library updates fonts via the fonts property of the root document and iframe document when loading and unloading fonts:
However, if the editor mode is switched to the code editor, font updates fail because the iframe document does not exist. For example, font upload fails.
What is your proposed solution?
One approach would be to change the editor mode to the visual editor when you click the button to open the font library, but this doesn't feel like the right approach.
diff
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index f3e81efbe5..47edad2f47 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -12,6 +12,8 @@ import {
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { settings } from '@wordpress/icons';
import { useContext } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
@@ -49,6 +51,7 @@ function FontFamilies() {
undefined,
'base'
);
+ const { switchEditorMode } = useDispatch( editorStore );
const themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );
const customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );
const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
@@ -73,7 +76,10 @@ function FontFamilies() {
<HStack justify="space-between">
<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
<Button
- onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+ onClick={ () => {
+ switchEditorMode( 'visual' );
+ setModalTabOpen( 'installed-fonts' );
+ } }
label={ __( 'Manage fonts' ) }
icon={ settings }
size="small"
@@ -103,6 +109,7 @@ function FontFamilies() {
variant="secondary"
__next40pxDefaultSize
onClick={ () => {
+ switchEditorMode( 'visual' );
setModalTabOpen(
hasInstalledFonts
? 'installed-fonts'Step-by-step reproduction instructions
- Visit the site editor.
- Open a template.
- Switch to the code editor.
- Open the font library.
- Attempt to upload a font.