@wordpress/edit-site 6.3.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,26 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import {
-	Icon,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	VisuallyHidden,
-} 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 } from '@wordpress/editor';
@@ -28,11 +11,8 @@ 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,
@@ -40,27 +20,50 @@ 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 { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
 const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
 const EMPTY_ARRAY = [];
 
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
+		fields: [ 'template', 'author' ],
 		layout: {
 			primaryField: 'title',
+			combinedFields: [
+				{
+					id: 'template',
+					label: __( 'Template' ),
+					children: [ 'title', 'description' ],
+					direction: 'vertical',
+				},
+			],
+			styles: {
+				template: {
+					maxWidth: 400,
+					minWidth: 320,
+				},
+				preview: {
+					width: '1%',
+				},
+				author: {
+					width: '1%',
+				},
+			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
+		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			mediaField: 'preview',
 			primaryField: 'title',
@@ -68,6 +71,7 @@ const defaultLayouts = {
 		},
 	},
 	[ LAYOUT_LIST ]: {
+		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			primaryField: 'title',
 			mediaField: 'preview',
@@ -84,110 +88,11 @@ const DEFAULT_VIEW = {
 		field: 'title',
 		direction: 'asc',
 	},
-	fields: [ 'title', 'description', 'author' ],
+	fields: defaultLayouts[ LAYOUT_GRID ].fields,
 	layout: defaultLayouts[ LAYOUT_GRID ].layout,
 	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, viewType } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	const withIcon = viewType !== LAYOUT_LIST;
-
-	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ withIcon && imageUrl && (
-				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ withIcon && ! 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 (
-		<ExperimentalBlockEditorProvider 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>
-		</ExperimentalBlockEditorProvider>
-	);
-}
-
 export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout, postId } = params;
@@ -199,6 +104,7 @@ export default function PageTemplates() {
 			...DEFAULT_VIEW,
 			type: usedType,
 			layout: defaultLayouts[ usedType ].layout,
+			fields: defaultLayouts[ usedType ].fields,
 			filters:
 				activeView !== 'all'
 					? [
@@ -228,20 +134,18 @@ 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 onSelectionChange = useCallback(
+	const onChangeSelection = useCallback(
 		( items ) => {
+			setSelection( items );
 			if ( view?.type === LAYOUT_LIST ) {
 				history.push( {
 					...params,
-					postId: items.length === 1 ? items[ 0 ].id : undefined,
+					postId: items.length === 1 ? items[ 0 ] : undefined,
 				} );
 			}
 		},
@@ -264,65 +168,15 @@ export default function PageTemplates() {
 
 	const fields = useMemo(
 		() => [
+			previewField,
+			titleField,
+			descriptionField,
 			{
-				header: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item } ) => {
-					return <Preview item={ item } viewType={ view.type } />;
-				},
-				minWidth: 120,
-				maxWidth: 120,
-				enableSorting: false,
-			},
-			{
-				header: __( 'Template' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered,
-				render: ( { item } ) => (
-					<Title item={ item } viewType={ view.type } />
-				),
-				maxWidth: 400,
-				enableHiding: false,
-				enableGlobalSearch: true,
-			},
-			{
-				header: __( 'Description' ),
-				id: 'description',
-				render: ( { item } ) => {
-					return item.description ? (
-						<span className="page-templates-description">
-							{ decodeEntities( item.description ) }
-						</span>
-					) : (
-						view.type === LAYOUT_TABLE && (
-							<>
-								<Text variant="muted" aria-hidden="true">
-									&#8212;
-								</Text>
-								<VisuallyHidden>
-									{ __( 'No description.' ) }
-								</VisuallyHidden>
-							</>
-						)
-					);
-				},
-				maxWidth: 400,
-				minWidth: 320,
-				enableSorting: false,
-				enableGlobalSearch: true,
-			},
-			{
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <AuthorField viewType={ view.type } item={ item } />;
-				},
+				...authorField,
 				elements: authors,
-				width: '1%',
 			},
 		],
-		[ authors, view.type ]
+		[ authors ]
 	);
 
 	const { data, paginationInfo } = useMemo( () => {
@@ -360,6 +214,7 @@ export default function PageTemplates() {
 			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
+				key={ activeView }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
@@ -367,9 +222,8 @@ export default function PageTemplates() {
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				onSelectionChange={ onSelectionChange }
+				onChangeSelection={ onChangeSelection }
 				selection={ selection }
-				setSelection={ setSelection }
 				defaultLayouts={ defaultLayouts }
 			/>
 		</Page>

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

@@ -2,6 +2,8 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	width: 100%;
+	border-radius: $radius-medium;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -12,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);
@@ -21,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: "";
@@ -51,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 {
@@ -67,12 +77,12 @@
 	width: $grid-unit-30;
 	height: $grid-unit-30;
 	align-items: center;
-	justify-content: center;
+	justify-content: left;
 	display: flex;
 
 	img {
-		width: 20px;
-		height: 20px;
+		width: $grid-unit-20;
+		height: $grid-unit-20;
 		object-fit: cover;
 		opacity: 0;
 		transition: opacity 0.1s linear;
@@ -94,6 +104,7 @@
 	height: $grid-unit-30;
 
 	svg {
+		margin-left: -$grid-unit-05;
 		fill: currentColor;
 	}
 }

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

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import {
+	Button,
+	FlexItem,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import usePostFields from '../post-fields';
+
+function PostEditForm( { postType, postId } ) {
+	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
+	const { initialEdits } = useSelect(
+		( select ) => {
+			if ( ids.length !== 1 ) {
+			}
+			return {
+				initialEdits:
+					ids.length === 1
+						? select( coreDataStore ).getEntityRecord(
+								'postType',
+								postType,
+								ids[ 0 ]
+						  )
+						: null,
+			};
+		},
+		[ postType, ids ]
+	);
+	const registry = useRegistry();
+	const { saveEntityRecord } = useDispatch( coreDataStore );
+	const { fields } = usePostFields();
+	const form = {
+		type: 'panel',
+		fields: [ 'title', 'author' ],
+	};
+	const [ edits, setEdits ] = useState( {} );
+	const itemWithEdits = useMemo( () => {
+		return {
+			...initialEdits,
+			...edits,
+		};
+	}, [ 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 );
+			saveEntityRecord( 'postType', postType, {
+				...item,
+				...edits,
+			} );
+		}
+		setEdits( {} );
+	};
+
+	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
+	return (
+		<VStack as="form" onSubmit={ onSubmit } spacing={ 4 }>
+			<DataForm
+				data={ itemWithEdits }
+				fields={ fields }
+				form={ form }
+				onChange={ setEdits }
+			/>
+			<FlexItem>
+				<Button
+					variant="primary"
+					type="submit"
+					accessibleWhenDisabled
+					disabled={ isUpdateDisabled }
+					__next40pxDefaultSize
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</FlexItem>
+		</VStack>
+	);
+}
+
+export function PostEdit( { postType, postId } ) {
+	return (
+		<Page
+			className={ clsx( 'edit-site-post-edit', {
+				'is-empty': ! postId,
+			} ) }
+			label={ __( 'Post Edit' ) }
+		>
+			{ postId && (
+				<PostEditForm postType={ postType } postId={ postId } />
+			) }
+			{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
+		</Page>
+	);
+}

package/src/components/post-edit/style.scss

@@ -0,0 +1,9 @@
+.edit-site-post-edit {
+	padding: $grid-unit-30;
+
+	&.is-empty .edit-site-page-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}