@wordpress/edit-site 5.29.0 → 5.31.0

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

@@ -22,9 +22,17 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+
+	// Add padding so the focus state outline (box-shadow) of font list items is visible
+	.components-navigator-screen {
+		padding: 3px;
+	}
 }
 
 .font-library-modal__tabpanel-layout {
+
+	margin-top: $grid-unit-40;
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -47,6 +55,10 @@
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
+	&:hover {
+		background-color: $gray-100;
+	}
+
 	.font-library-modal__font-card__name {
 		font-weight: bold;
 	}
@@ -56,12 +68,6 @@
 	}
 }
 
-.font-library-modal__library-font-variant {
-	border: 1px solid $gray-200;
-	padding: $grid-unit-20;
-	margin-top: -1px; /* To collapse the margin with the previous element */
-}
-
 .font-library-modal__font-variant_demo-image {
 	display: block;
 	height: $grid-unit-30;
@@ -117,14 +123,24 @@ button.font-library-modal__upload-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	margin-top: $grid-unit-80;
+
+	p {
+		line-height: $default-line-height;
+	}
 
-	h3 {
-		font-size: 1.4rem;
+	h2 {
+		font-size: 1.2rem;
+		font-weight: 400;
 	}
 
 	.components-card {
-		width: 50%;
-		min-width: 250px;
-		max-width: 350px;
+		padding: $grid-unit-20;
+		width: 400px;
+	}
+
+	.components-button {
+		width: 100%;
+		justify-content: center;
 	}
 }

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

@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Button,
+	DropZone,
+	Notice,
 	FormFileUpload,
 	FlexItem,
 	privateApis as componentsPrivateApis,
@@ -22,13 +23,13 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import TabPanelLayout from './tab-panel-layout';
 import { unlock } from '../../../lock-unlock';
 
 const { ProgressBar } = unlock( componentsPrivateApis );
 
 function UploadFonts() {
-	const { installFont, notice, setNotice } = useContext( FontLibraryContext );
+	const { installFonts, notice, setNotice } =
+		useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
 
 	const handleDropZone = ( files ) => {
@@ -44,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 );
 		}
@@ -93,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 ) => {
@@ -143,19 +180,8 @@ function UploadFonts() {
 	const handleInstall = async ( fontFaces ) => {
 		const fontFamilies = makeFamiliesFromFaces( fontFaces );
 
-		if ( fontFamilies.length > 1 ) {
-			setNotice( {
-				type: 'error',
-				message: __(
-					'Variants from only one font family can be uploaded at a time.'
-				),
-			} );
-			setIsUploading( false );
-			return;
-		}
-
 		try {
-			await installFont( fontFamilies[ 0 ] );
+			await installFonts( fontFamilies );
 			setNotice( {
 				type: 'success',
 				message: __( 'Fonts were installed successfully.' ),
@@ -164,6 +190,7 @@ function UploadFonts() {
 			setNotice( {
 				type: 'error',
 				message: error.message,
+				errors: error?.installationErrors,
 			} );
 		}
 
@@ -171,9 +198,25 @@ function UploadFonts() {
 	};
 
 	return (
-		<TabPanelLayout notice={ notice }>
+		<div className="font-library-modal__tabpanel-layout">
 			<DropZone onFilesDrop={ handleDropZone } />
 			<VStack className="font-library-modal__local-fonts">
+				{ 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 && (
 					<FlexItem>
 						<div className="font-library-modal__upload-area">
@@ -186,7 +229,7 @@ function UploadFonts() {
 						accept={ ALLOWED_FILE_EXTENSIONS.map(
 							( ext ) => `.${ ext }`
 						).join( ',' ) }
-						multiple={ true }
+						multiple
 						onChange={ onFilesUpload }
 						render={ ( { openFileDialog } ) => (
 							<Button
@@ -201,11 +244,11 @@ 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>
-		</TabPanelLayout>
+		</div>
 	);
 }
 

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

@@ -121,7 +121,47 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 }
 
-export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+/*
+ * 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.
+ *
+ * @param {string|string[]} input - The font face src.
+ * @return {string|undefined} The display source or undefined if the input is invalid.
+ */
+export function getDisplaySrcFromFontFace( input ) {
 	if ( ! input ) {
 		return;
 	}
@@ -132,9 +172,9 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	} else {
 		src = input;
 	}
-	// If it is a theme font, we need to make the url absolute
-	if ( src.startsWith( 'file:.' ) && urlPrefix ) {
-		src = src.replace( 'file:.', urlPrefix );
+	// It's expected theme fonts will already be loaded in the browser.
+	if ( src.startsWith( 'file:.' ) ) {
+		return;
 	}
 	if ( ! isUrlEncoded( src ) ) {
 		src = encodeURI( src );
@@ -219,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
@@ -117,7 +121,8 @@ export function getFamilyPreviewStyle( family ) {
 	if ( family.fontFace ) {
 		//get all the font faces with normal style
 		const normalFaces = family.fontFace.filter(
-			( face ) => face.fontStyle.toLowerCase() === 'normal'
+			( face ) =>
+				face?.fontStyle && face.fontStyle.toLowerCase() === 'normal'
 		);
 		if ( normalFaces.length > 0 ) {
 			style.fontStyle = 'normal';

package/src/components/global-styles/font-library-modal/utils/test/getDisplaySrcFromFontFace.spec.js

@@ -21,33 +21,22 @@ describe( 'getDisplaySrcFromFontFace', () => {
 		);
 	} );
 
-	it( 'makes URL absolute when it starts with file:. and urlPrefix is given', () => {
-		const input = 'file:./font1';
-		const urlPrefix = 'http://example.com';
-		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
-			'http://example.com/font1'
-		);
-	} );
-
-	it( 'does not modify URL if it does not start with file:.', () => {
-		const input = [ 'http://some-other-place.com/font1' ];
-		const urlPrefix = 'http://example.com';
-		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
-			'http://some-other-place.com/font1'
-		);
+	it( 'return undefined when the url starts with file:', () => {
+		const input = 'file:./theme/assets/font1.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe( undefined );
 	} );
 
 	it( 'encodes the URL if it is not encoded', () => {
-		const input = 'file:./assets/font one with spaces.ttf';
+		const input = 'https://example.org/font one with spaces.ttf';
 		expect( getDisplaySrcFromFontFace( input ) ).toBe(
-			'file:./assets/font%20one%20with%20spaces.ttf'
+			'https://example.org/font%20one%20with%20spaces.ttf'
 		);
 	} );
 
 	it( 'does not encode the URL if it is already encoded', () => {
-		const input = 'file:./font%20one';
+		const input = 'https://example.org/fonts/font%20one.ttf';
 		expect( getDisplaySrcFromFontFace( input ) ).toBe(
-			'file:./font%20one'
+			'https://example.org/fonts/font%20one.ttf'
 		);
 	} );
 } );

package/src/components/global-styles/gradients-palette-panel.js

@@ -114,8 +114,8 @@ export default function GradientPalettePanel( { name } ) {
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }
-						disableCustomDuotone={ true }
-						disableCustomColors={ true }
+						disableCustomDuotone
+						disableCustomColors
 						clearable={ false }
 						onChange={ noop }
 					/>

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

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

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function HighlightedColors( {
+	normalizedColorSwatchSize,
+	ratio,
+} ) {
+	const { highlightedColors } = useStylesPreviewColors();
+	const scaledSwatchSize = normalizedColorSwatchSize * ratio;
+	return highlightedColors.map( ( { slug, color }, index ) => (
+		<motion.div
+			key={ slug }
+			style={ {
+				height: scaledSwatchSize,
+				width: scaledSwatchSize,
+				background: color,
+				borderRadius: scaledSwatchSize / 2,
+			} }
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: index === 1 ? 0.2 : 0.1,
+			} }
+		/>
+	) );
+}

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-colors.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import HighlightedColors from './highlighted-colors';
+import PreviewIframe from './preview-iframe';
+
+const firstFrameVariants = {
+	start: {
+		scale: 1,
+		opacity: 1,
+	},
+	hover: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
+	return (
+		<PreviewIframe
+			label={ label }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<motion.div
+					key={ key }
+					variants={ firstFrameVariants }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						<HighlightedColors
+							normalizedColorSwatchSize={ 66 }
+							ratio={ ratio }
+						/>
+					</HStack>
+				</motion.div>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default StylesPreviewColors;