@wordpress/edit-site 5.28.4 → 5.28.6

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 {
@@ -494,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;
@@ -514,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 {
@@ -618,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;
@@ -678,7 +681,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #1e1e1e;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
   display: block;
   width: 100%;
 }
@@ -698,6 +700,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.28.4",
+	"version": "5.28.6",
 	"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.4",
-		"@wordpress/block-library": "^8.28.4",
-		"@wordpress/blocks": "^12.28.4",
-		"@wordpress/commands": "^0.22.3",
-		"@wordpress/components": "^26.0.3",
+		"@wordpress/block-editor": "^12.19.6",
+		"@wordpress/block-library": "^8.28.6",
+		"@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.4",
-		"@wordpress/core-data": "^6.28.4",
+		"@wordpress/core-commands": "^0.20.6",
+		"@wordpress/core-data": "^6.28.6",
 		"@wordpress/data": "^9.21.1",
-		"@wordpress/dataviews": "^0.5.4",
+		"@wordpress/dataviews": "^0.5.6",
 		"@wordpress/date": "^4.51.1",
 		"@wordpress/deprecated": "^3.51.1",
 		"@wordpress/dom": "^3.51.1",
-		"@wordpress/editor": "^13.28.4",
+		"@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.2",
-		"@wordpress/interface": "^5.28.3",
+		"@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.4",
-		"@wordpress/plugins": "^6.19.3",
-		"@wordpress/preferences": "^3.28.3",
+		"@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.4",
+		"@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.4",
+		"@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": "864c1c553cb284def3bd5c907998da45f5c143ea"
+	"gitHead": "7d2a00f1998a0a696694802725e523628f994cfc"
 }

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,
@@ -162,16 +163,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,115 +201,120 @@ 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 }`;
-				},
-				''
+			installationErrors = installationErrors.reduce(
+				( unique, item ) =>
+					unique.includes( item.message )
+						? unique
+						: [ ...unique, item.message ],
+				[]
 			);
 
-			// 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
-					)
+			if ( fontFamiliesToActivate.length > 0 ) {
+				// Activate the font family (add the font family to the global styles).
+				activateCustomFontFamilies( fontFamiliesToActivate );
+
+				// 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 ] );
+			if ( installationErrors.length > 0 ) {
+				const installError = new Error(
+					__( 'There was an error installing fonts.' )
+				);
 
-			// Save the global styles to the database.
-			saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
-				'settings.typography.fontFamilies',
-			] );
+				installError.installationErrors = installationErrors;
 
-			refreshLibrary();
-
-			if ( unsucessfullyInstalledFontFaces.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
-					)
-				);
+				throw installError;
 			}
 		} finally {
 			setIsInstalling( false );
@@ -371,18 +367,20 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newCustomFonts,
 		} );
+
+		if ( font.fontFace ) {
+			font.fontFace.forEach( ( face ) => {
+				unloadFontFaceInBrowser( face, 'all' );
+			} );
+		}
 	};
 
 	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 ) => {
@@ -410,13 +408,30 @@ 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 ) => {
 		// 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 +482,7 @@ function FontLibraryProvider( { children } ) {
 				isFontActivated,
 				getFontFacesActivated,
 				loadFontFaceAsset,
-				installFont,
+				installFonts,
 				uninstallFontFamily,
 				toggleActivateFont,
 				getAvailableFontsOutline,

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

@@ -77,7 +77,7 @@ function FontCollection( { slug } ) {
 	const {
 		collections,
 		getFontCollection,
-		installFont,
+		installFonts,
 		isInstalling,
 		notice,
 		setNotice,
@@ -214,7 +214,7 @@ function FontCollection( { slug } ) {
 		}
 
 		try {
-			await installFont( fontFamily );
+			await installFonts( [ fontFamily ] );
 			setNotice( {
 				type: 'success',
 				message: __( 'Fonts were installed successfully.' ),
@@ -277,12 +277,14 @@ function FontCollection( { slug } ) {
 			>
 				<NavigatorScreen path="/">
 					<HStack justify="space-between">
-						<Heading level={ 2 } size={ 13 }>
-							{ selectedCollection.name }
-						</Heading>
+						<VStack>
+							<Heading level={ 2 } size={ 13 }>
+								{ selectedCollection.name }
+							</Heading>
+							<Text>{ selectedCollection.description }</Text>
+						</VStack>
 						<ActionsComponent />
 					</HStack>
-					<Text>{ selectedCollection.description }</Text>
 					<Spacer margin={ 4 } />
 					<Flex>
 						<FlexItem>
@@ -456,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/index.js

@@ -6,6 +6,8 @@ import {
 	Modal,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -19,16 +21,15 @@ import { unlock } from '../../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const DEFAULT_TABS = [
-	{
-		id: 'installed-fonts',
-		title: __( 'Library' ),
-	},
-	{
-		id: 'upload-fonts',
-		title: __( 'Upload' ),
-	},
-];
+const DEFAULT_TAB = {
+	id: 'installed-fonts',
+	title: __( 'Library' ),
+};
+
+const UPLOAD_TAB = {
+	id: 'upload-fonts',
+	title: __( 'Upload' ),
+};
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { slug, name } ) => ( {
@@ -44,11 +45,17 @@ function FontLibraryModal( {
 	initialTabId = 'installed-fonts',
 } ) {
 	const { collections, setNotice } = useContext( FontLibraryContext );
+	const canUserCreate = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		return canUser( 'create', 'font-families' );
+	}, [] );
+
+	const tabs = [ DEFAULT_TAB ];
 
-	const tabs = [
-		...DEFAULT_TABS,
-		...tabsFromCollections( collections || [] ),
-	];
+	if ( canUserCreate ) {
+		tabs.push( UPLOAD_TAB );
+		tabs.push( ...tabsFromCollections( collections || [] ) );
+	}
 
 	// Reset notice when new tab is selected.
 	const onSelect = () => {

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

@@ -18,6 +18,8 @@ import {
 	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
@@ -49,9 +51,24 @@ function InstalledFonts() {
 		setNotice,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const customFontFamilyId =
+		libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
+
+	const canUserDelete = useSelect(
+		( select ) => {
+			const { canUser } = select( coreStore );
+			return (
+				customFontFamilyId &&
+				canUser( 'delete', 'font-families', customFontFamilyId )
+			);
+		},
+		[ customFontFamilyId ]
+	);
 
 	const shouldDisplayDeleteButton =
-		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
+		!! libraryFontSelected &&
+		libraryFontSelected?.source !== 'theme' &&
+		canUserDelete;
 
 	const handleUninstallClick = () => {
 		setIsConfirmDeleteOpen( true );