@wordpress/edit-site 5.27.1 → 5.28.0

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

@@ -1,19 +1,205 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalSpacer as Spacer } from '@wordpress/components';
+import { __ } 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 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 }
+							>
+								{ __( 'Upload font' ) }
+							</Button>
+						) }
+					/>
+				) }
+				<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.'
+					) }
+				</Text>
+			</VStack>
+		</TabPanelLayout>
 	);
 }
 

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

@@ -161,23 +161,28 @@ export function makeFontFamilyFormData( fontFamily ) {
 
 export function makeFontFacesFormData( font ) {
 	if ( font?.fontFace ) {
-		const fontFacesFormData = font.fontFace.map( ( face, faceIndex ) => {
+		const fontFacesFormData = font.fontFace.map( ( item, faceIndex ) => {
+			const face = { ...item };
 			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 +230,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

@@ -64,7 +64,6 @@ const {
 	useGlobalSetting,
 	useSettingsForBlockElement,
 	useHasColorPanel,
-	useHasEffectsPanel,
 	useHasFiltersPanel,
 	useHasImageSettingsPanel,
 	useGlobalStyle,
@@ -72,7 +71,6 @@ const {
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
 	DimensionsPanel: StylesDimensionsPanel,
-	EffectsPanel: StylesEffectsPanel,
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
@@ -124,7 +122,6 @@ function ScreenBlock( { name, variation } ) {
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
 	const hasImageSettingsPanel = useHasImageSettingsPanel(
 		name,
@@ -279,15 +276,6 @@ function ScreenBlock( { name, variation } ) {
 					settings={ settings }
 				/>
 			) }
-			{ hasEffectsPanel && (
-				<StylesEffectsPanel
-					inheritedValue={ inheritedStyleWithLayout }
-					value={ styleWithLayout }
-					onChange={ setStyle }
-					settings={ settings }
-					includeLayoutControls
-				/>
-			) }
 			{ hasFiltersPanel && (
 				<StylesFiltersPanel
 					inheritedValue={ inheritedStyleWithLayout }

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -36,7 +36,7 @@ function ChangesSummary( { revision, previousRevision } ) {
 			data-testid="global-styles-revision-changes"
 			className="edit-site-global-styles-screen-revisions__changes"
 		>
-			{ changes.join( ', ' ) }
+			{ changes.join( ', ' ) }.
 		</span>
 	);
 }

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

@@ -41,6 +41,7 @@
 		// This border serves as a background color in Windows High Contrast mode.
 		border: 4px solid transparent;
 	}
+
 	&.is-selected {
 		border-radius: $radius-block-ui;
 
@@ -48,9 +49,26 @@
 		outline: 3px solid transparent;
 		outline-offset: -2px;
 
+		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+		.edit-site-global-styles-screen-revisions__revision-button {
+			opacity: 1;
+		}
+
+		.edit-site-global-styles-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+
 		&::before {
 			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		}
+
+		.edit-site-global-styles-screen-revisions__changes,
+		.edit-site-global-styles-screen-revisions__meta,
+		.edit-site-global-styles-screen-revisions__applied-text {
+			color: $gray-900;
+		}
 	}
 
 	&::after {
@@ -81,17 +99,6 @@
 	}
 }
 
-.is-selected {
-	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-	.edit-site-global-styles-screen-revisions__revision-button {
-		opacity: 1;
-	}
-	.edit-site-global-styles-screen-revisions__date {
-		color: var(--wp-admin-theme-color);
-	}
-}
-
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
 .edit-site-global-styles-screen-revisions__applied-text {
 	align-self: flex-start;
@@ -99,10 +106,11 @@
 	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 
+.edit-site-global-styles-screen-revisions__changes,
+.edit-site-global-styles-screen-revisions__meta,
 .edit-site-global-styles-screen-revisions__applied-text {
-	color: $gray-600;
+	color: $gray-700;
 	font-size: 12px;
-	font-style: italic;
 }
 
 .edit-site-global-styles-screen-revisions__description {
@@ -119,12 +127,10 @@
 
 .edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
-	color: $gray-600;
 	display: flex;
 	justify-content: start;
 	width: 100%;
 	align-items: flex-start;
-	font-size: 12px;
 	text-align: left;
 	img {
 		width: $grid-unit-20;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -67,9 +67,7 @@ function ScreenTypographyElement( { element } ) {
 					>
 						<ToggleGroupControlOption
 							value="heading"
-							/* translators: 'All' refers to selecting all heading levels 
-							and applying the same style to h1-h6. */
-							label={ __( 'All' ) }
+							label={ _x( 'All', 'heading levels' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h1"

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

@@ -46,6 +46,10 @@
 	color: $gray-700;
 }
 
+.edit-site-global-styles-font-families__add-fonts {
+	justify-content: center;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 

package/src/components/header-edit-mode/more-menu/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { external } from '@wordpress/icons';
 import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
@@ -15,7 +15,7 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -33,25 +33,16 @@ import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
-import { store as siteEditorStore } from '../../../store';
+import { store as editSiteStore } from '../../../store';
 
 export default function MoreMenu( { showIconLabels } ) {
-	const registry = useRegistry();
-
-	const { closeGeneralSidebar } = useDispatch( siteEditorStore );
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editorStore );
 	const { openModal } = useDispatch( interfaceStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
 
-	const toggleDistractionFree = () => {
-		registry.batch( () => {
-			setPreference( 'core', 'fixedToolbar', true );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-		} );
-	};
+	const { toggleDistractionFree } = useDispatch( editSiteStore );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
@@ -86,9 +77,10 @@ export default function MoreMenu( { showIconLabels } ) {
 							<PreferenceToggleMenuItem
 								scope="core"
 								name="distractionFree"
-								onToggle={ toggleDistractionFree }
 								label={ __( 'Distraction free' ) }
 								info={ __( 'Write with calmness' ) }
+								handleToggling={ false }
+								onToggle={ toggleDistractionFree }
 								messageActivated={ __(
 									'Distraction free mode activated'
 								) }
@@ -120,7 +112,7 @@ export default function MoreMenu( { showIconLabels } ) {
 							fillProps={ { onClick: onClose } }
 						/>
 						<MenuGroup label={ __( 'Tools' ) }>
-							<SiteExport />
+							{ isBlockBasedTheme && <SiteExport /> }
 							<MenuItem
 								onClick={ () =>
 									openModal(

package/src/components/header-edit-mode/style.scss

@@ -86,7 +86,13 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__actions {
 	display: inline-flex;
 	align-items: center;
-	padding-right: $grid-unit-10;
+	flex-wrap: nowrap;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-10;
+	}
+
 	gap: $grid-unit-10;
 }
 
@@ -149,9 +155,9 @@ $header-toolbar-min-width: 335px;
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
+			height: $grid-unit-30;
 			background-color: $gray-300;
+			margin-top: $grid-unit-05;
 			margin-left: $grid-unit;
 		}
 
@@ -168,10 +174,36 @@ $header-toolbar-min-width: 335px;
 
 .has-fixed-toolbar {
 	.selected-block-tools-wrapper {
-		overflow-x: scroll;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		height: $header-height;
 
 		.block-editor-block-contextual-toolbar {
 			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.block-editor-block-toolbar {
+			height: 100%;
+			// Push down so that buttons are centered vertically.
+			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
+		}
+
+		&::after {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
 		}
 
 		// Modified group borders.
@@ -182,9 +214,9 @@ $header-toolbar-min-width: 335px;
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit-15;
-				margin-bottom: $grid-unit-15;
+				height: $grid-unit-30;
 				background-color: $gray-300;
+				margin-top: $grid-unit-05;
 				margin-left: $grid-unit;
 			}
 
@@ -195,6 +227,22 @@ $header-toolbar-min-width: 335px;
 			}
 		}
 
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}

package/src/components/layout/style.scss

@@ -19,15 +19,10 @@
 	}
 
 	.edit-site-layout.is-full-canvas & {
-		padding-right: $grid-unit-20;
+		padding-right: 0;
 		border-radius: 0;
-		width: 100vw;
+		width: $header-height;
 		box-shadow: none;
-
-		@include break-medium {
-			width: $header-height;
-			padding-right: 0;
-		}
 	}
 }
 

package/src/components/page/style.scss

@@ -27,7 +27,6 @@
 .edit-site-page-content {
 	height: 100%;
 	display: flex;
-	overflow: auto;
 	flex-flow: column;
 	position: relative;
 	z-index: z-index(".edit-site-page-content");