@wordpress/edit-site 5.27.0 → 5.27.2

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

@@ -1,19 +1,214 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalSpacer as Spacer } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	DropZone,
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	FormFileUpload,
+	FlexItem,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import LocalFonts from './local-fonts';
+import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
+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 [ isUploading, setIsUploading ] = useState( false );
+	const supportedFormats =
+		ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
+			.map( ( extension ) => `.${ extension }` )
+			.join( ', ' ) +
+		` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;
+
+	const handleDropZone = ( files ) => {
+		handleFilesUpload( files );
+	};
+	const onFilesUpload = ( event ) => {
+		handleFilesUpload( event.target.files );
+	};
+
+	/**
+	 * Filters the selected files to only allow the ones with the allowed extensions
+	 *
+	 * @param {Array} files The files to be filtered
+	 * @return {void}
+	 */
+	const handleFilesUpload = ( files ) => {
+		setNotice( null );
+		setIsUploading( true );
+		const uniqueFilenames = new Set();
+		const selectedFiles = [ ...files ];
+		const allowedFiles = selectedFiles.filter( ( file ) => {
+			if ( uniqueFilenames.has( file.name ) ) {
+				return false; // Discard duplicates
+			}
+			// Eliminates files that are not 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 false; // Discard file extension not allowed
+		} );
+		if ( allowedFiles.length > 0 ) {
+			loadFiles( allowedFiles );
+		}
+	};
+
+	/**
+	 * Loads the selected files and reads the font metadata
+	 *
+	 * @param {Array} files The files to be loaded
+	 * @return {void}
+	 */
+	const loadFiles = async ( files ) => {
+		const fontFacesLoaded = await Promise.all(
+			files.map( async ( fontFile ) => {
+				const fontFaceData = await getFontFaceMetadata( fontFile );
+				await loadFontFaceInBrowser(
+					fontFaceData,
+					fontFaceData.file,
+					'all'
+				);
+				return fontFaceData;
+			} )
+		);
+		handleInstall( fontFacesLoaded );
+	};
+
+	// Create a function to read the file as array buffer
+	async function readFileAsArrayBuffer( file ) {
+		return new Promise( ( resolve, reject ) => {
+			const reader = new window.FileReader();
+			reader.readAsArrayBuffer( file );
+			reader.onload = () => resolve( reader.result );
+			reader.onerror = reject;
+		} );
+	}
+
+	const getFontFaceMetadata = async ( fontFile ) => {
+		const buffer = await readFileAsArrayBuffer( fontFile );
+		const fontObj = new Font( 'Uploaded Font' );
+		fontObj.fromDataBuffer( buffer, fontFile.name );
+		// Assuming that fromDataBuffer triggers onload event and returning a Promise
+		const onloadEvent = await new Promise(
+			( resolve ) => ( fontObj.onload = resolve )
+		);
+		const font = onloadEvent.detail.font;
+		const { name } = font.opentype.tables;
+		const fontName = name.get( 16 ) || name.get( 1 );
+		const isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );
+		const fontWeight =
+			font.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';
+		const isVariable = !! font.opentype.tables.fvar;
+		const weightAxis =
+			isVariable &&
+			font.opentype.tables.fvar.axes.find(
+				( { tag } ) => tag === 'wght'
+			);
+		const weightRange = weightAxis
+			? `${ weightAxis.minValue } ${ weightAxis.maxValue }`
+			: null;
+		return {
+			file: fontFile,
+			fontFamily: fontName,
+			fontStyle: isItalic ? 'italic' : 'normal',
+			fontWeight: weightRange || fontWeight,
+		};
+	};
+
+	/**
+	 * Creates the font family definition and sends it to the server
+	 *
+	 * @param {Array} fontFaces The font faces to be installed
+	 * @return {void}
+	 */
+	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 ] );
+			setNotice( {
+				type: 'success',
+				message: __( 'Fonts were installed successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message: error.message,
+			} );
+		}
+
+		setIsUploading( false );
+	};
+
 	return (
-		<>
-			<Spacer margin={ 8 } />
-			<LocalFonts />
-		</>
+		<TabPanelLayout notice={ notice }>
+			<DropZone onFilesDrop={ handleDropZone } />
+			<VStack className="font-library-modal__local-fonts">
+				{ isUploading && (
+					<FlexItem>
+						<div className="font-library-modal__upload-area">
+							<ProgressBar />
+						</div>
+					</FlexItem>
+				) }
+				{ ! isUploading && (
+					<FormFileUpload
+						accept={ ALLOWED_FILE_EXTENSIONS.map(
+							( ext ) => `.${ ext }`
+						).join( ',' ) }
+						multiple={ true }
+						onChange={ onFilesUpload }
+						render={ ( { openFileDialog } ) => (
+							<Button
+								className="font-library-modal__upload-area"
+								onClick={ openFileDialog }
+							>
+								<span>{ __( 'Upload font' ) }</span>
+							</Button>
+						) }
+					/>
+				) }
+				<Spacer margin={ 2 } />
+				<Text className="font-library-modal__upload-area__text">
+					{ sprintf(
+						/* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */
+						__(
+							'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'
+						),
+						supportedFormats
+					) }
+				</Text>
+			</VStack>
+		</TabPanelLayout>
 	);
 }
 

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

@@ -164,20 +164,24 @@ export function makeFontFacesFormData( font ) {
 		const fontFacesFormData = font.fontFace.map( ( face, faceIndex ) => {
 			const formData = new FormData();
 			if ( face.file ) {
-				// Slugified file name because the it might contain spaces or characters treated differently on the server.
-				const fileId = `file-${ faceIndex }`;
-				// Add the files to the formData
-				formData.append( fileId, face.file, face.file.name );
-				// remove the file object from the face object the file is referenced in src
-				const { file, ...faceWithoutFileProperty } = face;
-				const fontFaceSettings = {
-					...faceWithoutFileProperty,
-					src: fileId,
-				};
-				formData.append(
-					'font_face_settings',
-					JSON.stringify( fontFaceSettings )
-				);
+				// Normalize to an array, since face.file may be a single file or an array of files.
+				const files = Array.isArray( face.file )
+					? face.file
+					: [ face.file ];
+				const src = [];
+
+				files.forEach( ( file, key ) => {
+					// Slugified file name because the it might contain spaces or characters treated differently on the server.
+					const fileId = `file-${ faceIndex }-${ key }`;
+					// Add the files to the formData
+					formData.append( fileId, file, file.name );
+					src.push( fileId );
+				} );
+
+				face.src = src.length === 1 ? src[ 0 ] : src;
+				delete face.file;
+
+				formData.append( 'font_face_settings', JSON.stringify( face ) );
 			} else {
 				formData.append( 'font_face_settings', JSON.stringify( face ) );
 			}
@@ -225,31 +229,33 @@ export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
 /*
  * Downloads a font face asset from a URL to the client and returns a File object.
  */
-export async function downloadFontFaceAsset( url ) {
-	return fetch( new Request( url ) )
-		.then( ( response ) => {
-			if ( ! response.ok ) {
-				throw new Error(
-					`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`
-				);
-			}
-			return response.blob();
-		} )
-		.then( ( blob ) => {
-			const filename = url.split( '/' ).pop();
-			const file = new File( [ blob ], filename, {
-				type: blob.type,
-			} );
-			return file;
+export async function downloadFontFaceAssets( src ) {
+	// Normalize to an array, since `src` could be a string or array.
+	src = Array.isArray( src ) ? src : [ src ];
+
+	const files = await Promise.all(
+		src.map( async ( url ) => {
+			return fetch( new Request( url ) )
+				.then( ( response ) => {
+					if ( ! response.ok ) {
+						throw new Error(
+							`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`
+						);
+					}
+					return response.blob();
+				} )
+				.then( ( blob ) => {
+					const filename = url.split( '/' ).pop();
+					const file = new File( [ blob ], filename, {
+						type: blob.type,
+					} );
+					return file;
+				} );
 		} )
-		.catch( ( error ) => {
-			// eslint-disable-next-line no-console
-			console.error(
-				`Error downloading font face asset from ${ url }:`,
-				error
-			);
-			throw error;
-		} );
+	);
+
+	// If we only have one file return it (not the array).  Otherwise return all of them in the array.
+	return files.length === 1 ? files[ 0 ] : files;
 }
 
 /*

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

@@ -109,6 +109,16 @@ function ScreenBlock( { name, variation } ) {
 		settings.spacing.blockGap = false;
 	}
 
+	// Only allow `aspectRatio` support if the block is not the grouping block.
+	// The grouping block allows the user to use Group, Row and Stack variations,
+	// and it is highly likely that the user will not want to set an aspect ratio
+	// for all three at once. Until there is the ability to set a different aspect
+	// ratio for each variation, we disable the aspect ratio controls for the
+	// grouping block in global styles.
+	if ( settings?.dimensions?.aspectRatio && name === 'core/group' ) {
+		settings.dimensions.aspectRatio = false;
+	}
+
 	const blockVariations = useBlockVariations( name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );

package/src/components/routes/link.js

@@ -22,7 +22,7 @@ export function getPostLinkProps(
 	shouldReplace = false
 ) {
 	function onClick( event ) {
-		event.preventDefault();
+		event?.preventDefault();
 
 		if ( shouldReplace ) {
 			history.replace( params, state );

package/src/components/sidebar-edit-mode/index.js

@@ -8,7 +8,6 @@ import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -49,9 +48,7 @@ export function SidebarComplementaryAreaFills() {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
-			isEditingPage:
-				select( editSiteStore ).isPage() &&
-				select( editorStore ).getRenderingMode() !== 'template-only',
+			isEditingPage: select( editSiteStore ).isPage(),
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -17,23 +17,12 @@ import { store as editorStore } from '@wordpress/editor';
  */
 import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
-import { store as editSiteStore } from '../../../store';
-import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants';
 
 const SettingsHeader = ( { sidebarName } ) => {
-	const { isEditingPage, entityType } = useSelect( ( select ) => {
-		const { getEditedPostType, isPage } = select( editSiteStore );
-		const { getRenderingMode } = select( editorStore );
-
-		return {
-			isEditingPage: isPage() && getRenderingMode() !== 'template-only',
-			entityType: getEditedPostType(),
-		};
-	} );
-
-	const entityLabel =
-		POST_TYPE_LABELS[ entityType ] ||
-		POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ];
+	const postTypeLabel = useSelect(
+		( select ) => select( editorStore ).getPostTypeLabel(),
+		[]
+	);
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>
@@ -41,22 +30,11 @@ const SettingsHeader = ( { sidebarName } ) => {
 	const openBlockSettings = () =>
 		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 
-	let templateAriaLabel;
-	if ( isEditingPage ) {
-		templateAriaLabel =
-			sidebarName === SIDEBAR_TEMPLATE
-				? // translators: ARIA label for the Template sidebar tab, selected.
-				  __( 'Page (selected)' )
-				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-				  __( 'Page' );
-	} else {
-		templateAriaLabel =
-			sidebarName === SIDEBAR_TEMPLATE
-				? // translators: ARIA label for the Template sidebar tab, selected.
-				  sprintf( __( '%s (selected)' ), entityLabel )
-				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-				  entityLabel;
-	}
+	const documentAriaLabel =
+		sidebarName === SIDEBAR_TEMPLATE
+			? // translators: ARIA label for the Template sidebar tab, selected.
+			  sprintf( __( '%s (selected)' ), postTypeLabel )
+			: postTypeLabel;
 
 	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
@@ -70,10 +48,10 @@ const SettingsHeader = ( { sidebarName } ) => {
 							'is-active': sidebarName === SIDEBAR_TEMPLATE,
 						}
 					) }
-					aria-label={ templateAriaLabel }
-					data-label={ isEditingPage ? __( 'Page' ) : entityLabel }
+					aria-label={ documentAriaLabel }
+					data-label={ postTypeLabel }
 				>
-					{ isEditingPage ? __( 'Page' ) : entityLabel }
+					{ postTypeLabel }
 				</Button>
 			</li>
 			<li>

package/src/components/welcome-guide/template.js

@@ -25,12 +25,12 @@ export default function WelcomeGuideTemplate() {
 			'welcomeGuide'
 		);
 		const { isPage } = select( editSiteStore );
-		const { getRenderingMode } = select( editorStore );
+		const { getCurrentPostType } = select( editorStore );
 		return (
 			isTemplateActive &&
 			! isEditorActive &&
 			isPage() &&
-			getRenderingMode() === 'template-only'
+			getCurrentPostType() === 'wp_template'
 		);
 	}, [] );
 

package/src/hooks/commands/use-edit-mode-commands.js

@@ -38,22 +38,34 @@ import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { useLink } from '../../components/routes/link';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
 	const { record: template } = useEditedEntityRecord();
-	const { isPage, canvasMode, renderingMode } = useSelect( ( select ) => {
-		const { isPage: _isPage, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const { getRenderingMode } = select( editorStore );
-		return {
-			isPage: _isPage(),
-			canvasMode: getCanvasMode(),
-			renderingMode: getRenderingMode(),
-		};
-	}, [] );
+	const { isPage, canvasMode, templateId, currentPostType } = useSelect(
+		( select ) => {
+			const { isPage: _isPage, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const { getCurrentPostType, getCurrentTemplateId } =
+				select( editorStore );
+			return {
+				isPage: _isPage(),
+				canvasMode: getCanvasMode(),
+				templateId: getCurrentTemplateId(),
+				currentPostType: getCurrentPostType(),
+			};
+		},
+		[]
+	);
+
+	const { onClick: editTemplate } = useLink( {
+		postType: 'wp_template',
+		postId: templateId,
+	} );
+
 	const { setRenderingMode } = useDispatch( editorStore );
 
 	if ( ! isPage || canvasMode !== 'edit' ) {
@@ -62,7 +74,7 @@ function usePageContentFocusCommands() {
 
 	const commands = [];
 
-	if ( renderingMode !== 'template-only' ) {
+	if ( currentPostType !== 'wp_template' ) {
 		commands.push( {
 			name: 'core/switch-to-template-focus',
 			/* translators: %1$s: template title */
@@ -72,7 +84,7 @@ function usePageContentFocusCommands() {
 			),
 			icon: layout,
 			callback: ( { close } ) => {
-				setRenderingMode( 'template-only' );
+				editTemplate();
 				close();
 			},
 		} );
@@ -129,7 +141,7 @@ function useManipulateDocumentCommands() {
 	const isEditingPage = useSelect(
 		( select ) =>
 			select( editSiteStore ).isPage() &&
-			select( editorStore ).getRenderingMode() !== 'template-only',
+			select( editorStore ).getCurrentPostType() !== 'wp_template',
 		[]
 	);