@wordpress/edit-site 5.28.5 → 5.28.7

package/build-style/style.css

@@ -495,12 +495,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-sizing: border-box;
   scroll-padding-bottom: 64px;
 }
-.dataviews-wrapper > div {
-  min-height: 100%;
-}
 
 .dataviews-filters__view-actions {
   padding: 12px 32px 0;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+  position: sticky;
+  left: 0;
 }
 .dataviews-filters__view-actions .components-search-control .components-base-control__field {
   max-width: 240px;
@@ -515,15 +516,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-pagination {
-  margin-top: auto;
   position: sticky;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  -webkit-backdrop-filter: blur(6px);
-          backdrop-filter: blur(6px);
+  left: 0;
+  background-color: #fff;
   padding: 12px 32px;
   border-top: 1px solid #f0f0f0;
   color: #757575;
+  flex-shrink: 0;
 }
 
 .dataviews-pagination__page-selection {
@@ -619,17 +619,19 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table tr.is-selected:hover {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
+.dataviews-view-table thead {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+}
 .dataviews-view-table thead tr {
   border: 0;
 }
 .dataviews-view-table thead th {
-  position: sticky;
-  top: -1px;
   background-color: #fff;
   box-shadow: inset 0 -1px 0 #f0f0f0;
   padding-top: 8px;
   padding-bottom: 8px;
-  z-index: 1;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.28.5",
+	"version": "5.28.7",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,42 +30,42 @@
 		"@wordpress/a11y": "^3.51.1",
 		"@wordpress/api-fetch": "^6.48.1",
 		"@wordpress/blob": "^3.51.1",
-		"@wordpress/block-editor": "^12.19.5",
-		"@wordpress/block-library": "^8.28.5",
-		"@wordpress/blocks": "^12.28.5",
-		"@wordpress/commands": "^0.22.4",
-		"@wordpress/components": "^26.0.4",
+		"@wordpress/block-editor": "^12.19.6",
+		"@wordpress/block-library": "^8.28.7",
+		"@wordpress/blocks": "^12.28.6",
+		"@wordpress/commands": "^0.22.5",
+		"@wordpress/components": "^26.0.5",
 		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-commands": "^0.20.5",
-		"@wordpress/core-data": "^6.28.5",
+		"@wordpress/core-commands": "^0.20.6",
+		"@wordpress/core-data": "^6.28.6",
 		"@wordpress/data": "^9.21.1",
-		"@wordpress/dataviews": "^0.5.5",
+		"@wordpress/dataviews": "^0.5.6",
 		"@wordpress/date": "^4.51.1",
 		"@wordpress/deprecated": "^3.51.1",
 		"@wordpress/dom": "^3.51.1",
-		"@wordpress/editor": "^13.28.5",
+		"@wordpress/editor": "^13.28.6",
 		"@wordpress/element": "^5.28.1",
 		"@wordpress/escape-html": "^2.51.1",
 		"@wordpress/hooks": "^3.51.1",
 		"@wordpress/html-entities": "^3.51.1",
 		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.3",
-		"@wordpress/interface": "^5.28.4",
+		"@wordpress/icons": "^9.42.4",
+		"@wordpress/interface": "^5.28.5",
 		"@wordpress/keyboard-shortcuts": "^4.28.1",
 		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/media-utils": "^4.42.1",
+		"@wordpress/media-utils": "^4.42.2",
 		"@wordpress/notices": "^4.19.1",
-		"@wordpress/patterns": "^1.12.5",
-		"@wordpress/plugins": "^6.19.4",
-		"@wordpress/preferences": "^3.28.4",
+		"@wordpress/patterns": "^1.12.6",
+		"@wordpress/plugins": "^6.19.5",
+		"@wordpress/preferences": "^3.28.5",
 		"@wordpress/primitives": "^3.49.1",
 		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/reusable-blocks": "^4.28.5",
+		"@wordpress/reusable-blocks": "^4.28.6",
 		"@wordpress/router": "^0.20.1",
 		"@wordpress/style-engine": "^1.34.1",
 		"@wordpress/url": "^3.52.1",
 		"@wordpress/viewport": "^5.28.1",
-		"@wordpress/widgets": "^3.28.5",
+		"@wordpress/widgets": "^3.28.6",
 		"@wordpress/wordcount": "^3.51.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "f9c196db2b8acef093488f0c5ef93cc50485cd6f"
 }

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/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,
@@ -283,6 +284,14 @@ function FontLibraryProvider( { children } ) {
 				);
 			}
 
+			installationErrors = installationErrors.reduce(
+				( unique, item ) =>
+					unique.includes( item.message )
+						? unique
+						: [ ...unique, item.message ],
+				[]
+			);
+
 			if ( fontFamiliesToActivate.length > 0 ) {
 				// Activate the font family (add the font family to the global styles).
 				activateCustomFontFamilies( fontFamiliesToActivate );
@@ -299,18 +308,13 @@ function FontLibraryProvider( { children } ) {
 			}
 
 			if ( installationErrors.length > 0 ) {
-				throw new Error(
-					sprintf(
-						/* translators: %s: Specific error message returned from server. */
-						__( 'There were some errors installing fonts. %s' ),
-						installationErrors.reduce(
-							( errorMessageCollection, error ) => {
-								return `${ errorMessageCollection } ${ error.message }`;
-							},
-							''
-						)
-					)
+				const installError = new Error(
+					__( 'There was an error installing fonts.' )
 				);
+
+				installError.installationErrors = installationErrors;
+
+				throw installError;
 			}
 		} finally {
 			setIsInstalling( false );
@@ -363,6 +367,12 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newCustomFonts,
 		} );
+
+		if ( font.fontFace ) {
+			font.fontFace.forEach( ( face ) => {
+				unloadFontFaceInBrowser( face, 'all' );
+			} );
+		}
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
@@ -398,6 +408,23 @@ 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 ) => {

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

@@ -458,13 +458,13 @@ function FontCollection( { slug } ) {
 							sprintf(
 								// translators: %s: Total number of pages.
 								_x(
-									'Page <CurrenPageControl /> of %s',
+									'Page <CurrentPageControl /> of %s',
 									'paging'
 								),
 								totalPages
 							),
 							{
-								CurrenPageControl: (
+								CurrentPageControl: (
 									<SelectControl
 										aria-label={ __( 'Current page' ) }
 										value={ page }

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

@@ -45,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 );
 		}
@@ -94,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 ) => {
@@ -154,6 +190,7 @@ function UploadFonts() {
 			setNotice( {
 				type: 'error',
 				message: error.message,
+				errors: error?.installationErrors,
 			} );
 		}
 
@@ -167,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 && (
@@ -199,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,6 +121,40 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 }
 
+/*
+ * 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.
  *
@@ -225,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/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;