@wordpress/edit-site 5.19.2 → 5.20.0

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

@@ -1,15 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
+	__experimentalVStack as VStack,
 	FormFileUpload,
+	Notice,
+	FlexItem,
 } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,9 +22,16 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 
 function LocalFonts() {
 	const { installFonts } = useContext( FontLibraryContext );
+	const [ notice, setNotice ] = useState( null );
+	const supportedFormats =
+		ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
+			.map( ( extension ) => `.${ extension }` )
+			.join( ', ' ) +
+		` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );
@@ -30,6 +40,16 @@ function LocalFonts() {
 		handleFilesUpload( event.target.files );
 	};
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	/**
 	 * Filters the selected files to only allow the ones with the allowed extensions
 	 *
@@ -37,6 +57,7 @@ function LocalFonts() {
 	 * @return {void}
 	 */
 	const handleFilesUpload = ( files ) => {
+		setNotice( null );
 		const uniqueFilenames = new Set();
 		const selectedFiles = [ ...files ];
 		const allowedFiles = selectedFiles.filter( ( file ) => {
@@ -126,33 +147,54 @@ function LocalFonts() {
 	 */
 	const handleInstall = async ( fontFaces ) => {
 		const fontFamilies = makeFamiliesFromFaces( fontFaces );
-		await installFonts( fontFamilies );
+		const response = await installFonts( fontFamilies );
+		const installNotice = getNoticeFromInstallResponse( response );
+		setNotice( installNotice );
 	};
 
 	return (
 		<>
-			<Text className="font-library-modal__subtitle">
-				{ __( 'Upload Fonts' ) }
-			</Text>
-			<Spacer margin={ 2 } />
+			<Spacer margin={ 16 } />
 			<DropZone onFilesDrop={ handleDropZone } />
-			<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>
-							{ __( 'Drag and drop your font files here.' ) }
-						</span>
-					</Button>
+			<VStack className="font-library-modal__local-fonts">
+				<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>
+					) }
+				/>
+				{ notice && (
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__upload-area__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
 				) }
-			/>
+				<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>
 		</>
 	);
 }

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

@@ -18,7 +18,7 @@ export async function fetchInstallFonts( data ) {
 
 export async function fetchUninstallFonts( fonts ) {
 	const data = {
-		fontFamilies: fonts,
+		font_families: fonts,
 	};
 	const config = {
 		path: '/wp/v2/fonts',

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 ];
@@ -148,6 +152,6 @@ export function makeFormDataFromFontFamilies( fontFamilies ) {
 		}
 		return family;
 	} );
-	formData.append( 'fontFamilies', JSON.stringify( newFontFamilies ) );
+	formData.append( 'font_families', JSON.stringify( newFontFamilies ) );
 	return formData;
 }

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

@@ -55,7 +55,7 @@ describe( 'makeFormDataFromFontFamilies', () => {
 				fontFamily: 'Bebas',
 			},
 		];
-		expect( JSON.parse( formData.get( 'fontFamilies' ) ) ).toEqual(
+		expect( JSON.parse( formData.get( 'font_families' ) ) ).toEqual(
 			expectedFontFamilies
 		);
 	} );

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

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

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

@@ -60,7 +60,7 @@ import { withPluginContext } from '@wordpress/plugins';
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default compose(
 	withPluginContext( ( context, ownProps ) => {

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

@@ -48,7 +48,7 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 
 export default function PluginSidebarMoreMenuItem( props ) {

package/src/components/page-content-focus-manager/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -10,12 +10,37 @@ import { store as editSiteStore } from '../../store';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
 import EditTemplateNotification from './edit-template-notification';
 import BackToPageNotification from './back-to-page-notification';
+import { unlock } from '../../lock-unlock';
 
 export default function PageContentFocusManager( { contentRef } ) {
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const { hasPageContentFocus, pageContentFocusType, canvasMode } = useSelect(
+		( select ) => {
+			const { getPageContentFocusType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const _canvasMode = getCanvasMode();
+			return {
+				canvasMode: _canvasMode,
+				pageContentFocusType: getPageContentFocusType(),
+				hasPageContentFocus:
+					select( editSiteStore ).hasPageContentFocus(),
+			};
+		},
 		[]
 	);
+	const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
+
+	/*
+	 * Ensure that the page content focus type is set to `disableTemplate` when
+	 * the canvas mode is not `edit`. This makes the experience consistent with
+	 * refreshing the page, which resets the page content focus type.
+	 */
+	useEffect( () => {
+		if ( canvasMode !== 'edit' && !! pageContentFocusType ) {
+			setPageContentFocusType( null );
+		}
+	}, [ canvasMode, pageContentFocusType ] );
+
 	return (
 		<>
 			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }

package/src/components/page-main/index.js

@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import PagePatterns from '../page-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
+import PagePages from '../page-pages';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -24,6 +25,8 @@ export default function PageMain() {
 		return <PageTemplateParts />;
 	} else if ( path === '/patterns' ) {
 		return <PagePatterns />;
+	} else if ( window?.__experimentalAdminViews && path === '/pages' ) {
+		return <PagePages />;
 	}
 
 	return null;

package/src/components/page-pages/index.js

@@ -0,0 +1,190 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Link from '../routes/link';
+import PageActions from '../page-actions';
+import { DataViews, PAGE_SIZE_VALUES } from '../dataviews';
+
+const EMPTY_ARRAY = [];
+
+export default function PagePages() {
+	const [ reset, setResetQuery ] = useState( ( v ) => ! v );
+	const [ globalFilter, setGlobalFilter ] = useState( '' );
+	const [ paginationInfo, setPaginationInfo ] = useState();
+	const [ { pageIndex, pageSize }, setPagination ] = useState( {
+		pageIndex: 0,
+		pageSize: PAGE_SIZE_VALUES[ 0 ],
+	} );
+	// Request post statuses to get the proper labels.
+	const [ postStatuses, setPostStatuses ] = useState( EMPTY_ARRAY );
+	useEffect( () => {
+		apiFetch( {
+			path: '/wp/v2/statuses',
+		} ).then( setPostStatuses );
+	}, [] );
+
+	// TODO: probably memo other objects passed as state(ex:https://tanstack.com/table/v8/docs/examples/react/pagination-controlled).
+	const pagination = useMemo(
+		() => ( { pageIndex, pageSize } ),
+		[ pageIndex, pageSize ]
+	);
+	const [ sorting, setSorting ] = useState( [
+		{ order: 'desc', orderby: 'date' },
+	] );
+	const queryArgs = useMemo(
+		() => ( {
+			per_page: pageSize,
+			page: pageIndex + 1, // tanstack starts from zero.
+			_embed: 'author',
+			order: sorting[ 0 ]?.desc ? 'desc' : 'asc',
+			orderby: sorting[ 0 ]?.id,
+			search: globalFilter,
+			status: [ 'publish', 'draft' ],
+		} ),
+		[
+			globalFilter,
+			sorting[ 0 ]?.id,
+			sorting[ 0 ]?.desc,
+			pageSize,
+			pageIndex,
+			reset,
+		]
+	);
+	const { records, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'page',
+		queryArgs
+	);
+	useEffect( () => {
+		// Make extra request to handle controlled pagination.
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/pages', {
+				...queryArgs,
+				_fields: 'id',
+			} ),
+			method: 'HEAD',
+			parse: false,
+		} ).then( ( res ) => {
+			const totalPages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
+			const totalItems = parseInt( res.headers.get( 'X-WP-Total' ) );
+			setPaginationInfo( {
+				totalPages,
+				totalItems,
+			} );
+		} );
+		// Status should not make extra request if already did..
+	}, [ globalFilter, pageSize, reset ] );
+
+	const fields = useMemo(
+		() => [
+			{
+				header: __( 'Title' ),
+				id: 'title',
+				accessorFn: ( page ) => page.title?.rendered || page.slug,
+				cell: ( props ) => {
+					const page = props.row.original;
+					return (
+						<VStack spacing={ 1 }>
+							<Heading as="h3" level={ 5 }>
+								<Link
+									params={ {
+										postId: page.id,
+										postType: page.type,
+										canvas: 'edit',
+									} }
+								>
+									{ decodeEntities( props.getValue() ) }
+								</Link>
+							</Heading>
+						</VStack>
+					);
+				},
+				maxWidth: 400,
+				sortingFn: 'alphanumeric',
+				enableHiding: false,
+			},
+			{
+				header: __( 'Author' ),
+				id: 'author',
+				accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
+				cell: ( props ) => {
+					const author = props.row.original._embedded?.author[ 0 ];
+					return (
+						<a href={ `user-edit.php?user_id=${ author.id }` }>
+							{ author.name }
+						</a>
+					);
+				},
+			},
+			{
+				header: 'Status',
+				id: 'status',
+				cell: ( props ) =>
+					postStatuses[ props.row.original.status ]?.name,
+			},
+			{
+				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+				id: 'actions',
+				cell: ( props ) => {
+					const page = props.row.original;
+					return (
+						<PageActions
+							postId={ page.id }
+							onRemove={ () => setResetQuery() }
+						/>
+					);
+				},
+				enableHiding: false,
+			},
+		],
+		[ postStatuses ]
+	);
+
+	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
+	return (
+		<Page title={ __( 'Pages' ) }>
+			<DataViews
+				paginationInfo={ paginationInfo }
+				data={ records || EMPTY_ARRAY }
+				isLoading={ isLoading }
+				fields={ fields }
+				options={ {
+					manualSorting: true,
+					manualFiltering: true,
+					manualPagination: true,
+					enableRowSelection: true,
+					state: {
+						sorting,
+						globalFilter,
+						pagination,
+					},
+					pageCount: paginationInfo?.totalPages,
+					onSortingChange: setSorting,
+					onGlobalFilterChange: ( value ) => {
+						setGlobalFilter( value );
+						setPagination( { pageIndex: 0, pageSize } );
+					},
+					// TODO: check these callbacks and maybe reset the query when needed...
+					onPaginationChange: setPagination,
+					meta: { resetQuery: setResetQuery },
+				} }
+			/>
+		</Page>
+	);
+}

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/plugin-template-setting-panel/index.js

@@ -28,6 +28,6 @@ PluginTemplateSettingPanel.Slot = Slot;
  *	);
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default PluginTemplateSettingPanel;