@wordpress/edit-site 5.27.1 → 5.27.2

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

@@ -164,20 +164,24 @@ export function makeFontFacesFormData( font ) {
 		const fontFacesFormData = font.fontFace.map( ( face, faceIndex ) => {
 			const formData = new FormData();
 			if ( face.file ) {
-				// Slugified file name because the it might contain spaces or characters treated differently on the server.
-				const fileId = `file-${ faceIndex }`;
-				// Add the files to the formData
-				formData.append( fileId, face.file, face.file.name );
-				// remove the file object from the face object the file is referenced in src
-				const { file, ...faceWithoutFileProperty } = face;
-				const fontFaceSettings = {
-					...faceWithoutFileProperty,
-					src: fileId,
-				};
-				formData.append(
-					'font_face_settings',
-					JSON.stringify( fontFaceSettings )
-				);
+				// Normalize to an array, since face.file may be a single file or an array of files.
+				const files = Array.isArray( face.file )
+					? face.file
+					: [ face.file ];
+				const src = [];
+
+				files.forEach( ( file, key ) => {
+					// Slugified file name because the it might contain spaces or characters treated differently on the server.
+					const fileId = `file-${ faceIndex }-${ key }`;
+					// Add the files to the formData
+					formData.append( fileId, file, file.name );
+					src.push( fileId );
+				} );
+
+				face.src = src.length === 1 ? src[ 0 ] : src;
+				delete face.file;
+
+				formData.append( 'font_face_settings', JSON.stringify( face ) );
 			} else {
 				formData.append( 'font_face_settings', JSON.stringify( face ) );
 			}
@@ -225,31 +229,33 @@ export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
 /*
  * Downloads a font face asset from a URL to the client and returns a File object.
  */
-export async function downloadFontFaceAsset( url ) {
-	return fetch( new Request( url ) )
-		.then( ( response ) => {
-			if ( ! response.ok ) {
-				throw new Error(
-					`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`
-				);
-			}
-			return response.blob();
-		} )
-		.then( ( blob ) => {
-			const filename = url.split( '/' ).pop();
-			const file = new File( [ blob ], filename, {
-				type: blob.type,
-			} );
-			return file;
+export async function downloadFontFaceAssets( src ) {
+	// Normalize to an array, since `src` could be a string or array.
+	src = Array.isArray( src ) ? src : [ src ];
+
+	const files = await Promise.all(
+		src.map( async ( url ) => {
+			return fetch( new Request( url ) )
+				.then( ( response ) => {
+					if ( ! response.ok ) {
+						throw new Error(
+							`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`
+						);
+					}
+					return response.blob();
+				} )
+				.then( ( blob ) => {
+					const filename = url.split( '/' ).pop();
+					const file = new File( [ blob ], filename, {
+						type: blob.type,
+					} );
+					return file;
+				} );
 		} )
-		.catch( ( error ) => {
-			// eslint-disable-next-line no-console
-			console.error(
-				`Error downloading font face asset from ${ url }:`,
-				error
-			);
-			throw error;
-		} );
+	);
+
+	// If we only have one file return it (not the array).  Otherwise return all of them in the array.
+	return files.length === 1 ? files[ 0 ] : files;
 }
 
 /*

package/src/components/routes/link.js

@@ -22,7 +22,7 @@ export function getPostLinkProps(
 	shouldReplace = false
 ) {
 	function onClick( event ) {
-		event.preventDefault();
+		event?.preventDefault();
 
 		if ( shouldReplace ) {
 			history.replace( params, state );

package/src/components/sidebar-edit-mode/index.js

@@ -8,7 +8,6 @@ import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -49,9 +48,7 @@ export function SidebarComplementaryAreaFills() {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
-			isEditingPage:
-				select( editSiteStore ).isPage() &&
-				select( editorStore ).getRenderingMode() !== 'template-only',
+			isEditingPage: select( editSiteStore ).isPage(),
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -17,23 +17,12 @@ import { store as editorStore } from '@wordpress/editor';
  */
 import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
-import { store as editSiteStore } from '../../../store';
-import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants';
 
 const SettingsHeader = ( { sidebarName } ) => {
-	const { isEditingPage, entityType } = useSelect( ( select ) => {
-		const { getEditedPostType, isPage } = select( editSiteStore );
-		const { getRenderingMode } = select( editorStore );
-
-		return {
-			isEditingPage: isPage() && getRenderingMode() !== 'template-only',
-			entityType: getEditedPostType(),
-		};
-	} );
-
-	const entityLabel =
-		POST_TYPE_LABELS[ entityType ] ||
-		POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ];
+	const postTypeLabel = useSelect(
+		( select ) => select( editorStore ).getPostTypeLabel(),
+		[]
+	);
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>
@@ -41,22 +30,11 @@ const SettingsHeader = ( { sidebarName } ) => {
 	const openBlockSettings = () =>
 		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 
-	let templateAriaLabel;
-	if ( isEditingPage ) {
-		templateAriaLabel =
-			sidebarName === SIDEBAR_TEMPLATE
-				? // translators: ARIA label for the Template sidebar tab, selected.
-				  __( 'Page (selected)' )
-				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-				  __( 'Page' );
-	} else {
-		templateAriaLabel =
-			sidebarName === SIDEBAR_TEMPLATE
-				? // translators: ARIA label for the Template sidebar tab, selected.
-				  sprintf( __( '%s (selected)' ), entityLabel )
-				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-				  entityLabel;
-	}
+	const documentAriaLabel =
+		sidebarName === SIDEBAR_TEMPLATE
+			? // translators: ARIA label for the Template sidebar tab, selected.
+			  sprintf( __( '%s (selected)' ), postTypeLabel )
+			: postTypeLabel;
 
 	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
@@ -70,10 +48,10 @@ const SettingsHeader = ( { sidebarName } ) => {
 							'is-active': sidebarName === SIDEBAR_TEMPLATE,
 						}
 					) }
-					aria-label={ templateAriaLabel }
-					data-label={ isEditingPage ? __( 'Page' ) : entityLabel }
+					aria-label={ documentAriaLabel }
+					data-label={ postTypeLabel }
 				>
-					{ isEditingPage ? __( 'Page' ) : entityLabel }
+					{ postTypeLabel }
 				</Button>
 			</li>
 			<li>

package/src/components/welcome-guide/template.js

@@ -25,12 +25,12 @@ export default function WelcomeGuideTemplate() {
 			'welcomeGuide'
 		);
 		const { isPage } = select( editSiteStore );
-		const { getRenderingMode } = select( editorStore );
+		const { getCurrentPostType } = select( editorStore );
 		return (
 			isTemplateActive &&
 			! isEditorActive &&
 			isPage() &&
-			getRenderingMode() === 'template-only'
+			getCurrentPostType() === 'wp_template'
 		);
 	}, [] );
 

package/src/hooks/commands/use-edit-mode-commands.js

@@ -38,22 +38,34 @@ import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { useLink } from '../../components/routes/link';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
 	const { record: template } = useEditedEntityRecord();
-	const { isPage, canvasMode, renderingMode } = useSelect( ( select ) => {
-		const { isPage: _isPage, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const { getRenderingMode } = select( editorStore );
-		return {
-			isPage: _isPage(),
-			canvasMode: getCanvasMode(),
-			renderingMode: getRenderingMode(),
-		};
-	}, [] );
+	const { isPage, canvasMode, templateId, currentPostType } = useSelect(
+		( select ) => {
+			const { isPage: _isPage, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const { getCurrentPostType, getCurrentTemplateId } =
+				select( editorStore );
+			return {
+				isPage: _isPage(),
+				canvasMode: getCanvasMode(),
+				templateId: getCurrentTemplateId(),
+				currentPostType: getCurrentPostType(),
+			};
+		},
+		[]
+	);
+
+	const { onClick: editTemplate } = useLink( {
+		postType: 'wp_template',
+		postId: templateId,
+	} );
+
 	const { setRenderingMode } = useDispatch( editorStore );
 
 	if ( ! isPage || canvasMode !== 'edit' ) {
@@ -62,7 +74,7 @@ function usePageContentFocusCommands() {
 
 	const commands = [];
 
-	if ( renderingMode !== 'template-only' ) {
+	if ( currentPostType !== 'wp_template' ) {
 		commands.push( {
 			name: 'core/switch-to-template-focus',
 			/* translators: %1$s: template title */
@@ -72,7 +84,7 @@ function usePageContentFocusCommands() {
 			),
 			icon: layout,
 			callback: ( { close } ) => {
-				setRenderingMode( 'template-only' );
+				editTemplate();
 				close();
 			},
 		} );
@@ -129,7 +141,7 @@ function useManipulateDocumentCommands() {
 	const isEditingPage = useSelect(
 		( select ) =>
 			select( editSiteStore ).isPage() &&
-			select( editorStore ).getRenderingMode() !== 'template-only',
+			select( editorStore ).getCurrentPostType() !== 'wp_template',
 		[]
 	);
 

package/build/components/global-styles/font-library-modal/local-fonts.js

@@ -1,196 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _constants = require("./utils/constants");
-var _context = require("./context");
-var _libFont = require("../../../../lib/lib-font.browser");
-var _makeFamiliesFromFaces = _interopRequireDefault(require("./utils/make-families-from-faces"));
-var _utils = require("./utils");
-var _lockUnlock = require("../../../lock-unlock");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  ProgressBar
-} = (0, _lockUnlock.unlock)(_components.privateApis);
-function LocalFonts() {
-  const {
-    installFont
-  } = (0, _element.useContext)(_context.FontLibraryContext);
-  const [notice, setNotice] = (0, _element.useState)(null);
-  const [isUploading, setIsUploading] = (0, _element.useState)(false);
-  const supportedFormats = _constants.ALLOWED_FILE_EXTENSIONS.slice(0, -1).map(extension => `.${extension}`).join(', ') + ` ${(0, _i18n.__)('and')} .${_constants.ALLOWED_FILE_EXTENSIONS.slice(-1)}`;
-  const handleDropZone = files => {
-    handleFilesUpload(files);
-  };
-  const onFilesUpload = event => {
-    handleFilesUpload(event.target.files);
-  };
-
-  // Reset notice after 5 seconds
-  (0, _element.useEffect)(() => {
-    if (notice) {
-      const timeout = setTimeout(() => {
-        setNotice(null);
-      }, 5000);
-      return () => clearTimeout(timeout);
-    }
-  }, [notice]);
-
-  /**
-   * Filters the selected files to only allow the ones with the allowed extensions
-   *
-   * @param {Array} files The files to be filtered
-   * @return {void}
-   */
-  const handleFilesUpload = files => {
-    setNotice(null);
-    setIsUploading(true);
-    const uniqueFilenames = new Set();
-    const selectedFiles = [...files];
-    const allowedFiles = selectedFiles.filter(file => {
-      if (uniqueFilenames.has(file.name)) {
-        return false; // Discard duplicates
-      }
-      // Eliminates files that are not allowed
-      const fileExtension = file.name.split('.').pop().toLowerCase();
-      if (_constants.ALLOWED_FILE_EXTENSIONS.includes(fileExtension)) {
-        uniqueFilenames.add(file.name);
-        return true; // Keep file if the extension is allowed
-      }
-
-      return false; // Discard file extension not allowed
-    });
-
-    if (allowedFiles.length > 0) {
-      loadFiles(allowedFiles);
-    }
-  };
-
-  /**
-   * Loads the selected files and reads the font metadata
-   *
-   * @param {Array} files The files to be loaded
-   * @return {void}
-   */
-  const loadFiles = async files => {
-    const fontFacesLoaded = await Promise.all(files.map(async fontFile => {
-      const fontFaceData = await getFontFaceMetadata(fontFile);
-      await (0, _utils.loadFontFaceInBrowser)(fontFaceData, fontFaceData.file, 'all');
-      return fontFaceData;
-    }));
-    await handleInstall(fontFacesLoaded);
-  };
-
-  // Create a function to read the file as array buffer
-  async function readFileAsArrayBuffer(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new window.FileReader();
-      reader.readAsArrayBuffer(file);
-      reader.onload = () => resolve(reader.result);
-      reader.onerror = reject;
-    });
-  }
-  const getFontFaceMetadata = async fontFile => {
-    const buffer = await readFileAsArrayBuffer(fontFile);
-    const fontObj = new _libFont.Font('Uploaded Font');
-    fontObj.fromDataBuffer(buffer, fontFile.name);
-    // Assuming that fromDataBuffer triggers onload event and returning a Promise
-    const onloadEvent = await new Promise(resolve => fontObj.onload = resolve);
-    const font = onloadEvent.detail.font;
-    const {
-      name
-    } = font.opentype.tables;
-    const fontName = name.get(16) || name.get(1);
-    const isItalic = name.get(2).toLowerCase().includes('italic');
-    const fontWeight = font.opentype.tables['OS/2'].usWeightClass || 'normal';
-    const isVariable = !!font.opentype.tables.fvar;
-    const weightAxis = isVariable && font.opentype.tables.fvar.axes.find(({
-      tag
-    }) => tag === 'wght');
-    const weightRange = weightAxis ? `${weightAxis.minValue} ${weightAxis.maxValue}` : null;
-    return {
-      file: fontFile,
-      fontFamily: fontName,
-      fontStyle: isItalic ? 'italic' : 'normal',
-      fontWeight: weightRange || fontWeight
-    };
-  };
-
-  /**
-   * Creates the font family definition and sends it to the server
-   *
-   * @param {Array} fontFaces The font faces to be installed
-   * @return {void}
-   */
-  const handleInstall = async fontFaces => {
-    const fontFamilies = (0, _makeFamiliesFromFaces.default)(fontFaces);
-    if (fontFamilies.length > 1) {
-      setNotice({
-        type: 'error',
-        message: (0, _i18n.__)('Variants from only one font family can be uploaded at a time.')
-      });
-      setIsUploading(false);
-      return;
-    }
-    try {
-      await installFont(fontFamilies[0]);
-      setNotice({
-        type: 'success',
-        message: (0, _i18n.__)('Fonts were installed successfully.')
-      });
-    } catch (error) {
-      setNotice({
-        type: 'error',
-        message: error.message
-      });
-    }
-    setIsUploading(false);
-  };
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 16
-  }), (0, _react.createElement)(_components.DropZone, {
-    onFilesDrop: handleDropZone
-  }), (0, _react.createElement)(_components.__experimentalVStack, {
-    className: "font-library-modal__local-fonts"
-  }, !isUploading && (0, _react.createElement)(_components.FormFileUpload, {
-    accept: _constants.ALLOWED_FILE_EXTENSIONS.map(ext => `.${ext}`).join(','),
-    multiple: true,
-    onChange: onFilesUpload,
-    render: ({
-      openFileDialog
-    }) => (0, _react.createElement)(_components.Button, {
-      className: "font-library-modal__upload-area",
-      onClick: openFileDialog
-    }, (0, _react.createElement)("span", null, (0, _i18n.__)('Upload font')))
-  }), isUploading && (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)("div", {
-    className: "font-library-modal__upload-area"
-  }, (0, _react.createElement)(ProgressBar, null))), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 2
-  }), (0, _react.createElement)(_components.__experimentalText, {
-    className: "font-library-modal__upload-area__text"
-  }, (0, _i18n.sprintf)( /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */
-  (0, _i18n.__)('Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'), supportedFormats)), !isUploading && notice && (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 2
-  }), (0, _react.createElement)(_components.Notice, {
-    isDismissible: false,
-    status: notice.type,
-    className: "font-library-modal__upload-area__notice"
-  }, notice.message))));
-}
-var _default = LocalFonts;
-exports.default = _default;
-//# sourceMappingURL=local-fonts.js.map

package/build/components/global-styles/font-library-modal/local-fonts.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_i18n","require","_components","_element","_constants","_context","_libFont","_makeFamiliesFromFaces","_interopRequireDefault","_utils","_lockUnlock","ProgressBar","unlock","componentsPrivateApis","LocalFonts","installFont","useContext","FontLibraryContext","notice","setNotice","useState","isUploading","setIsUploading","supportedFormats","ALLOWED_FILE_EXTENSIONS","slice","map","extension","join","__","handleDropZone","files","handleFilesUpload","onFilesUpload","event","target","useEffect","timeout","setTimeout","clearTimeout","uniqueFilenames","Set","selectedFiles","allowedFiles","filter","file","has","name","fileExtension","split","pop","toLowerCase","includes","add","length","loadFiles","fontFacesLoaded","Promise","all","fontFile","fontFaceData","getFontFaceMetadata","loadFontFaceInBrowser","handleInstall","readFileAsArrayBuffer","resolve","reject","reader","window","FileReader","readAsArrayBuffer","onload","result","onerror","buffer","fontObj","Font","fromDataBuffer","onloadEvent","font","detail","opentype","tables","fontName","get","isItalic","fontWeight","usWeightClass","isVariable","fvar","weightAxis","axes","find","tag","weightRange","minValue","maxValue","fontFamily","fontStyle","fontFaces","fontFamilies","makeFamiliesFromFaces","type","message","error","_react","createElement","Fragment","__experimentalSpacer","margin","DropZone","onFilesDrop","__experimentalVStack","className","FormFileUpload","accept","ext","multiple","onChange","render","openFileDialog","Button","onClick","FlexItem","__experimentalText","sprintf","Notice","isDismissible","status","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/local-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropZone,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tFormFileUpload,\n\tNotice,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useContext, useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_FILE_EXTENSIONS } from './utils/constants';\nimport { FontLibraryContext } from './context';\nimport { Font } from '../../../../lib/lib-font.browser';\nimport makeFamiliesFromFaces from './utils/make-families-from-faces';\nimport { loadFontFaceInBrowser } from './utils';\nimport { unlock } from '../../../lock-unlock';\n\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction LocalFonts() {\n\tconst { installFont } = useContext( FontLibraryContext );\n\tconst [ notice, setNotice ] = useState( null );\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst supportedFormats =\n\t\tALLOWED_FILE_EXTENSIONS.slice( 0, -1 )\n\t\t\t.map( ( extension ) => `.${ extension }` )\n\t\t\t.join( ', ' ) +\n\t\t` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;\n\n\tconst handleDropZone = ( files ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event ) => {\n\t\thandleFilesUpload( event.target.files );\n\t};\n\n\t// Reset notice after 5 seconds\n\tuseEffect( () => {\n\t\tif ( notice ) {\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetNotice( null );\n\t\t\t}, 5000 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t}\n\t}, [ notice ] );\n\n\t/**\n\t * Filters the selected files to only allow the ones with the allowed extensions\n\t *\n\t * @param {Array} files The files to be filtered\n\t * @return {void}\n\t */\n\tconst handleFilesUpload = ( files ) => {\n\t\tsetNotice( null );\n\t\tsetIsUploading( true );\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tconst allowedFiles = selectedFiles.filter( ( file ) => {\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn false; // Discard duplicates\n\t\t\t}\n\t\t\t// Eliminates files that are not allowed\n\t\t\tconst fileExtension = file.name.split( '.' ).pop().toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn true; // Keep file if the extension is allowed\n\t\t\t}\n\t\t\treturn false; // Discard file extension not allowed\n\t\t} );\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t}\n\t};\n\n\t/**\n\t * Loads the selected files and reads the font metadata\n\t *\n\t * @param {Array} files The files to be loaded\n\t * @return {void}\n\t */\n\tconst loadFiles = async ( files ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile ) => {\n\t\t\t\tconst fontFaceData = await getFontFaceMetadata( fontFile );\n\t\t\t\tawait loadFontFaceInBrowser(\n\t\t\t\t\tfontFaceData,\n\t\t\t\t\tfontFaceData.file,\n\t\t\t\t\t'all'\n\t\t\t\t);\n\t\t\t\treturn fontFaceData;\n\t\t\t} )\n\t\t);\n\t\tawait handleInstall( fontFacesLoaded );\n\t};\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file ) {\n\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\tconst reader = new window.FileReader();\n\t\t\treader.readAsArrayBuffer( file );\n\t\t\treader.onload = () => resolve( reader.result );\n\t\t\treader.onerror = reject;\n\t\t} );\n\t}\n\n\tconst getFontFaceMetadata = async ( fontFile ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj = new Font( 'Uploaded Font' );\n\t\tfontObj.fromDataBuffer( buffer, fontFile.name );\n\t\t// Assuming that fromDataBuffer triggers onload event and returning a Promise\n\t\tconst onloadEvent = await new Promise(\n\t\t\t( resolve ) => ( fontObj.onload = resolve )\n\t\t);\n\t\tconst font = onloadEvent.detail.font;\n\t\tconst { name } = font.opentype.tables;\n\t\tconst fontName = name.get( 16 ) || name.get( 1 );\n\t\tconst isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );\n\t\tconst fontWeight =\n\t\t\tfont.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';\n\t\tconst isVariable = !! font.opentype.tables.fvar;\n\t\tconst weightAxis =\n\t\t\tisVariable &&\n\t\t\tfont.opentype.tables.fvar.axes.find(\n\t\t\t\t( { tag } ) => tag === 'wght'\n\t\t\t);\n\t\tconst weightRange = weightAxis\n\t\t\t? `${ weightAxis.minValue } ${ weightAxis.maxValue }`\n\t\t\t: null;\n\t\treturn {\n\t\t\tfile: fontFile,\n\t\t\tfontFamily: fontName,\n\t\t\tfontStyle: isItalic ? 'italic' : 'normal',\n\t\t\tfontWeight: weightRange || fontWeight,\n\t\t};\n\t};\n\n\t/**\n\t * Creates the font family definition and sends it to the server\n\t *\n\t * @param {Array} fontFaces The font faces to be installed\n\t * @return {void}\n\t */\n\tconst handleInstall = async ( fontFaces ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\n\t\tif ( fontFamilies.length > 1 ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Variants from only one font family can be uploaded at a time.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\tsetIsUploading( false );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFont( fontFamilies[ 0 ] );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\n\t\tsetIsUploading( false );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 16 } />\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library-modal__local-fonts\">\n\t\t\t\t{ ! isUploading && (\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t\t\t).join( ',' ) }\n\t\t\t\t\t\tmultiple={ true }\n\t\t\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"font-library-modal__upload-area\"\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{ __( 'Upload font' ) }</span>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ isUploading && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<div className=\"font-library-modal__upload-area\">\n\t\t\t\t\t\t\t<ProgressBar />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t<Text className=\"font-library-modal__upload-area__text\">\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tsupportedFormats\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t\t{ ! isUploading && notice && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\tclassName=\"font-library-modal__upload-area__notice\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default LocalFonts;\n"],"mappings":"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"}