@wordpress/edit-site 5.28.4 → 5.28.6

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

@@ -28,7 +28,8 @@ import { unlock } from '../../../lock-unlock';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
 function UploadFonts() {
-	const { installFont, notice, setNotice } = useContext( FontLibraryContext );
+	const { installFonts, notice, setNotice } =
+		useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
 
 	const handleDropZone = ( files ) => {
@@ -44,29 +45,48 @@ function UploadFonts() {
 	 * @param {Array} files The files to be filtered
 	 * @return {void}
 	 */
-	const handleFilesUpload = ( files ) => {
+	const handleFilesUpload = async ( files ) => {
 		setNotice( null );
 		setIsUploading( true );
 		const uniqueFilenames = new Set();
 		const selectedFiles = [ ...files ];
-		const allowedFiles = selectedFiles.filter( ( file ) => {
+		let hasInvalidFiles = false;
+
+		// Use map to create a promise for each file check, then filter with Promise.all.
+		const checkFilesPromises = selectedFiles.map( async ( file ) => {
+			const isFont = await isFontFile( file );
+			if ( ! isFont ) {
+				hasInvalidFiles = true;
+				return null; // Return null for invalid files.
+			}
+			// Check for duplicates
 			if ( uniqueFilenames.has( file.name ) ) {
-				return false; // Discard duplicates
+				return null; // Return null for duplicates.
 			}
-			// Eliminates files that are not allowed
+			// Check if the file extension is allowed.
 			const fileExtension = file.name.split( '.' ).pop().toLowerCase();
 			if ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {
 				uniqueFilenames.add( file.name );
-				return true; // Keep file if the extension is allowed
+				return file; // Return the file if it passes all checks.
 			}
-			return false; // Discard file extension not allowed
+			return null; // Return null for disallowed file extensions.
 		} );
+
+		// Filter out the nulls after all promises have resolved.
+		const allowedFiles = ( await Promise.all( checkFilesPromises ) ).filter(
+			( file ) => null !== file
+		);
+
 		if ( allowedFiles.length > 0 ) {
 			loadFiles( allowedFiles );
 		} else {
+			const message = hasInvalidFiles
+				? __( 'Sorry, you are not allowed to upload this file type.' )
+				: __( 'No fonts found to install.' );
+
 			setNotice( {
 				type: 'error',
-				message: __( 'No fonts found to install.' ),
+				message,
 			} );
 			setIsUploading( false );
 		}
@@ -93,6 +113,23 @@ function UploadFonts() {
 		handleInstall( fontFacesLoaded );
 	};
 
+	/**
+	 * Checks if a file is a valid Font file.
+	 *
+	 * @param {File} file The file to be checked.
+	 * @return {boolean} Whether the file is a valid font file.
+	 */
+	async function isFontFile( file ) {
+		const font = new Font( 'Uploaded Font' );
+		try {
+			const buffer = await readFileAsArrayBuffer( file );
+			await font.fromDataBuffer( buffer, 'font' );
+			return true;
+		} catch ( error ) {
+			return false;
+		}
+	}
+
 	// Create a function to read the file as array buffer
 	async function readFileAsArrayBuffer( file ) {
 		return new Promise( ( resolve, reject ) => {
@@ -143,19 +180,8 @@ function UploadFonts() {
 	const handleInstall = async ( fontFaces ) => {
 		const fontFamilies = makeFamiliesFromFaces( fontFaces );
 
-		if ( fontFamilies.length > 1 ) {
-			setNotice( {
-				type: 'error',
-				message: __(
-					'Variants from only one font family can be uploaded at a time.'
-				),
-			} );
-			setIsUploading( false );
-			return;
-		}
-
 		try {
-			await installFont( fontFamilies[ 0 ] );
+			await installFonts( fontFamilies );
 			setNotice( {
 				type: 'success',
 				message: __( 'Fonts were installed successfully.' ),
@@ -164,6 +190,7 @@ function UploadFonts() {
 			setNotice( {
 				type: 'error',
 				message: error.message,
+				errors: error?.installationErrors,
 			} );
 		}
 
@@ -177,9 +204,17 @@ function UploadFonts() {
 				{ notice && (
 					<Notice
 						status={ notice.type }
+						__unstableHTML
 						onRemove={ () => setNotice( null ) }
 					>
 						{ notice.message }
+						{ notice.errors && (
+							<ul>
+								{ notice.errors.map( ( error, index ) => (
+									<li key={ index }>{ error }</li>
+								) ) }
+							</ul>
+						) }
 					</Notice>
 				) }
 				{ isUploading && (
@@ -209,7 +244,7 @@ function UploadFonts() {
 				<Spacer margin={ 2 } />
 				<Text className="font-library-modal__upload-area__text">
 					{ __(
-						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .tff, .otf, .woff, and .woff2.'
+						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
 					) }
 				</Text>
 			</VStack>

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

@@ -121,7 +121,47 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 }
 
-export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+/*
+ * Unloads the font face and remove it from the browser.
+ * It also removes it from the iframe document.
+ *
+ * Note that Font faces that were added to the set using the CSS @font-face rule
+ * remain connected to the corresponding CSS, and cannot be deleted.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.
+ */
+export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) {
+	const unloadFontFace = ( fonts ) => {
+		fonts.forEach( ( f ) => {
+			if (
+				f.family === formatFontFaceName( fontFace.fontFamily ) &&
+				f.weight === fontFace.fontWeight &&
+				f.style === fontFace.fontStyle
+			) {
+				fonts.delete( f );
+			}
+		} );
+	};
+
+	if ( removeFrom === 'document' || removeFrom === 'all' ) {
+		unloadFontFace( document.fonts );
+	}
+
+	if ( removeFrom === 'iframe' || removeFrom === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		unloadFontFace( iframeDocument.fonts );
+	}
+}
+
+/**
+ * Retrieves the display source from a font face src.
+ *
+ * @param {string|string[]} input - The font face src.
+ * @return {string|undefined} The display source or undefined if the input is invalid.
+ */
+export function getDisplaySrcFromFontFace( input ) {
 	if ( ! input ) {
 		return;
 	}
@@ -132,9 +172,9 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	} else {
 		src = input;
 	}
-	// If it is a theme font, we need to make the url absolute
-	if ( src.startsWith( 'file:.' ) && urlPrefix ) {
-		src = src.replace( 'file:.', urlPrefix );
+	// It's expected theme fonts will already be loaded in the browser.
+	if ( src.startsWith( 'file:.' ) ) {
+		return;
 	}
 	if ( ! isUrlEncoded( src ) ) {
 		src = encodeURI( src );
@@ -219,7 +259,7 @@ export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
 			// Handle network errors or other fetch-related errors
 			results.errors.push( {
 				data: fontFacesData[ index ],
-				message: `Fetch error: ${ result.reason.message }`,
+				message: result.reason.message,
 			} );
 		}
 	} );

package/src/components/global-styles/font-library-modal/utils/test/getDisplaySrcFromFontFace.spec.js

@@ -21,33 +21,22 @@ describe( 'getDisplaySrcFromFontFace', () => {
 		);
 	} );
 
-	it( 'makes URL absolute when it starts with file:. and urlPrefix is given', () => {
-		const input = 'file:./font1';
-		const urlPrefix = 'http://example.com';
-		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
-			'http://example.com/font1'
-		);
-	} );
-
-	it( 'does not modify URL if it does not start with file:.', () => {
-		const input = [ 'http://some-other-place.com/font1' ];
-		const urlPrefix = 'http://example.com';
-		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
-			'http://some-other-place.com/font1'
-		);
+	it( 'return undefined when the url starts with file:', () => {
+		const input = 'file:./theme/assets/font1.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe( undefined );
 	} );
 
 	it( 'encodes the URL if it is not encoded', () => {
-		const input = 'file:./assets/font one with spaces.ttf';
+		const input = 'https://example.org/font one with spaces.ttf';
 		expect( getDisplaySrcFromFontFace( input ) ).toBe(
-			'file:./assets/font%20one%20with%20spaces.ttf'
+			'https://example.org/font%20one%20with%20spaces.ttf'
 		);
 	} );
 
 	it( 'does not encode the URL if it is already encoded', () => {
-		const input = 'file:./font%20one';
+		const input = 'https://example.org/fonts/font%20one.ttf';
 		expect( getDisplaySrcFromFontFace( input ) ).toBe(
-			'file:./font%20one'
+			'https://example.org/fonts/font%20one.ttf'
 		);
 	} );
 } );

package/src/components/keyboard-shortcuts/global.js

@@ -4,29 +4,41 @@
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function KeyboardShortcutsGlobal() {
 	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 		useSelect( coreStore );
+	const { hasNonPostEntityChanges } = useSelect( editorStore );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
 
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		const isDirty = !! dirtyEntityRecords.length;
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
 		const isSaving = dirtyEntityRecords.some( ( record ) =>
 			isSavingEntityRecord( record.kind, record.name, record.key )
 		);
-
-		if ( ! isSaving && isDirty ) {
-			setIsSaveViewOpened( true );
+		const _hasNonPostEntityChanges = hasNonPostEntityChanges();
+		const isViewMode = getCanvasMode() === 'view';
+		if (
+			( ! hasDirtyEntities || ! _hasNonPostEntityChanges || isSaving ) &&
+			! isViewMode
+		) {
+			return;
 		}
+		// At this point, we know that there are dirty entities, other than
+		// the edited post, and we're not in the process of saving, so open
+		// save view.
+		setIsSaveViewOpened( true );
 	} );
 
 	return null;

package/src/components/resizable-frame/index.js

@@ -300,6 +300,7 @@ function ResizableFrame( {
 			className={ classnames( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
 			} ) }
+			showHandle={ false } // Do not show the default handle, as we're using a custom one.
 		>
 			<motion.div
 				className="edit-site-resizable-frame__inner-content"