@wordpress/edit-site 5.29.0 → 5.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.29.0",
+	"version": "5.31.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,46 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.52.0",
-		"@wordpress/api-fetch": "^6.49.0",
-		"@wordpress/blob": "^3.52.0",
-		"@wordpress/block-editor": "^12.20.0",
-		"@wordpress/block-library": "^8.29.0",
-		"@wordpress/blocks": "^12.29.0",
-		"@wordpress/commands": "^0.23.0",
-		"@wordpress/components": "^27.0.0",
-		"@wordpress/compose": "^6.29.0",
-		"@wordpress/core-commands": "^0.21.0",
-		"@wordpress/core-data": "^6.29.0",
-		"@wordpress/data": "^9.22.0",
-		"@wordpress/dataviews": "^0.6.0",
-		"@wordpress/date": "^4.52.0",
-		"@wordpress/deprecated": "^3.52.0",
-		"@wordpress/dom": "^3.52.0",
-		"@wordpress/editor": "^13.29.0",
-		"@wordpress/element": "^5.29.0",
-		"@wordpress/escape-html": "^2.52.0",
-		"@wordpress/hooks": "^3.52.0",
-		"@wordpress/html-entities": "^3.52.0",
-		"@wordpress/i18n": "^4.52.0",
-		"@wordpress/icons": "^9.43.0",
-		"@wordpress/interface": "^5.29.0",
-		"@wordpress/keyboard-shortcuts": "^4.29.0",
-		"@wordpress/keycodes": "^3.52.0",
-		"@wordpress/media-utils": "^4.43.0",
-		"@wordpress/notices": "^4.20.0",
-		"@wordpress/patterns": "^1.13.0",
-		"@wordpress/plugins": "^6.20.0",
-		"@wordpress/preferences": "^3.29.0",
-		"@wordpress/primitives": "^3.50.0",
-		"@wordpress/private-apis": "^0.34.0",
-		"@wordpress/reusable-blocks": "^4.29.0",
-		"@wordpress/router": "^0.21.0",
-		"@wordpress/style-engine": "^1.35.0",
-		"@wordpress/url": "^3.53.0",
-		"@wordpress/viewport": "^5.29.0",
-		"@wordpress/widgets": "^3.29.0",
-		"@wordpress/wordcount": "^3.52.0",
+		"@wordpress/a11y": "^3.54.0",
+		"@wordpress/api-fetch": "^6.51.0",
+		"@wordpress/blob": "^3.54.0",
+		"@wordpress/block-editor": "^12.22.0",
+		"@wordpress/block-library": "^8.31.0",
+		"@wordpress/blocks": "^12.31.0",
+		"@wordpress/commands": "^0.25.0",
+		"@wordpress/components": "^27.2.0",
+		"@wordpress/compose": "^6.31.0",
+		"@wordpress/core-commands": "^0.23.0",
+		"@wordpress/core-data": "^6.31.0",
+		"@wordpress/data": "^9.24.0",
+		"@wordpress/dataviews": "^0.8.0",
+		"@wordpress/date": "^4.54.0",
+		"@wordpress/deprecated": "^3.54.0",
+		"@wordpress/dom": "^3.54.0",
+		"@wordpress/editor": "^13.31.0",
+		"@wordpress/element": "^5.31.0",
+		"@wordpress/escape-html": "^2.54.0",
+		"@wordpress/hooks": "^3.54.0",
+		"@wordpress/html-entities": "^3.54.0",
+		"@wordpress/i18n": "^4.54.0",
+		"@wordpress/icons": "^9.45.0",
+		"@wordpress/interface": "^5.31.0",
+		"@wordpress/keyboard-shortcuts": "^4.31.0",
+		"@wordpress/keycodes": "^3.54.0",
+		"@wordpress/media-utils": "^4.45.0",
+		"@wordpress/notices": "^4.22.0",
+		"@wordpress/patterns": "^1.15.0",
+		"@wordpress/plugins": "^6.22.0",
+		"@wordpress/preferences": "^3.31.0",
+		"@wordpress/primitives": "^3.52.0",
+		"@wordpress/private-apis": "^0.36.0",
+		"@wordpress/reusable-blocks": "^4.31.0",
+		"@wordpress/router": "^0.23.0",
+		"@wordpress/style-engine": "^1.37.0",
+		"@wordpress/url": "^3.55.0",
+		"@wordpress/viewport": "^5.31.0",
+		"@wordpress/widgets": "^3.31.0",
+		"@wordpress/wordcount": "^3.54.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"client-zip": "^2.4.4",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
+	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
 }

package/src/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { external, trash, backup } from '@wordpress/icons';
+import { external, edit, backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -27,8 +27,6 @@ const { useHistory } = unlock( routerPrivateApis );
 export const trashPostAction = {
 	id: 'move-to-trash',
 	label: __( 'Move to Trash' ),
-	isPrimary: true,
-	icon: trash,
 	isEligible( { status } ) {
 		return status !== 'trash';
 	},
@@ -172,8 +170,6 @@ export function usePermanentlyDeletePostAction() {
 		() => ( {
 			id: 'permanently-delete',
 			label: __( 'Permanently delete' ),
-			isPrimary: true,
-			icon: trash,
 			supportsBulk: true,
 			isEligible( { status } ) {
 				return status === 'trash';
@@ -362,7 +358,7 @@ export const viewPostAction = {
 	},
 	callback( posts ) {
 		const post = posts[ 0 ];
-		document.location.href = post.link;
+		window.open( post.link, '_blank' );
 	},
 };
 
@@ -372,6 +368,8 @@ export function useEditPostAction() {
 		() => ( {
 			id: 'edit-post',
 			label: __( 'Edit' ),
+			isPrimary: true,
+			icon: edit,
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},

package/src/components/block-editor/editor-canvas.js

@@ -22,6 +22,7 @@ import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
+import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
@@ -52,8 +53,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 		}
 	}, [ canvasMode ] );
 
-	const viewModeProps = {
-		'aria-label': __( 'Editor Canvas' ),
+	// In view mode, make the canvas iframe be perceived and behave as a button
+	// to switch to edit mode, with a meaningful label and no title attribute.
+	const viewModeIframeProps = {
+		'aria-label': __( 'Edit' ),
+		title: null,
 		role: 'button',
 		tabIndex: 0,
 		onFocus: () => setIsFocused( true ),
@@ -99,6 +103,17 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 		[ settings.styles, enableResizing, canvasMode ]
 	);
 
+	const frameSize = isZoomOutMode ? 20 : undefined;
+
+	const scale = isZoomOutMode
+		? ( contentWidth ) =>
+				computeIFrameScale(
+					{ width: 1000, scale: 0.45 },
+					{ width: 400, scale: 0.9 },
+					contentWidth
+				)
+		: undefined;
+
 	return (
 		<EditorCanvasRoot
 			className={ classnames( 'edit-site-editor-canvas__block-list', {
@@ -107,9 +122,8 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				expand: isZoomOutMode,
-				scale: isZoomOutMode ? 0.45 : undefined,
-				frameSize: isZoomOutMode ? 100 : undefined,
+				scale,
+				frameSize,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{
@@ -117,7 +131,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					}
 				),
 				...props,
-				...( canvasMode === 'view' ? viewModeProps : {} ),
+				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
 			} }
 		>
 			{ children }

package/src/components/block-editor/style.scss

@@ -22,7 +22,6 @@
 	position: relative;
 	height: 100%;
 	display: block;
-	overflow: hidden;
 	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
@@ -62,8 +61,6 @@
 
 	.components-resizable-box__container {
 		margin: 0 auto;
-		// Removing this will cancel the bottom margins in the iframe.
-		overflow: auto;
 	}
 
 	&.is-view-mode {

package/src/components/block-editor/use-site-editor-settings.js

@@ -101,8 +101,6 @@ function useNavigateToPreviousEntityRecord() {
 			( location.params.postId &&
 				FOCUSABLE_ENTITIES.includes( location.params.postType ) );
 		const didComeFromEditorCanvas =
-			previousLocation?.params.postId &&
-			previousLocation?.params.postType &&
 			previousLocation?.params.canvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;

package/src/components/editor/index.js

@@ -14,7 +14,6 @@ import {
 	BlockBreadcrumb,
 	BlockToolbar,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 	BlockInspector,
 } from '@wordpress/block-editor';
 import {
@@ -56,7 +55,6 @@ import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 
-const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 const {
 	ExperimentalEditorProvider: EditorProvider,
 	InserterSidebar,
@@ -74,21 +72,6 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-// Prevent accidental removal of certain blocks, asking the user for
-// confirmation.
-const blockRemovalRules = {
-	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
-	'core/post-content': __(
-		'Post Content displays the content of a post or page.'
-	),
-	'core/post-template': __(
-		'Post Template displays each post or page in a Query Loop.'
-	),
-	'bindings/core/pattern-overrides': __(
-		'Blocks from synced patterns that can have overriden content.'
-	),
-};
-
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -243,9 +226,6 @@ export default function Editor( { isLoading } ) {
 											<BlockToolbar hideDragHandle />
 										) }
 										<SiteEditorCanvas />
-										<BlockRemovalWarningModal
-											rules={ blockRemovalRules }
-										/>
 										<PatternModal />
 									</>
 								) }

package/src/components/global-styles/color-palette-panel.js

@@ -45,7 +45,6 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
-
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 

package/src/components/global-styles/font-families.js

@@ -33,7 +33,7 @@ function FontFamilies() {
 			{ !! modalTabOpen && (
 				<FontLibraryModal
 					onRequestClose={ () => toggleModal() }
-					initialTabId={ modalTabOpen }
+					defaultTabId={ modalTabOpen }
 				/>
 			) }
 

package/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -11,7 +11,7 @@ import {
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
@@ -35,17 +35,17 @@ function CollectionFontVariant( {
 	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<div className="font-library-modal__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
-					__nextHasNoMarginBottom={ true }
+					__nextHasNoMarginBottom
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
-						fontFace={ face }
+					<FontDemo
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>

package/src/components/global-styles/font-library-modal/context.js

@@ -9,7 +9,7 @@ import {
 	useEntityRecords,
 	store as coreStore,
 } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,6 +27,7 @@ import {
 	setUIValuesNeeded,
 	mergeFontFamilies,
 	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
 	getDisplaySrcFromFontFace,
 	makeFontFacesFormData,
 	makeFontFamilyFormData,
@@ -162,16 +163,6 @@ function FontLibraryProvider( { children } ) {
 	// Demo
 	const [ loadedFontUrls ] = useState( new Set() );
 
-	// Theme data
-	const { site, currentTheme } = useSelect( ( select ) => {
-		return {
-			site: select( coreStore ).getSite(),
-			currentTheme: select( coreStore ).getCurrentTheme(),
-		};
-	} );
-	const themeUrl =
-		site?.url + '/wp-content/themes/' + currentTheme?.stylesheet;
-
 	const getAvailableFontsOutline = ( availableFontFamilies ) => {
 		const outline = availableFontFamilies.reduce( ( acc, font ) => {
 			const availableFontFaces =
@@ -210,115 +201,134 @@ function FontLibraryProvider( { children } ) {
 		return getActivatedFontsOutline( source )[ slug ] || [];
 	};
 
-	async function installFont( fontFamilyToInstall ) {
+	async function installFonts( fontFamiliesToInstall ) {
 		setIsInstalling( true );
 		try {
-			// Get the font family if it already exists.
-			let installedFontFamily = await fetchGetFontFamilyBySlug(
-				fontFamilyToInstall.slug
-			);
+			const fontFamiliesToActivate = [];
+			let installationErrors = [];
+
+			for ( const fontFamilyToInstall of fontFamiliesToInstall ) {
+				let isANewFontFamily = false;
 
-			// Otherwise create it.
-			if ( ! installedFontFamily ) {
-				// Prepare font family form data to install.
-				installedFontFamily = await fetchInstallFontFamily(
-					makeFontFamilyFormData( fontFamilyToInstall )
+				// Get the font family if it already exists.
+				let installedFontFamily = await fetchGetFontFamilyBySlug(
+					fontFamilyToInstall.slug
 				);
-			}
 
-			// Collect font faces that have already been installed (to be activated later)
-			const alreadyInstalledFontFaces =
-				installedFontFamily.fontFace && fontFamilyToInstall.fontFace
-					? installedFontFamily.fontFace.filter(
+				// Otherwise create it.
+				if ( ! installedFontFamily ) {
+					isANewFontFamily = true;
+					// Prepare font family form data to install.
+					installedFontFamily = await fetchInstallFontFamily(
+						makeFontFamilyFormData( fontFamilyToInstall )
+					);
+				}
+
+				// Collect font faces that have already been installed (to be activated later)
+				const alreadyInstalledFontFaces =
+					installedFontFamily.fontFace && fontFamilyToInstall.fontFace
+						? installedFontFamily.fontFace.filter(
+								( fontFaceToInstall ) =>
+									checkFontFaceInstalled(
+										fontFaceToInstall,
+										fontFamilyToInstall.fontFace
+									)
+						  )
+						: [];
+
+				// Filter out Font Faces that have already been installed (so that they are not re-installed)
+				if (
+					installedFontFamily.fontFace &&
+					fontFamilyToInstall.fontFace
+				) {
+					fontFamilyToInstall.fontFace =
+						fontFamilyToInstall.fontFace.filter(
 							( fontFaceToInstall ) =>
-								checkFontFaceInstalled(
+								! checkFontFaceInstalled(
 									fontFaceToInstall,
-									fontFamilyToInstall.fontFace
+									installedFontFamily.fontFace
 								)
-					  )
-					: [];
-
-			// Filter out Font Faces that have already been installed (so that they are not re-installed)
-			if (
-				installedFontFamily.fontFace &&
-				fontFamilyToInstall.fontFace
-			) {
-				fontFamilyToInstall.fontFace =
-					fontFamilyToInstall.fontFace.filter(
-						( fontFaceToInstall ) =>
-							! checkFontFaceInstalled(
-								fontFaceToInstall,
-								installedFontFamily.fontFace
-							)
+						);
+				}
+
+				// Install the fonts (upload the font files to the server and create the post in the database).
+				let sucessfullyInstalledFontFaces = [];
+				let unsucessfullyInstalledFontFaces = [];
+				if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
+					const response = await batchInstallFontFaces(
+						installedFontFamily.id,
+						makeFontFacesFormData( fontFamilyToInstall )
 					);
-			}
-
-			// Install the fonts (upload the font files to the server and create the post in the database).
-			let sucessfullyInstalledFontFaces = [];
-			let unsucessfullyInstalledFontFaces = [];
-			if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
-				const response = await batchInstallFontFaces(
-					installedFontFamily.id,
-					makeFontFacesFormData( fontFamilyToInstall )
+					sucessfullyInstalledFontFaces = response?.successes;
+					unsucessfullyInstalledFontFaces = response?.errors;
+				}
+
+				// Use the sucessfully installed font faces
+				// As well as any font faces that were already installed (those will be activated)
+				if (
+					sucessfullyInstalledFontFaces?.length > 0 ||
+					alreadyInstalledFontFaces?.length > 0
+				) {
+					fontFamilyToInstall.fontFace = [
+						...sucessfullyInstalledFontFaces,
+						...alreadyInstalledFontFaces,
+					];
+					fontFamiliesToActivate.push( fontFamilyToInstall );
+				}
+
+				// If it's a system font but was installed successfully, activate it.
+				if (
+					installedFontFamily &&
+					! fontFamilyToInstall?.fontFace?.length
+				) {
+					fontFamiliesToActivate.push( installedFontFamily );
+				}
+
+				// If the font family is new and is not a system font, delete it to avoid having font families without font faces.
+				if (
+					isANewFontFamily &&
+					fontFamilyToInstall?.fontFace?.length > 0 &&
+					sucessfullyInstalledFontFaces?.length === 0
+				) {
+					await fetchUninstallFontFamily( installedFontFamily.id );
+				}
+
+				installationErrors = installationErrors.concat(
+					unsucessfullyInstalledFontFaces
 				);
-				sucessfullyInstalledFontFaces = response?.successes;
-				unsucessfullyInstalledFontFaces = response?.errors;
 			}
 
-			const detailedErrorMessage = unsucessfullyInstalledFontFaces.reduce(
-				( errorMessageCollection, error ) => {
-					return `${ errorMessageCollection } ${ error.message }`;
-				},
-				''
+			installationErrors = installationErrors.reduce(
+				( unique, item ) =>
+					unique.includes( item.message )
+						? unique
+						: [ ...unique, item.message ],
+				[]
 			);
 
-			// If there were no successes and nothing already installed then we don't need to activate anything and can bounce now.
-			if (
-				fontFamilyToInstall?.fontFace?.length > 0 &&
-				sucessfullyInstalledFontFaces.length === 0 &&
-				alreadyInstalledFontFaces.length === 0
-			) {
-				throw new Error(
-					sprintf(
-						/* translators: %s: Specific error message returned from server. */
-						__( 'No font faces were installed. %s' ),
-						detailedErrorMessage
-					)
+			if ( fontFamiliesToActivate.length > 0 ) {
+				// Activate the font family (add the font family to the global styles).
+				activateCustomFontFamilies( fontFamiliesToActivate );
+
+				// Save the global styles to the database.
+				await saveSpecifiedEntityEdits(
+					'root',
+					'globalStyles',
+					globalStylesId,
+					[ 'settings.typography.fontFamilies' ]
 				);
-			}
 
-			// Use the sucessfully installed font faces
-			// As well as any font faces that were already installed (those will be activated)
-			if (
-				sucessfullyInstalledFontFaces?.length > 0 ||
-				alreadyInstalledFontFaces?.length > 0
-			) {
-				fontFamilyToInstall.fontFace = [
-					...sucessfullyInstalledFontFaces,
-					...alreadyInstalledFontFaces,
-				];
+				refreshLibrary();
 			}
 
-			// Activate the font family (add the font family to the global styles).
-			activateCustomFontFamilies( [ fontFamilyToInstall ] );
+			if ( installationErrors.length > 0 ) {
+				const installError = new Error(
+					__( 'There was an error installing fonts.' )
+				);
 
-			// Save the global styles to the database.
-			saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
-				'settings.typography.fontFamilies',
-			] );
+				installError.installationErrors = installationErrors;
 
-			refreshLibrary();
-
-			if ( unsucessfullyInstalledFontFaces.length > 0 ) {
-				throw new Error(
-					sprintf(
-						/* translators: %s: Specific error message returned from server. */
-						__(
-							'Some font faces were installed. There were some errors. %s'
-						),
-						detailedErrorMessage
-					)
-				);
+				throw installError;
 			}
 		} finally {
 			setIsInstalling( false );
@@ -371,18 +381,20 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newCustomFonts,
 		} );
+
+		if ( font.fontFace ) {
+			font.fontFace.forEach( ( face ) => {
+				unloadFontFaceInBrowser( face, 'all' );
+			} );
+		}
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
 		// Merge the existing custom fonts with the new fonts.
-		const newCustomFonts = mergeFontFamilies(
-			fontFamilies?.custom,
-			fontsToAdd
-		);
 		// Activate the fonts by set the new custom fonts array.
 		setFontFamilies( {
 			...fontFamilies,
-			custom: newCustomFonts,
+			custom: mergeFontFamilies( fontFamilies?.custom, fontsToAdd ),
 		} );
 		// Add custom fonts to the browser.
 		fontsToAdd.forEach( ( font ) => {
@@ -410,13 +422,30 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newFonts,
 		} );
+
+		const isFaceActivated = isFontActivated(
+			font.slug,
+			face?.fontStyle,
+			face?.fontWeight,
+			font.source
+		);
+
+		if ( isFaceActivated ) {
+			loadFontFaceInBrowser(
+				face,
+				getDisplaySrcFromFontFace( face?.src ),
+				'all'
+			);
+		} else {
+			unloadFontFaceInBrowser( face, 'all' );
+		}
 	};
 
 	const loadFontFaceAsset = async ( fontFace ) => {
 		// If the font doesn't have a src, don't load it.
 		if ( ! fontFace.src ) return;
 		// Get the src of the font.
-		const src = getDisplaySrcFromFontFace( fontFace.src, themeUrl );
+		const src = getDisplaySrcFromFontFace( fontFace.src );
 		// If the font is already loaded, don't load it again.
 		if ( ! src || loadedFontUrls.has( src ) ) return;
 		// Load the font in the browser.
@@ -467,7 +496,7 @@ function FontLibraryProvider( { children } ) {
 				isFontActivated,
 				getFontFacesActivated,
 				loadFontFaceAsset,
-				installFont,
+				installFonts,
 				uninstallFontFamily,
 				toggleActivateFont,
 				getAvailableFontsOutline,