@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.0

package/src/components/canvas-loader/index.js

@@ -3,6 +3,8 @@
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,11 +21,20 @@ export default function CanvasLoader( { id } ) {
 	const { highlightedColors } = useStylesPreviewColors();
 	const indicatorColor =
 		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
+	const { elapsed, total } = useSelect( ( select ) => {
+		const selectorsByStatus = select( coreStore ).countSelectorsByStatus();
+		const resolving = selectorsByStatus.resolving ?? 0;
+		const finished = selectorsByStatus.finished ?? 0;
+		return {
+			elapsed: finished,
+			total: finished + resolving,
+		};
+	}, [] );
 
 	return (
 		<div className="edit-site-canvas-loader">
 			<Theme accent={ indicatorColor } background={ backgroundColor }>
-				<ProgressBar id={ id } />
+				<ProgressBar id={ id } max={ total } value={ elapsed } />
 			</Theme>
 		</div>
 	);

package/src/components/canvas-loader/style.scss

@@ -9,7 +9,7 @@
 	align-items: center;
 	justify-content: center;
 
-	animation: 0.5s ease 1s edit-site-canvas-loader__fade-in-animation;
+	animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 

package/src/components/editor/index.js

@@ -44,6 +44,7 @@ import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 
@@ -58,13 +59,6 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-const typeLabels = {
-	wp_template: __( 'Template' ),
-	wp_template_part: __( 'Template Part' ),
-	wp_block: __( 'Pattern' ),
-	wp_navigation: __( 'Navigation' ),
-};
-
 // Prevent accidental removal of certain blocks, asking the user for
 // confirmation.
 const blockRemovalRules = {
@@ -171,7 +165,8 @@ export default function Editor( { isLoading } ) {
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
 			getTitle(),
-			typeLabels[ editedPostType ] ?? typeLabels.wp_template
+			POST_TYPE_LABELS[ editedPostType ] ??
+				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
 		);
 	}
 

package/src/components/global-styles/dimensions-panel.js

@@ -33,6 +33,7 @@ export default function DimensionsPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
+	const [ userSettings ] = useGlobalSetting( '', undefined, 'user' );
 	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 
@@ -48,17 +49,20 @@ export default function DimensionsPanel() {
 	const styleWithLayout = useMemo( () => {
 		return {
 			...style,
-			layout: settings.layout,
+			layout: userSettings.layout,
 		};
-	}, [ style, settings.layout ] );
+	}, [ style, userSettings.layout ] );
 
 	const onChange = ( newStyle ) => {
 		const updatedStyle = { ...newStyle };
 		delete updatedStyle.layout;
 		setStyle( updatedStyle );
 
-		if ( newStyle.layout !== settings.layout ) {
-			const updatedSettings = { ...rawSettings, layout: newStyle.layout };
+		if ( newStyle.layout !== userSettings.layout ) {
+			const updatedSettings = {
+				...userSettings,
+				layout: newStyle.layout,
+			};
 
 			// Ensure any changes to layout definitions are not persisted.
 			if ( updatedSettings.layout?.definitions ) {

package/src/components/global-styles/font-families.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+	Tooltip,
+} from '@wordpress/components';
+import { typography } from '@wordpress/icons';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider, {
+	FontLibraryContext,
+} from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import Subtitle from './subtitle';
+
+function FontFamilies() {
+	const { modalTabOpen, toggleModal, themeFonts, customFonts } =
+		useContext( FontLibraryContext );
+
+	return (
+		<>
+			{ !! modalTabOpen && (
+				<FontLibraryModal
+					onRequestClose={ () => toggleModal() }
+					initialTabName={ modalTabOpen }
+				/>
+			) }
+
+			<VStack spacing={ 3 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<HStack justify="flex-end">
+						<Tooltip text={ __( 'Manage fonts' ) }>
+							<Button
+								onClick={ () =>
+									toggleModal( 'installed-fonts' )
+								}
+								aria-label={ __( 'Manage fonts' ) }
+								icon={ typography }
+								size={ 'small' }
+							/>
+						</Tooltip>
+					</HStack>
+				</HStack>
+				<ItemGroup isBordered isSeparated>
+					{ customFonts.map( ( font ) => (
+						<FontFamilyItem key={ font.slug } font={ font } />
+					) ) }
+					{ themeFonts.map( ( font ) => (
+						<FontFamilyItem key={ font.slug } font={ font } />
+					) ) }
+				</ItemGroup>
+			</VStack>
+		</>
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<FontFamilies { ...props } />
+	</FontLibraryProvider>
+);

package/src/components/global-styles/font-family-item.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { _n } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalItem as Item,
+	FlexItem,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './font-library-modal/context';
+import { getPreviewStyle } from './font-library-modal/utils';
+
+function FontFamilyItem( { font } ) {
+	const { handleSetLibraryFontSelected, toggleModal } =
+		useContext( FontLibraryContext );
+
+	const variantsCount = font?.fontFace?.length || 1;
+
+	const handleClick = () => {
+		handleSetLibraryFontSelected( font );
+		toggleModal( 'installed-fonts' );
+	};
+
+	const previewStyle = getPreviewStyle( font );
+
+	return (
+		<Item onClick={ handleClick }>
+			<HStack justify="space-between">
+				<FlexItem style={ previewStyle }>{ font.name }</FlexItem>
+				<FlexItem style={ { color: '#9e9e9e' } }>
+					{ variantsCount }{ ' ' }
+					{ _n( 'variant', 'variants', variantsCount ) }
+				</FlexItem>
+			</HStack>
+		</Item>
+	);
+}
+
+export default FontFamilyItem;

package/src/components/global-styles/font-library-modal/confirm-delete-dialog.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+
+function ConfirmDeleteDialog( {
+	font,
+	isConfirmDeleteOpen,
+	handleConfirmUninstall,
+	handleCancelUninstall,
+} ) {
+	return (
+		<ConfirmDialog
+			isOpen={ isConfirmDeleteOpen }
+			cancelButtonText={ __( 'No, keep the font' ) }
+			confirmButtonText={ __( 'Yes, uninstall' ) }
+			onCancel={ handleCancelUninstall }
+			onConfirm={ handleConfirmUninstall }
+		>
+			{ font &&
+				sprintf(
+					/* translators: %s: Name of the font. */
+					__(
+						'Would you like to remove %s and all its variants and assets?'
+					),
+					font.name
+				) }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmDeleteDialog;

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

@@ -0,0 +1,347 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useState, useEffect } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useEntityRecord,
+	useEntityRecords,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { fetchInstallFonts, fetchUninstallFonts } from './resolvers';
+import { unlock } from '../../../lock-unlock';
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+import {
+	setUIValuesNeeded,
+	mergeFontFamilies,
+	loadFontFaceInBrowser,
+	getDisplaySrcFromFontFace,
+	makeFormDataFromFontFamilies,
+} from './utils';
+import { toggleFont } from './utils/toggleFont';
+import getIntersectingFontFaces from './utils/get-intersecting-font-faces';
+
+export const FontLibraryContext = createContext( {} );
+
+function FontLibraryProvider( { children } ) {
+	const { __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits } =
+		useDispatch( coreStore );
+	const { globalStylesId } = useSelect( ( select ) => {
+		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
+		return { globalStylesId: __experimentalGetCurrentGlobalStylesId() };
+	} );
+
+	const globalStyles = useEntityRecord(
+		'root',
+		'globalStyles',
+		globalStylesId
+	);
+	const fontFamiliesHasChanges =
+		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ isInstalling, setIsInstalling ] = useState( false );
+	const [ refreshKey, setRefreshKey ] = useState( 0 );
+
+	const refreshLibrary = () => {
+		setRefreshKey( ( prevKey ) => prevKey + 1 );
+	};
+
+	const {
+		records: libraryPosts = [],
+		isResolving: isResolvingLibrary,
+		hasResolved: hasResolvedLibrary,
+	} = useEntityRecords( 'postType', 'wp_font_family', { refreshKey } );
+
+	const libraryFonts =
+		( libraryPosts || [] ).map( ( post ) =>
+			JSON.parse( post.content.raw )
+		) || [];
+
+	// Global Styles (settings) font families
+	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies'
+	);
+	// theme.json file font families
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+
+	// Save font families to the global styles post in the database.
+	const saveFontFamilies = () => {
+		saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
+			'settings.typography.fontFamilies',
+		] );
+	};
+
+	// Library Fonts
+	const [ modalTabOpen, setModalTabOpen ] = useState( false );
+	const [ libraryFontSelected, setLibraryFontSelected ] = useState( null );
+
+	const baseThemeFonts = baseFontFamilies?.theme
+		? baseFontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+
+	const themeFonts = fontFamilies?.theme
+		? fontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+
+	const customFonts = fontFamilies?.custom
+		? fontFamilies.custom
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+
+	const baseCustomFonts = libraryFonts
+		? libraryFonts
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+
+	useEffect( () => {
+		if ( ! modalTabOpen ) {
+			setLibraryFontSelected( null );
+		}
+	}, [ modalTabOpen ] );
+
+	const handleSetLibraryFontSelected = ( font ) => {
+		// If font is null, reset the selected font
+		if ( ! font ) {
+			setLibraryFontSelected( null );
+			return;
+		}
+
+		const fonts =
+			font.source === 'theme' ? baseThemeFonts : baseCustomFonts;
+
+		// Tries to find the font in the installed fonts
+		const fontSelected = fonts.find( ( f ) => f.slug === font.slug );
+		// If the font is not found (it is only defined in custom styles), use the font from custom styles
+		setLibraryFontSelected( {
+			...( fontSelected || font ),
+			source: font.source,
+		} );
+	};
+
+	const toggleModal = ( tabName ) => {
+		setModalTabOpen( tabName || null );
+	};
+
+	// 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 = Array.isArray( font?.fontFace )
+				? font?.fontFace.map(
+						( face ) => `${ face.fontStyle + face.fontWeight }`
+				  )
+				: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
+
+			acc[ font.slug ] = availableFontFaces;
+			return acc;
+		}, {} );
+		return outline;
+	};
+
+	const getActivatedFontsOutline = ( source ) => {
+		switch ( source ) {
+			case 'theme':
+				return getAvailableFontsOutline( themeFonts );
+			case 'custom':
+			default:
+				return getAvailableFontsOutline( customFonts );
+		}
+	};
+
+	const isFontActivated = ( slug, style, weight, source ) => {
+		if ( ! style && ! weight ) {
+			return !! getActivatedFontsOutline( source )[ slug ];
+		}
+		return !! getActivatedFontsOutline( source )[ slug ]?.includes(
+			style + weight
+		);
+	};
+
+	const getFontFacesActivated = ( slug, source ) => {
+		return getActivatedFontsOutline( source )[ slug ] || [];
+	};
+
+	async function installFonts( fonts ) {
+		setIsInstalling( true );
+		try {
+			// Prepare formData to install.
+			const formData = makeFormDataFromFontFamilies( fonts );
+			// Install the fonts (upload the font files to the server and create the post in the database).
+			const fontsInstalled = await fetchInstallFonts( formData );
+			// Get intersecting font faces between the fonts we tried to installed and the fonts that were installed
+			// (to avoid activating a non installed font).
+			const fontToBeActivated = getIntersectingFontFaces(
+				fontsInstalled,
+				fonts
+			);
+			// Activate the font families (add the font families to the global styles).
+			activateCustomFontFamilies( fontToBeActivated );
+			// Save the global styles to the database.
+			saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
+				'settings.typography.fontFamilies',
+			] );
+			refreshLibrary();
+			setIsInstalling( false );
+			return true;
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			createErrorNotice( __( 'Error installing fonts.' ), {
+				type: 'snackbar',
+			} );
+			setIsInstalling( false );
+			return false;
+		}
+	}
+
+	async function uninstallFont( font ) {
+		try {
+			// Uninstall the font (remove the font files from the server and the post from the database).
+			await fetchUninstallFonts( [ font ] );
+			// Deactivate the font family (remove the font family from the global styles).
+			deactivateFontFamily( font );
+			// Save the global styles to the database.
+			await saveSpecifiedEntityEdits(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				[ 'settings.typography.fontFamilies' ]
+			);
+			// Refresh the library (the the library font families from database).
+			refreshLibrary();
+			return true;
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			createErrorNotice( __( 'Error uninstalling fonts.' ), {
+				type: 'snackbar',
+			} );
+			return false;
+		}
+	}
+
+	const deactivateFontFamily = ( font ) => {
+		// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
+		// We want to save as active all the theme fonts at the beginning
+		const initialCustomFonts = fontFamilies?.[ font.source ] ?? [];
+		const newCustomFonts = initialCustomFonts.filter(
+			( f ) => f.slug !== font.slug
+		);
+		setFontFamilies( {
+			...fontFamilies,
+			[ font.source ]: newCustomFonts,
+		} );
+	};
+
+	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,
+		} );
+		// Add custom fonts to the browser.
+		fontsToAdd.forEach( ( font ) => {
+			font.fontFace.forEach( ( face ) => {
+				// Load font faces just in the iframe because they already are in the document.
+				loadFontFaceInBrowser(
+					face,
+					getDisplaySrcFromFontFace( face.src ),
+					'iframe'
+				);
+			} );
+		} );
+	};
+
+	const toggleActivateFont = ( font, face ) => {
+		// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
+		// We want to save as active all the theme fonts at the beginning
+		const initialFonts = fontFamilies?.[ font.source ] ?? [];
+		// Toggles the received font family or font face
+		const newFonts = toggleFont( font, face, initialFonts );
+		// Updates the font families activated in global settings:
+		setFontFamilies( {
+			...fontFamilies,
+			[ font.source ]: newFonts,
+		} );
+	};
+
+	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 );
+		// If the font is already loaded, don't load it again.
+		if ( loadedFontUrls.has( src ) ) return;
+		// Load the font in the browser.
+		loadFontFaceInBrowser( fontFace, src, 'document' );
+		// Add the font to the loaded fonts list.
+		loadedFontUrls.add( src );
+	};
+
+	return (
+		<FontLibraryContext.Provider
+			value={ {
+				libraryFontSelected,
+				handleSetLibraryFontSelected,
+				themeFonts,
+				baseThemeFonts,
+				customFonts,
+				baseCustomFonts,
+				isFontActivated,
+				getFontFacesActivated,
+				loadFontFaceAsset,
+				installFonts,
+				uninstallFont,
+				toggleActivateFont,
+				getAvailableFontsOutline,
+				modalTabOpen,
+				toggleModal,
+				refreshLibrary,
+				saveFontFamilies,
+				fontFamiliesHasChanges,
+				isResolvingLibrary,
+				hasResolvedLibrary,
+				isInstalling,
+			} }
+		>
+			{ children }
+		</FontLibraryContext.Provider>
+	);
+}
+
+export default FontLibraryProvider;

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

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { _n } from '@wordpress/i18n';
+import {
+	__experimentalText as Text,
+	Button,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FontDemo from './font-demo';
+import { getPreviewStyle } from './utils';
+
+function FontCard( { font, onClick, actionHandler, variantsText } ) {
+	const fakeFontFace = {
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontFamily: font.fontFamily,
+		fake: true,
+	};
+
+	const displayFontFace =
+		font.fontFace && font.fontFace.length
+			? font?.fontFace?.find(
+					( face ) =>
+						face.fontStyle === 'normal' && face.fontWeight === '400'
+			  ) || font.fontFace[ 0 ]
+			: fakeFontFace;
+
+	const demoStyle = getPreviewStyle( font );
+
+	const variantsCount = font.fontFace?.length || 1;
+
+	const style = {
+		cursor: !! onClick ? 'pointer' : 'default',
+	};
+
+	return (
+		<Button
+			onClick={ onClick }
+			style={ style }
+			className="font-library-modal__font-card"
+		>
+			<Flex justify="space-between" wrap={ false }>
+				<FontDemo
+					fontFace={ displayFontFace }
+					text={ font.name }
+					style={ demoStyle }
+				/>
+				<Flex justify="flex-end">
+					<FlexItem>
+						<Text className="font-library-modal__font-card__count">
+							{ variantsText ||
+								variantsCount +
+									' ' +
+									_n( 'variant', 'variants', variantsCount ) }
+						</Text>
+					</FlexItem>
+					<FlexItem>{ !! actionHandler && actionHandler }</FlexItem>
+				</Flex>
+			</Flex>
+		</Button>
+	);
+}
+
+export default FontCard;