@wordpress/edit-site 5.30.0 → 5.31.0

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

@@ -344,8 +344,9 @@ function FontCollection( { slug } ) {
 							size="small"
 							onClick={ () => {
 								setSelectedFont( null );
+								setNotice( null );
 							} }
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 						/>
 						<Heading
 							level={ 2 }
@@ -441,13 +442,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/google-fonts-confirm-dialog.js

@@ -6,6 +6,7 @@ import {
 	Button,
 	Card,
 	CardBody,
+	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
@@ -24,7 +25,9 @@ function GoogleFontsConfirmDialog() {
 		<div className="font-library__google-fonts-confirm">
 			<Card>
 				<CardBody>
-					<Text as="h3">{ __( 'Connect to Google Fonts' ) }</Text>
+					<Heading level={ 2 }>
+						{ __( 'Connect to Google Fonts' ) }
+					</Heading>
 					<Spacer margin={ 6 } />
 					<Text as="p">
 						{ __(
@@ -38,7 +41,11 @@ function GoogleFontsConfirmDialog() {
 						) }
 					</Text>
 					<Spacer margin={ 6 } />
-					<Button variant="primary" onClick={ handleConfirm }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ handleConfirm }
+					>
 						{ __( 'Allow access to Google Fonts' ) }
 					</Button>
 				</CardBody>

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

@@ -202,7 +202,7 @@ function InstalledFonts() {
 							onClick={ () => {
 								handleSetLibraryFontSelected( null );
 							} }
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 						/>
 						<Heading
 							level={ 2 }

package/src/components/global-styles/font-library-modal/style.scss

@@ -125,13 +125,22 @@ button.font-library-modal__upload-area {
 	align-items: center;
 	margin-top: $grid-unit-80;
 
-	h3 {
-		font-size: 1.4rem;
+	p {
+		line-height: $default-line-height;
+	}
+
+	h2 {
+		font-size: 1.2rem;
+		font-weight: 400;
 	}
 
 	.components-card {
-		width: 50%;
-		min-width: 350px;
-		max-width: 400px;
+		padding: $grid-unit-20;
+		width: 400px;
+	}
+
+	.components-button {
+		width: 100%;
+		justify-content: center;
 	}
 }

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

@@ -134,9 +134,9 @@ 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
+				f.family === formatFontFaceName( fontFace?.fontFamily ) &&
+				f.weight === fontFace?.fontWeight &&
+				f.style === fontFace?.fontStyle
 			) {
 				fonts.delete( f );
 			}
@@ -259,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/preview-styles.js

@@ -87,6 +87,10 @@ export function formatFontFamily( input ) {
  * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
  */
 export function formatFontFaceName( input ) {
+	if ( ! input ) {
+		return '';
+	}
+
 	let output = input.trim();
 	if ( output.includes( ',' ) ) {
 		output = output

package/src/components/global-styles/header.js

@@ -26,7 +26,7 @@ function ScreenHeader( { title, description, onBack } ) {
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 							onClick={ onBack }
 						/>
 						<Spacer>

package/src/components/global-styles/hooks.js

@@ -9,14 +9,21 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -92,3 +99,63 @@ export function useSupportedStyles( name, element ) {
 
 	return supportedPanels;
 }
+
+export function useColorVariations() {
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+	} );
+	/*
+	 * Filter out variations with no settings or styles.
+	 */
+	return colorVariations?.length
+		? colorVariations.filter( ( variation ) => {
+				const { settings, styles, title } = variation;
+				return (
+					title === __( 'Default' ) || // Always preseve the default variation.
+					Object.keys( settings ).length > 0 ||
+					Object.keys( styles ).length > 0
+				);
+		  } )
+		: [];
+}
+
+export function useTypographyVariations() {
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+		} );
+
+	const { base } = useContext( GlobalStylesContext );
+	/*
+	 * Filter duplicate variations based on whether the variaitons
+	 * have different heading and body font families.
+	 */
+	return typographyVariations?.length
+		? Object.values(
+				typographyVariations.reduce( ( acc, variation ) => {
+					const [ bodyFontFamily, headingFontFamily ] =
+						getFontFamilies(
+							mergeBaseAndUserConfigs( base, variation )
+						);
+
+					// Always preseve the default variation.
+					if ( variation?.title === 'Default' ) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					} else if (
+						headingFontFamily?.name &&
+						bodyFontFamily?.name &&
+						! acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						]
+					) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					}
+					return acc;
+				}, {} )
+		  )
+		: [];
+}

package/src/components/global-styles/preview-iframe.js

@@ -118,7 +118,6 @@ export default function PreviewIframe( {
 				<Iframe
 					className="edit-site-global-styles-preview__iframe"
 					style={ {
-						width: '100%',
 						height: normalizedHeight * ratio,
 					} }
 					onMouseEnter={ () => setIsHovered( true ) }

package/src/components/global-styles/preview-styles.js

@@ -13,7 +13,7 @@ import {
  */
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
-import PreviewTypography from './preview-typography';
+import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
 import PreviewIframe from './preview-iframe';
 
@@ -89,7 +89,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 							overflow: 'hidden',
 						} }
 					>
-						<PreviewTypography
+						<TypographyExample
 							fontSize={ 65 * ratio }
 							variation={ variation }
 						/>

package/src/components/global-styles/screen-colors.js

@@ -12,7 +12,6 @@ import ScreenHeader from './header';
 import Palette from './palette';
 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 {
 	useGlobalStyle,
@@ -31,12 +30,6 @@ function ScreenColors() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-		filter: ( variation ) =>
-			variation?.settings?.color &&
-			Object.keys( variation?.settings?.color ).length,
-	} );
 	return (
 		<>
 			<ScreenHeader
@@ -46,13 +39,9 @@ function ScreenColors() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 3 }>
-					{ !! colorVariations.length && (
-						<ColorVariations variations={ colorVariations } />
-					) }
-
+				<VStack spacing={ 6 }>
+					<ColorVariations />
 					<Palette />
-
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }
 						value={ style }

package/src/components/global-styles/screen-typography.js

@@ -13,7 +13,6 @@ import TypographyElements from './typography-elements';
 import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
@@ -21,14 +20,6 @@ function ScreenTypography() {
 			select( editorStore ).getEditorSettings().fontLibraryEnabled,
 		[]
 	);
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-			filter: ( variation ) =>
-				variation?.settings?.typography?.fontFamilies &&
-				Object.keys( variation?.settings?.typography?.fontFamilies )
-					.length,
-		} );
 
 	return (
 		<>
@@ -40,9 +31,7 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ !! typographyVariations.length && (
-						<TypographyVariations />
-					) }
+					<TypographyVariations />
 					{ ! window.__experimentalDisableFontLibrary && (
 						<VStack spacing={ 3 }>
 							{ fontLibraryEnabled && <FontFamilies /> }

package/src/components/global-styles/style.scss

@@ -7,8 +7,10 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	max-width: 100%;
+	border-radius: $radius-block-ui;
 	display: block;
+	max-width: 100%;
+	width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -165,3 +167,4 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
+

package/src/components/global-styles/typography-elements.js

@@ -35,6 +35,7 @@ function ElementItem( { parentMenu, element, label } ) {
 		prefix + 'typography.letterSpacing'
 	);
 	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
+	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text' );
 
@@ -54,7 +55,10 @@ function ElementItem( { parentMenu, element, label } ) {
 					className="edit-site-global-styles-screen-typography__indicator"
 					style={ {
 						fontFamily: fontFamily ?? 'serif',
-						background: gradientValue ?? backgroundColor,
+						background:
+							gradientValue ??
+							backgroundColor ??
+							fallbackBackgroundColor,
 						color,
 						fontStyle,
 						fontWeight,

package/src/components/global-styles/{preview-typography.js → typography-example.js}

@@ -37,7 +37,6 @@ export default function PreviewTypography( { fontSize, variation } ) {
 
 	return (
 		<motion.div
-			className="edit-site-global-styles_preview-typography"
 			animate={ {
 				scale: 1,
 				opacity: 1,
@@ -50,6 +49,9 @@ export default function PreviewTypography( { fontSize, variation } ) {
 				delay: 0.3,
 				type: 'tween',
 			} }
+			style={ {
+				textAlign: 'center',
+			} }
 		>
 			<span style={ headingPreviewStyle }>
 				{ _x( 'A', 'Uppercase letter A' ) }

package/src/components/global-styles/typography-preview.js

@@ -27,6 +27,7 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 		prefix + 'color.background',
 		name
 	);
+	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 	const [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );
 	const [ fontStyle ] = useGlobalStyle(
@@ -53,7 +54,8 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 			className="edit-site-typography-preview"
 			style={ {
 				fontFamily: fontFamily ?? 'serif',
-				background: gradientValue ?? backgroundColor,
+				background:
+					gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
 				color,
 				fontSize,
 				fontStyle,

package/src/components/global-styles/utils.js

@@ -12,7 +12,7 @@ export function getVariationClassName( variation ) {
 }
 
 function getFontFamilyFromSetting( fontFamilies, setting ) {
-	if ( ! setting ) {
+	if ( ! Array.isArray( fontFamilies ) || ! setting ) {
 		return null;
 	}
 

package/src/components/global-styles/variations/style.scss

@@ -36,9 +36,3 @@
 		outline-offset: 0;
 	}
 }
-
-.edit-site-global-styles_preview-typography {
-	font-size: 22px;
-	line-height: 44px;
-	text-align: center;
-}

package/src/components/global-styles/variations/variations-color.js

@@ -5,21 +5,25 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import Subtitle from '../subtitle';
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
+import { useColorVariations } from '../hooks';
+
+export default function ColorVariations() {
+	const colorVariations = useColorVariations();
+
+	if ( ! colorVariations?.length ) {
+		return null;
+	}
 
-export default function ColorVariations( { variations } ) {
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
 			<Grid columns={ 3 }>
-				{ variations.map( ( variation, index ) => (
+				{ colorVariations.map( ( variation, index ) => (
 					<Variation key={ index } variation={ variation }>
 						{ () => <StylesPreviewColors /> }
 					</Variation>