@wordpress/edit-site 5.30.0 → 5.31.0

package/build-style/style-rtl.css

@@ -461,7 +461,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-wrapper {
-  width: 100%;
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
@@ -469,6 +468,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-filters__view-actions {
+  box-sizing: border-box;
   padding: 12px 32px 0;
   margin-bottom: 12px;
   flex-shrink: 0;
@@ -574,7 +574,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
-.dataviews-view-table tr:hover {
+.dataviews-view-table tr.is-hovered {
   background-color: #f8f8f8;
 }
 .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
@@ -583,7 +583,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .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 {
+.dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+  opacity: 0;
+}
+.dataviews-view-table tr:focus-within .components-checkbox-control__input,
+.dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .components-checkbox-control__input,
+.dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .components-checkbox-control__input,
+.dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
   opacity: 1;
 }
 .dataviews-view-table tr.is-selected {
@@ -1573,8 +1579,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-global-styles-preview__iframe {
-  max-width: 100%;
+  border-radius: 2px;
   display: block;
+  max-width: 100%;
+  width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -2575,37 +2583,33 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   }
 }
 
-.edit-site-sidebar-card {
-  display: flex;
-  align-items: flex-start;
-}
 .edit-site-sidebar-card__content {
   flex-grow: 1;
-  margin-bottom: 4px;
 }
 .edit-site-sidebar-card__title {
-  font-weight: 500;
-  line-height: 24px;
+  width: 100%;
 }
 .edit-site-sidebar-card__title.edit-site-sidebar-card__title {
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: 16px;
+  line-height: 24px;
   margin: 0;
-  padding: 3px 0;
 }
 .edit-site-sidebar-card__description {
   font-size: 13px;
+  color: #757575;
 }
 .edit-site-sidebar-card__icon {
   flex: 0 0 24px;
-  margin-left: 12px;
   width: 24px;
   height: 24px;
 }
 .edit-site-sidebar-card__header {
   display: flex;
   justify-content: space-between;
-  margin: 0 0 4px;
+  margin: 0 0 12px;
+}
+.edit-site-sidebar-card .edit-site-template-card__actions {
+  flex-shrink: 0;
 }
 
 .edit-site-template-card__template-areas {
@@ -3371,10 +3375,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 
 @media (min-width: 782px) {
-  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
     max-width: 292px;
   }
 }
+
+.edit-site-global-styles-variation-title {
+  color: #ddd;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview {
   box-shadow: 0 0 0 1px #1e1e1e;
 }
@@ -3519,15 +3531,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   fill: #4ab866;
 }
 
-.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
-  text-transform: uppercase;
-  color: #e0e0e0;
-  padding: 24px 16px 16px 6px;
-  border-top: 1px solid #2f2f2f;
-  font-size: 11px;
-  font-weight: 500;
-}
-
 .edit-site-sidebar-navigation-details-screen-panel {
   margin: 24px 0;
 }
@@ -4061,13 +4064,20 @@ button.font-library-modal__upload-area {
   align-items: center;
   margin-top: 64px;
 }
-.font-library__google-fonts-confirm h3 {
-  font-size: 1.4rem;
+.font-library__google-fonts-confirm p {
+  line-height: 1.4;
+}
+.font-library__google-fonts-confirm h2 {
+  font-size: 1.2rem;
+  font-weight: 400;
 }
 .font-library__google-fonts-confirm .components-card {
-  width: 50%;
-  min-width: 350px;
-  max-width: 400px;
+  padding: 16px;
+  width: 400px;
+}
+.font-library__google-fonts-confirm .components-button {
+  width: 100%;
+  justify-content: center;
 }
 
 .edit-site-pagination .components-button.is-tertiary {
@@ -4105,12 +4115,6 @@ button.font-library-modal__upload-area {
   outline-offset: 0;
 }
 
-.edit-site-global-styles_preview-typography {
-  font-size: 22px;
-  line-height: 44px;
-  text-align: center;
-}
-
 body.js #wpadminbar {
   display: none;
 }

package/build-style/style.css

@@ -461,7 +461,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-wrapper {
-  width: 100%;
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
@@ -469,6 +468,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-filters__view-actions {
+  box-sizing: border-box;
   padding: 12px 32px 0;
   margin-bottom: 12px;
   flex-shrink: 0;
@@ -574,7 +574,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
-.dataviews-view-table tr:hover {
+.dataviews-view-table tr.is-hovered {
   background-color: #f8f8f8;
 }
 .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
@@ -583,7 +583,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .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 {
+.dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+  opacity: 0;
+}
+.dataviews-view-table tr:focus-within .components-checkbox-control__input,
+.dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .components-checkbox-control__input,
+.dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .components-checkbox-control__input,
+.dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
   opacity: 1;
 }
 .dataviews-view-table tr.is-selected {
@@ -1573,8 +1579,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-global-styles-preview__iframe {
-  max-width: 100%;
+  border-radius: 2px;
   display: block;
+  max-width: 100%;
+  width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -2576,37 +2584,33 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   }
 }
 
-.edit-site-sidebar-card {
-  display: flex;
-  align-items: flex-start;
-}
 .edit-site-sidebar-card__content {
   flex-grow: 1;
-  margin-bottom: 4px;
 }
 .edit-site-sidebar-card__title {
-  font-weight: 500;
-  line-height: 24px;
+  width: 100%;
 }
 .edit-site-sidebar-card__title.edit-site-sidebar-card__title {
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: 16px;
+  line-height: 24px;
   margin: 0;
-  padding: 3px 0;
 }
 .edit-site-sidebar-card__description {
   font-size: 13px;
+  color: #757575;
 }
 .edit-site-sidebar-card__icon {
   flex: 0 0 24px;
-  margin-right: 12px;
   width: 24px;
   height: 24px;
 }
 .edit-site-sidebar-card__header {
   display: flex;
   justify-content: space-between;
-  margin: 0 0 4px;
+  margin: 0 0 12px;
+}
+.edit-site-sidebar-card .edit-site-template-card__actions {
+  flex-shrink: 0;
 }
 
 .edit-site-template-card__template-areas {
@@ -3372,10 +3376,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 
 @media (min-width: 782px) {
-  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
     max-width: 292px;
   }
 }
+
+.edit-site-global-styles-variation-title {
+  color: #ddd;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview {
   box-shadow: 0 0 0 1px #1e1e1e;
 }
@@ -3520,15 +3532,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   fill: #4ab866;
 }
 
-.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
-  text-transform: uppercase;
-  color: #e0e0e0;
-  padding: 24px 6px 16px 16px;
-  border-top: 1px solid #2f2f2f;
-  font-size: 11px;
-  font-weight: 500;
-}
-
 .edit-site-sidebar-navigation-details-screen-panel {
   margin: 24px 0;
 }
@@ -4062,13 +4065,20 @@ button.font-library-modal__upload-area {
   align-items: center;
   margin-top: 64px;
 }
-.font-library__google-fonts-confirm h3 {
-  font-size: 1.4rem;
+.font-library__google-fonts-confirm p {
+  line-height: 1.4;
+}
+.font-library__google-fonts-confirm h2 {
+  font-size: 1.2rem;
+  font-weight: 400;
 }
 .font-library__google-fonts-confirm .components-card {
-  width: 50%;
-  min-width: 350px;
-  max-width: 400px;
+  padding: 16px;
+  width: 400px;
+}
+.font-library__google-fonts-confirm .components-button {
+  width: 100%;
+  justify-content: center;
 }
 
 .edit-site-pagination .components-button.is-tertiary {
@@ -4106,12 +4116,6 @@ button.font-library-modal__upload-area {
   outline-offset: 0;
 }
 
-.edit-site-global-styles_preview-typography {
-  font-size: 22px;
-  line-height: 44px;
-  text-align: center;
-}
-
 body.js #wpadminbar {
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.30.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.53.0",
-		"@wordpress/api-fetch": "^6.50.0",
-		"@wordpress/blob": "^3.53.0",
-		"@wordpress/block-editor": "^12.21.0",
-		"@wordpress/block-library": "^8.30.0",
-		"@wordpress/blocks": "^12.30.0",
-		"@wordpress/commands": "^0.24.0",
-		"@wordpress/components": "^27.1.0",
-		"@wordpress/compose": "^6.30.0",
-		"@wordpress/core-commands": "^0.22.0",
-		"@wordpress/core-data": "^6.30.0",
-		"@wordpress/data": "^9.23.0",
-		"@wordpress/dataviews": "^0.7.0",
-		"@wordpress/date": "^4.53.0",
-		"@wordpress/deprecated": "^3.53.0",
-		"@wordpress/dom": "^3.53.0",
-		"@wordpress/editor": "^13.30.0",
-		"@wordpress/element": "^5.30.0",
-		"@wordpress/escape-html": "^2.53.0",
-		"@wordpress/hooks": "^3.53.0",
-		"@wordpress/html-entities": "^3.53.0",
-		"@wordpress/i18n": "^4.53.0",
-		"@wordpress/icons": "^9.44.0",
-		"@wordpress/interface": "^5.30.0",
-		"@wordpress/keyboard-shortcuts": "^4.30.0",
-		"@wordpress/keycodes": "^3.53.0",
-		"@wordpress/media-utils": "^4.44.0",
-		"@wordpress/notices": "^4.21.0",
-		"@wordpress/patterns": "^1.14.0",
-		"@wordpress/plugins": "^6.21.0",
-		"@wordpress/preferences": "^3.30.0",
-		"@wordpress/primitives": "^3.51.0",
-		"@wordpress/private-apis": "^0.35.0",
-		"@wordpress/reusable-blocks": "^4.30.0",
-		"@wordpress/router": "^0.22.0",
-		"@wordpress/style-engine": "^1.36.0",
-		"@wordpress/url": "^3.54.0",
-		"@wordpress/viewport": "^5.30.0",
-		"@wordpress/widgets": "^3.30.0",
-		"@wordpress/wordcount": "^3.53.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": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
+	"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';
@@ -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,13 +22,15 @@ import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
+import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode } = useSelect(
-		( select ) => {
-			const { getBlockCount } = select( blockEditorStore );
+	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
+		useSelect( ( select ) => {
+			const { getBlockCount, __unstableGetEditorMode } =
+				select( blockEditorStore );
 			const { getEditedPostType, getCanvasMode } = unlock(
 				select( editSiteStore )
 			);
@@ -37,12 +39,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			return {
 				templateType: _templateType,
 				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				canvasMode: getCanvasMode(),
 				hasBlocks: !! getBlockCount(),
 			};
-		},
-		[]
-	);
+		}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -102,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', {
@@ -110,7 +122,8 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				shouldZoom: true,
+				scale,
+				frameSize,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{

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/color-palette-panel.js

@@ -13,8 +13,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations/variations-color';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -47,12 +45,6 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-		filter: ( variation ) =>
-			variation?.settings?.color &&
-			Object.keys( variation?.settings?.color ).length,
-	} );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
@@ -85,9 +77,6 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
-			{ !! colorVariations.length && (
-				<ColorVariations variations={ colorVariations } />
-			) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }

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
@@ -274,8 +274,22 @@ function FontLibraryProvider( { children } ) {
 						...alreadyInstalledFontFaces,
 					];
 					fontFamiliesToActivate.push( fontFamilyToInstall );
-				} else if ( isANewFontFamily ) {
-					// If the font family is new, delete it to avoid having font families without font faces.
+				}
+
+				// 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 );
 				}
 
@@ -284,6 +298,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 );
@@ -300,18 +322,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 );
@@ -408,15 +425,15 @@ function FontLibraryProvider( { children } ) {
 
 		const isFaceActivated = isFontActivated(
 			font.slug,
-			face.fontStyle,
-			face.fontWeight,
+			face?.fontStyle,
+			face?.fontWeight,
 			font.source
 		);
 
 		if ( isFaceActivated ) {
 			loadFontFaceInBrowser(
 				face,
-				getDisplaySrcFromFontFace( face.src ),
+				getDisplaySrcFromFontFace( face?.src ),
 				'all'
 			);
 		} else {