@wordpress/edit-site 5.28.3 → 5.28.5

package/build-style/style-rtl.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -501,19 +502,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-filters__view-actions {
   padding: 12px 32px 0;
 }
-.dataviews-filters__view-actions .components-search-control {
-  flex-grow: 1;
-}
 .dataviews-filters__view-actions .components-search-control .components-base-control__field {
   max-width: 240px;
 }
 
 .dataviews-filters__container {
-  padding: 0 32px;
-}
-
-.dataviews-filters__view-actions.components-h-stack {
-  align-items: center;
+  padding-left: 32px;
 }
 
 .dataviews-filters-button {
@@ -532,6 +526,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #757575;
 }
 
+.dataviews-pagination__page-selection {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+}
+
 .dataviews-filters-options {
   margin: 32px 0 16px;
 }
@@ -602,10 +603,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table tr:hover {
   background-color: #f8f8f8;
 }
-.dataviews-view-table tr .components-checkbox-control__input {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
   opacity: 0;
 }
-.dataviews-view-table tr .components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input:focus {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
   opacity: 1;
 }
 .dataviews-view-table tr:focus-within .components-checkbox-control__input, .dataviews-view-table tr:hover .components-checkbox-control__input {
@@ -666,6 +667,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table .dataviews-view-table__actions-column {
   width: 1%;
 }
+.dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
+  opacity: 1;
+}
 
 .dataviews-view-list__primary-field,
 .dataviews-view-grid__primary-field,
@@ -675,7 +679,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #1e1e1e;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
   display: block;
   width: 100%;
 }
@@ -695,6 +698,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table__primary-field a:hover {
   color: #1e1e1e;
 }
+.dataviews-view-list__primary-field a:focus,
+.dataviews-view-grid__primary-field a:focus,
+.dataviews-view-table__primary-field a:focus {
+  color: var(--wp-admin-theme-color--rgb);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
+  border-radius: 2px;
+}
 .dataviews-view-list__primary-field button.components-button.is-link,
 .dataviews-view-grid__primary-field button.components-button.is-link,
 .dataviews-view-table__primary-field button.components-button.is-link {
@@ -1089,7 +1099,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-reset {
   padding-inline-end: 28px;
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip[aria-expanded=true] {
   background: #e0e0e0;
   color: #1e1e1e;
 }
@@ -1097,8 +1107,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: var(--wp-admin-theme-color);
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values[aria-expanded=true] {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
   outline: none;
@@ -4301,7 +4311,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   font-weight: 500;
   font-size: 11px;
 }
+.font-library-modal .components-navigator-screen {
+  padding: 3px;
+}
 
+.font-library-modal__tabpanel-layout {
+  margin-top: 32px;
+}
 .font-library-modal__tabpanel-layout .font-library-modal__tabpanel-layout__footer {
   border-top: 1px solid #ddd;
   margin: 0 -32px -32px;
@@ -4324,6 +4340,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   margin-top: -1px;
   /* To collapse the margin with the previous element */
 }
+.font-library-modal__font-card:hover {
+  background-color: #f0f0f0;
+}
 .font-library-modal__font-card .font-library-modal__font-card__name {
   font-weight: bold;
 }
@@ -4331,13 +4350,6 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   color: #757575;
 }
 
-.font-library-modal__library-font-variant {
-  border: 1px solid #e0e0e0;
-  padding: 16px;
-  margin-top: -1px;
-  /* To collapse the margin with the previous element */
-}
-
 .font-library-modal__font-variant_demo-image {
   display: block;
   height: 24px;
@@ -4395,14 +4407,15 @@ button.font-library-modal__upload-area {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 64px;
 }
 .font-library__google-fonts-confirm h3 {
   font-size: 1.4rem;
 }
 .font-library__google-fonts-confirm .components-card {
   width: 50%;
-  min-width: 250px;
-  max-width: 350px;
+  min-width: 350px;
+  max-width: 400px;
 }
 
 .edit-site-pagination .components-button.is-tertiary {

package/build-style/style.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -501,19 +502,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-filters__view-actions {
   padding: 12px 32px 0;
 }
-.dataviews-filters__view-actions .components-search-control {
-  flex-grow: 1;
-}
 .dataviews-filters__view-actions .components-search-control .components-base-control__field {
   max-width: 240px;
 }
 
 .dataviews-filters__container {
-  padding: 0 32px;
-}
-
-.dataviews-filters__view-actions.components-h-stack {
-  align-items: center;
+  padding-right: 32px;
 }
 
 .dataviews-filters-button {
@@ -532,6 +526,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #757575;
 }
 
+.dataviews-pagination__page-selection {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+}
+
 .dataviews-filters-options {
   margin: 32px 0 16px;
 }
@@ -602,10 +603,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table tr:hover {
   background-color: #f8f8f8;
 }
-.dataviews-view-table tr .components-checkbox-control__input {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
   opacity: 0;
 }
-.dataviews-view-table tr .components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input:focus {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
   opacity: 1;
 }
 .dataviews-view-table tr:focus-within .components-checkbox-control__input, .dataviews-view-table tr:hover .components-checkbox-control__input {
@@ -666,6 +667,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table .dataviews-view-table__actions-column {
   width: 1%;
 }
+.dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
+  opacity: 1;
+}
 
 .dataviews-view-list__primary-field,
 .dataviews-view-grid__primary-field,
@@ -675,7 +679,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #1e1e1e;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
   display: block;
   width: 100%;
 }
@@ -695,6 +698,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table__primary-field a:hover {
   color: #1e1e1e;
 }
+.dataviews-view-list__primary-field a:focus,
+.dataviews-view-grid__primary-field a:focus,
+.dataviews-view-table__primary-field a:focus {
+  color: var(--wp-admin-theme-color--rgb);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
+  border-radius: 2px;
+}
 .dataviews-view-list__primary-field button.components-button.is-link,
 .dataviews-view-grid__primary-field button.components-button.is-link,
 .dataviews-view-table__primary-field button.components-button.is-link {
@@ -1089,7 +1099,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-reset {
   padding-inline-end: 28px;
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip[aria-expanded=true] {
   background: #e0e0e0;
   color: #1e1e1e;
 }
@@ -1097,8 +1107,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: var(--wp-admin-theme-color);
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values[aria-expanded=true] {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
   outline: none;
@@ -4302,7 +4312,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   font-weight: 500;
   font-size: 11px;
 }
+.font-library-modal .components-navigator-screen {
+  padding: 3px;
+}
 
+.font-library-modal__tabpanel-layout {
+  margin-top: 32px;
+}
 .font-library-modal__tabpanel-layout .font-library-modal__tabpanel-layout__footer {
   border-top: 1px solid #ddd;
   margin: 0 -32px -32px;
@@ -4325,6 +4341,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   margin-top: -1px;
   /* To collapse the margin with the previous element */
 }
+.font-library-modal__font-card:hover {
+  background-color: #f0f0f0;
+}
 .font-library-modal__font-card .font-library-modal__font-card__name {
   font-weight: bold;
 }
@@ -4332,13 +4351,6 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   color: #757575;
 }
 
-.font-library-modal__library-font-variant {
-  border: 1px solid #e0e0e0;
-  padding: 16px;
-  margin-top: -1px;
-  /* To collapse the margin with the previous element */
-}
-
 .font-library-modal__font-variant_demo-image {
   display: block;
   height: 24px;
@@ -4396,14 +4408,15 @@ button.font-library-modal__upload-area {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 64px;
 }
 .font-library__google-fonts-confirm h3 {
   font-size: 1.4rem;
 }
 .font-library__google-fonts-confirm .components-card {
   width: 50%;
-  min-width: 250px;
-  max-width: 350px;
+  min-width: 350px;
+  max-width: 400px;
 }
 
 .edit-site-pagination .components-button.is-tertiary {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.28.3",
+	"version": "5.28.5",
 	"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.3",
-		"@wordpress/block-library": "^8.28.3",
-		"@wordpress/blocks": "^12.28.3",
-		"@wordpress/commands": "^0.22.2",
-		"@wordpress/components": "^26.0.2",
+		"@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/compose": "^6.28.1",
-		"@wordpress/core-commands": "^0.20.3",
-		"@wordpress/core-data": "^6.28.3",
+		"@wordpress/core-commands": "^0.20.5",
+		"@wordpress/core-data": "^6.28.5",
 		"@wordpress/data": "^9.21.1",
-		"@wordpress/dataviews": "^0.5.3",
+		"@wordpress/dataviews": "^0.5.5",
 		"@wordpress/date": "^4.51.1",
 		"@wordpress/deprecated": "^3.51.1",
 		"@wordpress/dom": "^3.51.1",
-		"@wordpress/editor": "^13.28.3",
+		"@wordpress/editor": "^13.28.5",
 		"@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.1",
-		"@wordpress/interface": "^5.28.2",
+		"@wordpress/icons": "^9.42.3",
+		"@wordpress/interface": "^5.28.4",
 		"@wordpress/keyboard-shortcuts": "^4.28.1",
 		"@wordpress/keycodes": "^3.51.1",
 		"@wordpress/media-utils": "^4.42.1",
 		"@wordpress/notices": "^4.19.1",
-		"@wordpress/patterns": "^1.12.3",
-		"@wordpress/plugins": "^6.19.2",
-		"@wordpress/preferences": "^3.28.2",
+		"@wordpress/patterns": "^1.12.5",
+		"@wordpress/plugins": "^6.19.4",
+		"@wordpress/preferences": "^3.28.4",
 		"@wordpress/primitives": "^3.49.1",
 		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/reusable-blocks": "^4.28.3",
+		"@wordpress/reusable-blocks": "^4.28.5",
 		"@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.3",
+		"@wordpress/widgets": "^3.28.5",
 		"@wordpress/wordcount": "^3.51.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
+	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
 }

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,7 +35,7 @@ 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 }
@@ -44,8 +44,8 @@ function CollectionFontVariant( {
 					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

@@ -162,16 +162,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,113 +200,115 @@ 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 );
+				} else if ( isANewFontFamily ) {
+					// If the font family is new, delete it to avoid having font families without font faces.
+					await fetchUninstallFontFamily( installedFontFamily.id );
+				}
+
+				installationErrors = installationErrors.concat(
+					unsucessfullyInstalledFontFaces
 				);
-				sucessfullyInstalledFontFaces = response?.successes;
-				unsucessfullyInstalledFontFaces = response?.errors;
 			}
 
-			const detailedErrorMessage = unsucessfullyInstalledFontFaces.reduce(
-				( errorMessageCollection, error ) => {
-					return `${ errorMessageCollection } ${ error.message }`;
-				},
-				''
-			);
+			if ( fontFamiliesToActivate.length > 0 ) {
+				// Activate the font family (add the font family to the global styles).
+				activateCustomFontFamilies( fontFamiliesToActivate );
 
-			// 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
-					)
+				// 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 ] );
-
-			// Save the global styles to the database.
-			saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
-				'settings.typography.fontFamilies',
-			] );
-
-			refreshLibrary();
-
-			if ( unsucessfullyInstalledFontFaces.length > 0 ) {
+			if ( installationErrors.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
+						__( 'There were some errors installing fonts. %s' ),
+						installationErrors.reduce(
+							( errorMessageCollection, error ) => {
+								return `${ errorMessageCollection } ${ error.message }`;
+							},
+							''
+						)
 					)
 				);
 			}
@@ -375,14 +367,10 @@ function FontLibraryProvider( { children } ) {
 
 	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 ) => {
@@ -416,7 +404,7 @@ function FontLibraryProvider( { children } ) {
 		// 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 +455,7 @@ function FontLibraryProvider( { children } ) {
 				isFontActivated,
 				getFontFacesActivated,
 				loadFontFaceAsset,
-				installFont,
+				installFonts,
 				uninstallFontFamily,
 				toggleActivateFont,
 				getAvailableFontsOutline,