@wordpress/edit-site 6.4.0 → 6.5.0

package/src/components/page-templates/fields.js

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { parse } from '@wordpress/blocks';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { EditorProvider } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { Async } from '../async';
+import { default as Link, useLink } from '../routes/link';
+import { useAddedBy } from './hooks';
+
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function PreviewField( { item } ) {
+	const settings = usePatternSettings();
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const blocks = useMemo( () => {
+		return parse( item.content.raw );
+	}, [ item.content.raw ] );
+	const { onClick } = useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
+
+	const isEmpty = ! blocks?.length;
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<EditorProvider post={ item } settings={ settings }>
+			<div
+				className="page-templates-preview-field"
+				style={ { backgroundColor } }
+			>
+				<button
+					className="page-templates-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || item.title }
+				>
+					{ isEmpty && __( 'Empty template' ) }
+					{ ! isEmpty && (
+						<Async>
+							<BlockPreview blocks={ blocks } />
+						</Async>
+					) }
+				</button>
+			</div>
+		</EditorProvider>
+	);
+}
+
+export const previewField = {
+	label: __( 'Preview' ),
+	id: 'preview',
+	render: PreviewField,
+	enableSorting: false,
+};
+
+function TitleField( { item } ) {
+	const linkProps = {
+		params: {
+			postId: item.id,
+			postType: item.type,
+			canvas: 'edit',
+		},
+	};
+	return (
+		<Link { ...linkProps }>
+			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
+		</Link>
+	);
+}
+
+export const titleField = {
+	label: __( 'Template' ),
+	id: 'title',
+	getValue: ( { item } ) => item.title?.rendered,
+	render: TitleField,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+export const descriptionField = {
+	label: __( 'Description' ),
+	id: 'description',
+	render: ( { item } ) => {
+		return (
+			item.description && (
+				<span className="page-templates-description">
+					{ decodeEntities( item.description ) }
+				</span>
+			)
+		);
+	},
+	enableSorting: false,
+	enableGlobalSearch: true,
+};
+
+function AuthorField( { item } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export const authorField = {
+	label: __( 'Author' ),
+	id: 'author',
+	getValue: ( { item } ) => item.author_text,
+	render: AuthorField,
+};

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

@@ -1,36 +1,18 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { parse } from '@wordpress/blocks';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as corePrivateApis } from '@wordpress/core-data';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import {
-	privateApis as editorPrivateApis,
-	EditorProvider,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import Page from '../page';
-import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
-import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
 	OPERATOR_IS_ANY,
@@ -38,15 +20,18 @@ import {
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
 } from '../../utils/constants';
-
-import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
+import {
+	authorField,
+	descriptionField,
+	previewField,
+	titleField,
+} from './fields';
 
 const { usePostActions } = unlock( editorPrivateApis );
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -69,8 +54,7 @@ const defaultLayouts = {
 					minWidth: 320,
 				},
 				preview: {
-					minWidth: 120,
-					maxWidth: 120,
+					width: '1%',
 				},
 				author: {
 					width: '1%',
@@ -109,104 +93,6 @@ const DEFAULT_VIEW = {
 	filters: [],
 };
 
-function Title( { item, viewType } ) {
-	if ( viewType === LAYOUT_LIST ) {
-		return decodeEntities( item.title?.rendered ) || __( '(no title)' );
-	}
-	const linkProps = {
-		params: {
-			postId: item.id,
-			postType: item.type,
-			canvas: 'edit',
-		},
-	};
-	return (
-		<Link { ...linkProps }>
-			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
-		</Link>
-	);
-}
-
-function AuthorField( { item } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ imageUrl && (
-				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ ! imageUrl && (
-				<div className="page-templates-author-field__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span className="page-templates-author-field__name">{ text }</span>
-		</HStack>
-	);
-}
-
-function Preview( { item, viewType } ) {
-	const settings = usePatternSettings();
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
-	const blocks = useMemo( () => {
-		return parse( item.content.raw );
-	}, [ item.content.raw ] );
-	const { onClick } = useLink( {
-		postId: item.id,
-		postType: item.type,
-		canvas: 'edit',
-	} );
-
-	const isEmpty = ! blocks?.length;
-	// Wrap everything in a block editor provider to ensure 'styles' that are needed
-	// for the previews are synced between the site editor store and the block editor store.
-	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
-	// render patterns inside the previews.
-	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
-	// the block editor settings are needed in context where we don't have the block editor.
-	// Explore how we can solve this in a better way.
-	return (
-		<EditorProvider post={ item } settings={ settings }>
-			<div
-				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
-				style={ { backgroundColor } }
-			>
-				{ viewType === LAYOUT_LIST && ! isEmpty && (
-					<Async>
-						<BlockPreview blocks={ blocks } />
-					</Async>
-				) }
-				{ viewType !== LAYOUT_LIST && (
-					<button
-						className="page-templates-preview-field__button"
-						type="button"
-						onClick={ onClick }
-						aria-label={ item.title?.rendered || item.title }
-					>
-						{ isEmpty && __( 'Empty template' ) }
-						{ ! isEmpty && (
-							<Async>
-								<BlockPreview blocks={ blocks } />
-							</Async>
-						) }
-					</button>
-				) }
-			</div>
-		</EditorProvider>
-	);
-}
-
 export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout, postId } = params;
@@ -248,13 +134,10 @@ export default function PageTemplates() {
 		} ) );
 	}, [ activeView ] );
 
-	const { records, isResolving: isLoadingData } = useEntityRecords(
-		'postType',
-		TEMPLATE_POST_TYPE,
-		{
+	const { records, isResolving: isLoadingData } =
+		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
-		}
-	);
+		} );
 	const history = useHistory();
 	const onChangeSelection = useCallback(
 		( items ) => {
@@ -285,50 +168,15 @@ export default function PageTemplates() {
 
 	const fields = useMemo(
 		() => [
+			previewField,
+			titleField,
+			descriptionField,
 			{
-				label: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item } ) => {
-					return <Preview item={ item } viewType={ view.type } />;
-				},
-				enableSorting: false,
-			},
-			{
-				label: __( 'Template' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered,
-				render: ( { item } ) => (
-					<Title item={ item } viewType={ view.type } />
-				),
-				enableHiding: false,
-				enableGlobalSearch: true,
-			},
-			{
-				label: __( 'Description' ),
-				id: 'description',
-				render: ( { item } ) => {
-					return (
-						item.description && (
-							<span className="page-templates-description">
-								{ decodeEntities( item.description ) }
-							</span>
-						)
-					);
-				},
-				enableSorting: false,
-				enableGlobalSearch: true,
-			},
-			{
-				label: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <AuthorField viewType={ view.type } item={ item } />;
-				},
+				...authorField,
 				elements: authors,
 			},
 		],
-		[ authors, view.type ]
+		[ authors ]
 	);
 
 	const { data, paginationInfo } = useMemo( () => {
@@ -366,6 +214,7 @@ export default function PageTemplates() {
 			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
+				key={ activeView }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }

package/src/components/page-templates/style.scss

@@ -3,6 +3,7 @@
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
+	border-radius: $radius-medium;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -13,7 +14,7 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
-		border-radius: $grid-unit-05;
+		border-radius: $radius-medium;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -22,21 +23,23 @@
 		}
 	}
 
-	&.is-viewtype-list {
+	.dataviews-view-list & {
 		.block-editor-block-preview__container {
 			height: 120px;
 		}
 	}
 
-	&.is-viewtype-grid {
+	.dataviews-view-grid & {
 		.block-editor-block-preview__container {
 			height: 100%;
 		}
 	}
 
-	&.is-viewtype-table {
+	.dataviews-view-table & {
 		border-radius: $radius-block-ui;
 		position: relative;
+		width: 120px;
+		max-height: 160px;
 
 		&::after {
 			content: "";
@@ -52,7 +55,13 @@
 }
 
 .page-templates-description {
-	white-space: normal;
+	max-width: 50em;
+	text-wrap: balance; // Fallback for Safari
+	text-wrap: pretty;
+
+	.dataviews-view-table & {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-page-templates {

package/src/components/post-edit/index.js

@@ -7,10 +7,14 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { DataForm } from '@wordpress/dataviews';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	FlexItem,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 
 /**
@@ -42,7 +46,8 @@ function PostEditForm( { postType, postId } ) {
 	const { saveEntityRecord } = useDispatch( coreDataStore );
 	const { fields } = usePostFields();
 	const form = {
-		visibleFields: [ 'title' ],
+		type: 'panel',
+		fields: [ 'title', 'author' ],
 	};
 	const [ edits, setEdits ] = useState( {} );
 	const itemWithEdits = useMemo( () => {
@@ -53,6 +58,11 @@ function PostEditForm( { postType, postId } ) {
 	}, [ initialEdits, edits ] );
 	const onSubmit = async ( event ) => {
 		event.preventDefault();
+
+		if ( ! isItemValid( itemWithEdits, fields, form ) ) {
+			return;
+		}
+
 		const { getEntityRecord } = registry.resolveSelect( coreDataStore );
 		for ( const id of ids ) {
 			const item = await getEntityRecord( 'postType', postType, id );
@@ -64,18 +74,27 @@ function PostEditForm( { postType, postId } ) {
 		setEdits( {} );
 	};
 
+	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
 	return (
-		<form onSubmit={ onSubmit }>
+		<VStack as="form" onSubmit={ onSubmit } spacing={ 4 }>
 			<DataForm
 				data={ itemWithEdits }
 				fields={ fields }
 				form={ form }
 				onChange={ setEdits }
 			/>
-			<Button variant="primary" type="submit">
-				{ __( 'Update' ) }
-			</Button>
-		</form>
+			<FlexItem>
+				<Button
+					variant="primary"
+					type="submit"
+					accessibleWhenDisabled
+					disabled={ isUpdateDisabled }
+					__next40pxDefaultSize
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</FlexItem>
+		</VStack>
 	);
 }
 

package/src/components/post-fields/index.js

@@ -186,6 +186,10 @@ function usePostFields( viewType ) {
 					const addLink =
 						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
 						item.status !== 'trash';
+					const renderedTitle =
+						typeof item.title === 'string'
+							? item.title
+							: item.title?.rendered;
 					const title = addLink ? (
 						<Link
 							params={ {
@@ -194,12 +198,12 @@ function usePostFields( viewType ) {
 								canvas: 'edit',
 							} }
 						>
-							{ decodeEntities( item.title?.rendered ) ||
+							{ decodeEntities( renderedTitle ) ||
 								__( '(no title)' ) }
 						</Link>
 					) : (
 						<span>
-							{ decodeEntities( item.title?.rendered ) ||
+							{ decodeEntities( renderedTitle ) ||
 								__( '(no title)' ) }
 						</span>
 					);
@@ -235,13 +239,21 @@ function usePostFields( viewType ) {
 			{
 				label: __( 'Author' ),
 				id: 'author',
-				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
+				type: 'integer',
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
 						label: name,
 					} ) ) || [],
 				render: PostAuthorField,
+				sort: ( a, b, direction ) => {
+					const nameA = a._embedded?.author?.[ 0 ]?.name || '';
+					const nameB = b._embedded?.author?.[ 0 ]?.name || '';
+
+					return direction === 'asc'
+						? nameA.localeCompare( nameB )
+						: nameB.localeCompare( nameA );
+				},
 			},
 			{
 				label: __( 'Status' ),
@@ -292,19 +304,13 @@ function usePostFields( viewType ) {
 						);
 					}
 
-					// Pending & Published posts show the modified date if it's newer.
-					const dateToDisplay =
-						getDate( item.modified ) > getDate( item.date )
-							? item.modified
-							: item.date;
-
-					const isPending = item.status === 'pending';
-					if ( isPending ) {
+					const isPublished = item.status === 'publish';
+					if ( isPublished ) {
 						return createInterpolateElement(
 							sprintf(
-								/* translators: %s: the newest of created or modified date for the page */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( dateToDisplay )
+								/* translators: %s: page creation time */
+								__( '<span>Published: <time>%s</time></span>' ),
+								getFormattedDate( item.date )
 							),
 							{
 								span: <span />,
@@ -313,12 +319,18 @@ function usePostFields( viewType ) {
 						);
 					}
 
-					const isPublished = item.status === 'publish';
-					if ( isPublished ) {
+					// Pending posts show the modified date if it's newer.
+					const dateToDisplay =
+						getDate( item.modified ) > getDate( item.date )
+							? item.modified
+							: item.date;
+
+					const isPending = item.status === 'pending';
+					if ( isPending ) {
 						return createInterpolateElement(
 							sprintf(
 								/* translators: %s: the newest of created or modified date for the page */
-								__( '<span>Published: <time>%s</time></span>' ),
+								__( '<span>Modified: <time>%s</time></span>' ),
 								getFormattedDate( dateToDisplay )
 							),
 							{