@wordpress/edit-site 5.19.1 → 5.19.3

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

@@ -92,11 +92,24 @@
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: 100px;
+	height: 250px;
 	width: 100%;
 	background-color: #f0f0f0;
 }
 
+.font-library-modal__local-fonts {
+	margin: 0 auto;
+	width: 80%;
+
+	.font-library-modal__upload-area__text {
+		color: #6e6e6e;
+	}
+
+	.font-library-modal__upload-area__notice {
+		margin: 0;
+	}
+}
+
 .font-library-modal__font-name {
 	font-weight: bold;
 }
@@ -137,3 +150,7 @@
 		max-width: 350px;
 	}
 }
+
+.font-library-modal__font-collection__notice {
+	margin: 0;
+}

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

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LocalFonts from './local-fonts';
+
+function UploadFonts() {
+	return (
+		<>
+			<Spacer margin={ 8 } />
+			<LocalFonts />
+		</>
+	);
+}
+
+export default UploadFonts;

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

@@ -15,7 +15,8 @@ export function getFontsOutline( fonts ) {
 }
 
 export function isFontFontFaceInOutline( slug, face, outline ) {
-	return (
-		outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ] || false
-	);
+	if ( ! face ) {
+		return !! outline[ slug ];
+	}
+	return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
 }

package/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export function getNoticeFromInstallResponse( response ) {
+	const { errors = [], successes = [] } = response;
+	// Everything failed.
+	if ( errors.length && ! successes.length ) {
+		return {
+			type: 'error',
+			message: __( 'Error installing the fonts.' ),
+		};
+	}
+
+	// Eveerything succeeded.
+	if ( ! errors.length && successes.length ) {
+		return {
+			type: 'success',
+			message: __( 'Fonts were installed successfully.' ),
+		};
+	}
+
+	// Some succeeded, some failed.
+	if ( errors.length && successes.length ) {
+		return {
+			type: 'warning',
+			message: __(
+				'Some fonts were installed successfully and some failed.'
+			),
+		};
+	}
+}
+
+export function getNoticeFromUninstallResponse( response ) {
+	const { errors = [], successes = [] } = response;
+	// Everything failed.
+	if ( errors.length && ! successes.length ) {
+		return {
+			type: 'error',
+			message: __( 'Error uninstalling the fonts.' ),
+		};
+	}
+
+	// Everything succeeded.
+	if ( ! errors.length && successes.length ) {
+		return {
+			type: 'success',
+			message: __( 'Fonts were uninstalled successfully.' ),
+		};
+	}
+
+	// Some succeeded, some failed.
+	if ( errors.length && successes.length ) {
+		return {
+			type: 'warning',
+			message: __(
+				'Some fonts were uninstalled successfully and some failed.'
+			),
+		};
+	}
+}

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

@@ -109,6 +109,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 }
 
 export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+	if ( ! input ) {
+		return;
+	}
+
 	let src;
 	if ( Array.isArray( input ) ) {
 		src = input[ 0 ];

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

@@ -22,9 +22,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ ! window.__experimentalDisableFontLibrary && (
-						<FontFamilies />
-					) }
+					{ FontFamilies &&
+						! window.__experimentalDisableFontLibrary && (
+							<FontFamilies />
+						) }
 					<TypographyElements />
 				</VStack>
 			</div>

package/src/components/page-patterns/grid.js

@@ -9,7 +9,7 @@ export default function Grid( { categoryId, items, ...props } ) {
 	}
 
 	return (
-		<ul role="listbox" className="edit-site-patterns__grid" { ...props }>
+		<ul className="edit-site-patterns__grid" { ...props }>
 			{ items.map( ( item ) => (
 				<GridItem
 					key={ item.name }

package/src/components/page-patterns/patterns-list.js

@@ -35,7 +35,7 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 const SYNC_FILTERS = {
 	all: __( 'All' ),
 	[ PATTERN_SYNC_TYPES.full ]: __( 'Synced' ),
-	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Standard' ),
+	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Not synced' ),
 };
 
 const SYNC_DESCRIPTIONS = {

package/src/components/page-patterns/use-patterns.js

@@ -155,9 +155,13 @@ const selectPatterns = createSelector(
 		];
 
 		if ( syncStatus ) {
-			patterns = patterns.filter(
-				( pattern ) => pattern.syncStatus === syncStatus
-			);
+			// User patterns can have their sync statuses checked directly
+			// Non-user patterns are all unsynced for the time being.
+			patterns = patterns.filter( ( pattern ) => {
+				return pattern.id
+					? pattern.syncStatus === syncStatus
+					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
+			} );
 		}
 
 		if ( categoryId ) {

package/src/components/page-template-parts/index.js

@@ -9,6 +9,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -20,8 +21,15 @@ import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplatePart from './add-new-template-part';
 import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function PageTemplateParts() {
+	const {
+		params: { didAccessPatternsPage },
+	} = useLocation();
+
 	const { records: templateParts } = useEntityRecords(
 		'postType',
 		TEMPLATE_PART_POST_TYPE,
@@ -40,8 +48,13 @@ export default function PageTemplateParts() {
 							params={ {
 								postId: templatePart.id,
 								postType: templatePart.type,
+								didAccessPatternsPage: !! didAccessPatternsPage
+									? 1
+									: undefined,
+							} }
+							state={ {
+								backPath: '/wp_template_part/all',
 							} }
-							state={ { backPath: '/wp_template_part/all' } }
 						>
 							{ decodeEntities(
 								templatePart.title?.rendered ||

package/src/components/sidebar-edit-mode/page-panels/reset-default-template.js

@@ -37,7 +37,7 @@ export default function ResetDefaultTemplate( { onClick } ) {
 					} );
 				} }
 			>
-				{ __( 'Reset' ) }
+				{ __( 'Use default template' ) }
 			</MenuItem>
 		</MenuGroup>
 	);

package/src/components/sidebar-edit-mode/template-panel/pattern-categories.js

@@ -3,7 +3,7 @@
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, PanelRow } from '@wordpress/components';
+import { FormTokenField, FlexBlock, PanelRow } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
@@ -257,21 +257,23 @@ export default function PatternCategories( { post } ) {
 
 	return (
 		<PanelRow initialOpen={ true } title={ __( 'Categories' ) }>
-			<FormTokenField
-				__next40pxDefaultSize
-				value={ values }
-				suggestions={ suggestions }
-				onChange={ onChange }
-				onInputChange={ debouncedSearch }
-				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
-				label={ __( 'Pattern categories' ) }
-				messages={ {
-					added: termAddedLabel,
-					removed: termRemovedLabel,
-					remove: removeTermLabel,
-				} }
-				tokenizeOnBlur
-			/>
+			<FlexBlock>
+				<FormTokenField
+					__next40pxDefaultSize
+					value={ values }
+					suggestions={ suggestions }
+					onChange={ onChange }
+					onInputChange={ debouncedSearch }
+					maxSuggestions={ MAX_TERMS_SUGGESTIONS }
+					label={ __( 'Pattern categories' ) }
+					messages={ {
+						added: termAddedLabel,
+						removed: termRemovedLabel,
+						remove: removeTermLabel,
+					} }
+					tokenizeOnBlur
+				/>
+			</FlexBlock>
 		</PanelRow>
 	);
 }

package/src/components/sidebar-edit-mode/template-panel/template-areas.js

@@ -73,7 +73,7 @@ export default function TemplateAreas() {
 
 			<ul className="edit-site-template-card__template-areas-list">
 				{ templateParts.map( ( { templatePart, block } ) => (
-					<li key={ templatePart.slug }>
+					<li key={ block.clientId }>
 						<TemplateAreaItem
 							area={ templatePart.area }
 							clientId={ block.clientId }

package/src/components/sidebar-navigation-screen/style.scss

@@ -68,7 +68,6 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	padding: $grid-unit-15 * 0.5 0 0 0;
-	overflow: hidden;
 	overflow-wrap: break-word;
 }
 

package/src/components/sidebar-navigation-screen-patterns/index.js

@@ -10,6 +10,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
 
 /**
@@ -27,6 +29,7 @@ import {
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
+import { store as editSiteStore } from '../../store';
 
 function TemplatePartGroup( { areas, currentArea, currentType } ) {
 	return (
@@ -93,8 +96,23 @@ export default function SidebarNavigationScreenPatterns() {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
+	const templatePartsLink = useLink( {
+		path: '/wp_template_part/all',
+		// If a classic theme that supports template parts accessed
+		// the Patterns page directly, preserve that state in the URL.
+		didAccessPatternsPage:
+			! isBlockBasedTheme && isTemplatePartsMode ? 1 : undefined,
+	} );
 
-	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
 			<SidebarNavigationItem
@@ -104,14 +122,17 @@ export default function SidebarNavigationScreenPatterns() {
 			>
 				{ __( 'Manage all of my patterns' ) }
 			</SidebarNavigationItem>
-			<SidebarNavigationItem withChevron { ...templatePartsLink }>
-				{ __( 'Manage all template parts' ) }
-			</SidebarNavigationItem>
+			{ ( isBlockBasedTheme || isTemplatePartsMode ) && (
+				<SidebarNavigationItem withChevron { ...templatePartsLink }>
+					{ __( 'Manage all template parts' ) }
+				</SidebarNavigationItem>
+			) }
 		</ItemGroup>
 	) : undefined;
 
 	return (
 		<SidebarNavigationScreen
+			isRoot={ ! isBlockBasedTheme }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'

package/src/components/sidebar-navigation-screen-template/home-template-details.js

@@ -7,7 +7,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	CheckboxControl,
-	__experimentalUseNavigator as useNavigator,
 	__experimentalInputControl as InputControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalTruncate as Truncate,
@@ -62,10 +61,6 @@ function TemplateAreaButton( { postId, icon, title } ) {
 }
 
 export default function HomeTemplateDetails() {
-	const navigator = useNavigator();
-	const {
-		params: { postType, postId },
-	} = navigator;
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	const {
@@ -75,34 +70,30 @@ export default function HomeTemplateDetails() {
 		postsPageTitle,
 		postsPageId,
 		currentTemplateParts,
-	} = useSelect(
-		( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
-			const { getSettings } = unlock( select( editSiteStore ) );
-			const _currentTemplateParts =
-				select( editSiteStore ).getCurrentTemplateTemplateParts();
-			const siteEditorSettings = getSettings();
-			const _postsPageRecord = siteSettings?.page_for_posts
-				? select( coreStore ).getEntityRecord(
-						'postType',
-						'page',
-						siteSettings?.page_for_posts
-				  )
-				: EMPTY_OBJECT;
+	} = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const { getSettings, getCurrentTemplateTemplateParts } = unlock(
+			select( editSiteStore )
+		);
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		const _postsPageRecord = siteSettings?.page_for_posts
+			? getEntityRecord(
+					'postType',
+					'page',
+					siteSettings?.page_for_posts
+			  )
+			: EMPTY_OBJECT;
 
-			return {
-				allowCommentsOnNewPosts:
-					siteSettings?.default_comment_status === 'open',
-				postsPageTitle: _postsPageRecord?.title?.rendered,
-				postsPageId: _postsPageRecord?.id,
-				postsPerPage: siteSettings?.posts_per_page,
-				templatePartAreas: siteEditorSettings?.defaultTemplatePartAreas,
-				currentTemplateParts: _currentTemplateParts,
-			};
-		},
-		[ postType, postId ]
-	);
+		return {
+			allowCommentsOnNewPosts:
+				siteSettings?.default_comment_status === 'open',
+			postsPageTitle: _postsPageRecord?.title?.rendered,
+			postsPageId: _postsPageRecord?.id,
+			postsPerPage: siteSettings?.posts_per_page,
+			templatePartAreas: getSettings()?.defaultTemplatePartAreas,
+			currentTemplateParts: getCurrentTemplateTemplateParts(),
+		};
+	}, [] );
 
 	const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] =
 		useState( '' );
@@ -126,11 +117,12 @@ export default function HomeTemplateDetails() {
 	 */
 	const templateAreas = useMemo( () => {
 		return currentTemplateParts.length && templatePartAreas
-			? currentTemplateParts.map( ( { templatePart } ) => ( {
+			? currentTemplateParts.map( ( { templatePart, block } ) => ( {
 					...templatePartAreas?.find(
 						( { area } ) => area === templatePart?.area
 					),
 					...templatePart,
+					clientId: block.clientId,
 			  } ) )
 			: [];
 	}, [ currentTemplateParts, templatePartAreas ] );
@@ -214,9 +206,9 @@ export default function HomeTemplateDetails() {
 			>
 				<ItemGroup>
 					{ templateAreas.map(
-						( { label, icon, theme, slug, title } ) => (
+						( { clientId, label, icon, theme, slug, title } ) => (
 							<SidebarNavigationScreenDetailsPanelRow
-								key={ slug }
+								key={ clientId }
 							>
 								<TemplateAreaButton
 									postId={ `${ theme }//${ slug }` }

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -14,6 +15,7 @@ import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
 
 const config = {
 	[ TEMPLATE_POST_TYPE ]: {
@@ -31,20 +33,26 @@ const config = {
 	},
 };
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
+	const {
+		params: { didAccessPatternsPage },
+	} = useLocation();
 
 	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-
-		return !! settings.supportsTemplatePartsMode;
+		return !! select( editSiteStore ).getSettings()
+			.supportsTemplatePartsMode;
 	}, [] );
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
+			// If a classic theme that supports template parts has never
+			// accessed the Patterns page, return to the dashboard.
+			isRoot={ isTemplatePartsMode && ! didAccessPatternsPage }
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }