@wordpress/edit-site 6.4.0 → 6.6.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

@@ -8,27 +8,29 @@ import clsx from 'clsx';
  */
 import { __ } from '@wordpress/i18n';
 import { DataForm } from '@wordpress/dataviews';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { Button } from '@wordpress/components';
-import { useState, useMemo } from '@wordpress/element';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import usePostFields from '../post-fields';
+import { unlock } from '../../lock-unlock';
+
+const { PostCardPanel } = unlock( editorPrivateApis );
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
-	const { initialEdits } = useSelect(
+	const { record } = useSelect(
 		( select ) => {
-			if ( ids.length !== 1 ) {
-			}
 			return {
-				initialEdits:
+				record:
 					ids.length === 1
-						? select( coreDataStore ).getEntityRecord(
+						? select( coreDataStore ).getEditedEntityRecord(
 								'postType',
 								postType,
 								ids[ 0 ]
@@ -38,44 +40,65 @@ function PostEditForm( { postType, postId } ) {
 		},
 		[ postType, ids ]
 	);
-	const registry = useRegistry();
-	const { saveEntityRecord } = useDispatch( coreDataStore );
-	const { fields } = usePostFields();
+	const [ multiEdits, setMultiEdits ] = useState( {} );
+	const { editEntityRecord } = useDispatch( coreDataStore );
+	const { fields: _fields } = usePostFields();
+	const fields = useMemo(
+		() =>
+			_fields?.map( ( field ) => {
+				if ( field.id === 'status' ) {
+					return {
+						...field,
+						elements: field.elements.filter(
+							( element ) => element.value !== 'trash'
+						),
+					};
+				}
+				return field;
+			} ),
+		[ _fields ]
+	);
 	const form = {
-		visibleFields: [ 'title' ],
+		type: 'panel',
+		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
 	};
-	const [ edits, setEdits ] = useState( {} );
-	const itemWithEdits = useMemo( () => {
-		return {
-			...initialEdits,
-			...edits,
-		};
-	}, [ initialEdits, edits ] );
-	const onSubmit = async ( event ) => {
-		event.preventDefault();
-		const { getEntityRecord } = registry.resolveSelect( coreDataStore );
+	const onChange = ( edits ) => {
 		for ( const id of ids ) {
-			const item = await getEntityRecord( 'postType', postType, id );
-			saveEntityRecord( 'postType', postType, {
-				...item,
-				...edits,
-			} );
+			if (
+				edits.status !== 'future' &&
+				record.status === 'future' &&
+				new Date( record.date ) > new Date()
+			) {
+				edits.date = null;
+			}
+			if ( edits.status === 'private' && record.password ) {
+				edits.password = '';
+			}
+			editEntityRecord( 'postType', postType, id, edits );
+			if ( ids.length > 1 ) {
+				setMultiEdits( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) );
+			}
 		}
-		setEdits( {} );
 	};
+	useEffect( () => {
+		setMultiEdits( {} );
+	}, [ ids ] );
 
 	return (
-		<form onSubmit={ onSubmit }>
+		<VStack spacing={ 4 }>
+			{ ids.length === 1 && (
+				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
+			) }
 			<DataForm
-				data={ itemWithEdits }
+				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }
 				form={ form }
-				onChange={ setEdits }
+				onChange={ onChange }
 			/>
-			<Button variant="primary" type="submit">
-				{ __( 'Update' ) }
-			</Button>
-		</form>
+		</VStack>
 	);
 }