@wordpress/edit-site 5.26.0 → 5.27.0

package/src/components/{page-templates → page-templates-template-parts}/index.js

@@ -8,17 +8,14 @@ import removeAccents from 'remove-accents';
  */
 import {
 	Icon,
-	__experimentalView as View,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 import { parse } from '@wordpress/blocks';
 import {
 	BlockPreview,
@@ -35,11 +32,12 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import Page from '../page';
-import Link from '../routes/link';
+import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
 import { useAddedBy, AvatarImage } from '../list/added-by';
 import {
 	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
 	ENUMERATION_TYPE,
 	OPERATOR_IN,
 	OPERATOR_NOT_IN,
@@ -51,21 +49,27 @@ import {
 	useResetTemplateAction,
 	deleteTemplateAction,
 	renameTemplateAction,
-} from './template-actions';
+} from './actions';
 import { postRevisionsAction } from '../actions';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import PostPreview from '../post-preview';
+import AddNewTemplatePart from './add-new-template-part';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
+const SUPPORTED_LAYOUTS = window?.__experimentalAdminViews
+	? [ LAYOUT_TABLE, LAYOUT_GRID, LAYOUT_LIST ]
+	: [ LAYOUT_TABLE, LAYOUT_GRID ];
+
 const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
@@ -81,10 +85,14 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
+	sort: {
+		field: 'title',
+		direction: 'asc',
+	},
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'preview' ],
-	layout: {},
+	layout: defaultConfigPerViewType[ LAYOUT_TABLE ],
 	filters: [],
 };
 
@@ -92,30 +100,26 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-function TemplateTitle( { item, viewType } ) {
+function Title( { item, viewType } ) {
 	if ( viewType === LAYOUT_LIST ) {
-		return (
-			<>
-				{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
-			</>
-		);
+		return decodeEntities( item.title?.rendered ) || __( '(no title)' );
+	}
+	const linkProps = {
+		params: {
+			postId: item.id,
+			postType: item.type,
+			canvas: 'edit',
+		},
+	};
+	if ( item.type === TEMPLATE_PART_POST_TYPE ) {
+		linkProps.state = {
+			backPath: '/wp_template_part/all',
+		};
 	}
-
 	return (
-		<VStack spacing={ 1 }>
-			<View as="span" className="dataviews-view-grid__title-field">
-				<Link
-					params={ {
-						postId: item.id,
-						postType: item.type,
-						canvas: 'edit',
-					} }
-				>
-					{ decodeEntities( item.title?.rendered ) ||
-						__( '(no title)' ) }
-				</Link>
-			</View>
-		</VStack>
+		<Link { ...linkProps }>
+			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
+		</Link>
 	);
 }
 
@@ -136,15 +140,18 @@ function AuthorField( { item, viewType } ) {
 	);
 }
 
-function TemplatePreview( { content, viewType } ) {
+function Preview( { item, viewType } ) {
 	const settings = usePatternSettings();
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const blocks = useMemo( () => {
-		return parse( content );
-	}, [ content ] );
-	if ( ! blocks?.length ) {
-		return null;
-	}
+		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
@@ -158,116 +165,178 @@ function TemplatePreview( { content, viewType } ) {
 				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
 			>
-				<BlockPreview blocks={ blocks } />
+				<button
+					className="page-templates-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || item.title }
+				>
+					{ isEmpty &&
+						( item.type === TEMPLATE_POST_TYPE
+							? __( 'Empty template' )
+							: __( 'Empty template part' ) ) }
+					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
+				</button>
 			</div>
 		</ExperimentalBlockEditorProvider>
 	);
 }
 
-export default function DataviewsTemplates() {
-	const [ templateId, setTemplateId ] = useState( null );
-	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { records: allTemplates, isResolving: isLoadingData } =
-		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+export default function PageTemplatesTemplateParts( { postType } ) {
+	const { params } = useLocation();
+	const { activeView = 'all', layout } = params;
+	const defaultView = useMemo( () => {
+		return {
+			...DEFAULT_VIEW,
+			type: window?.__experimentalAdminViews
+				? layout ?? DEFAULT_VIEW.type
+				: DEFAULT_VIEW.type,
+			filters:
+				activeView !== 'all'
+					? [
+							{
+								field: 'author',
+								operator: 'in',
+								value: activeView,
+							},
+					  ]
+					: [],
+		};
+	}, [ layout, activeView ] );
+	const [ view, setView ] = useState( defaultView );
+	useEffect( () => {
+		setView( ( currentView ) => ( {
+			...currentView,
+			filters:
+				activeView !== 'all'
+					? [
+							{
+								field: 'author',
+								operator: 'in',
+								value: activeView,
+							},
+					  ]
+					: [],
+		} ) );
+	}, [ activeView ] );
+
+	const { records, isResolving: isLoadingData } = useEntityRecords(
+		'postType',
+		postType,
+		{
 			per_page: -1,
-		} );
+		}
+	);
 	const history = useHistory();
-
 	const onSelectionChange = useCallback(
-		( items ) =>
-			setTemplateId( items?.length === 1 ? items[ 0 ].id : null ),
-		[ setTemplateId ]
+		( items ) => {
+			if ( view?.type === LAYOUT_LIST ) {
+				history.push( {
+					...params,
+					postId: items.length === 1 ? items[ 0 ].id : undefined,
+				} );
+			}
+		},
+		[ history, params, view?.type ]
 	);
 
 	const authors = useMemo( () => {
-		if ( ! allTemplates ) {
+		if ( ! records ) {
 			return EMPTY_ARRAY;
 		}
 		const authorsSet = new Set();
-		allTemplates.forEach( ( template ) => {
+		records.forEach( ( template ) => {
 			authorsSet.add( template.author_text );
 		} );
 		return Array.from( authorsSet ).map( ( author ) => ( {
 			value: author,
 			label: author,
 		} ) );
-	}, [ allTemplates ] );
+	}, [ records ] );
 
-	const fields = useMemo(
-		() => [
+	const fields = useMemo( () => {
+		const _fields = [
 			{
 				header: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => {
-					return (
-						<TemplatePreview
-							content={ item.content.raw }
-							viewType={ view.type }
-						/>
-					);
+					return <Preview item={ item } viewType={ view.type } />;
 				},
 				minWidth: 120,
 				maxWidth: 120,
 				enableSorting: false,
 			},
 			{
-				header: __( 'Template' ),
+				header:
+					postType === TEMPLATE_POST_TYPE
+						? __( 'Template' )
+						: __( 'Template Part' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => (
-					<TemplateTitle item={ item } viewType={ view.type } />
+					<Title item={ item } viewType={ view.type } />
 				),
 				maxWidth: 400,
 				enableHiding: false,
 			},
-			{
+		];
+		if ( postType === TEMPLATE_POST_TYPE ) {
+			_fields.push( {
 				header: __( 'Description' ),
 				id: 'description',
 				getValue: ( { item } ) => item.description,
 				render: ( { item } ) => {
 					return item.description ? (
-						decodeEntities( item.description )
+						<span className="page-templates-description">
+							{ decodeEntities( item.description ) }
+						</span>
 					) : (
-						<>
-							<Text variant="muted" aria-hidden="true">
-								&#8212;
-							</Text>
-							<VisuallyHidden>
-								{ __( 'No description.' ) }
-							</VisuallyHidden>
-						</>
+						view.type === LAYOUT_TABLE && (
+							<>
+								<Text variant="muted" aria-hidden="true">
+									&#8212;
+								</Text>
+								<VisuallyHidden>
+									{ __( 'No description.' ) }
+								</VisuallyHidden>
+							</>
+						)
 					);
 				},
-				maxWidth: 200,
+				maxWidth: 400,
+				minWidth: 320,
 				enableSorting: false,
+			} );
+		}
+		// TODO: The plan is to support fields reordering, which would require an API like `order` or something
+		// similar. With the aforementioned API we wouldn't need to construct the fields array like this.
+		_fields.push( {
+			header: __( 'Author' ),
+			id: 'author',
+			getValue: ( { item } ) => item.author_text,
+			render: ( { item } ) => {
+				return <AuthorField viewType={ view.type } item={ item } />;
 			},
-			{
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <AuthorField viewType={ view.type } item={ item } />;
-				},
-				enableHiding: false,
-				type: ENUMERATION_TYPE,
-				elements: authors,
-			},
-		],
-		[ authors, view.type ]
-	);
+			enableHiding: false,
+			type: ENUMERATION_TYPE,
+			elements: authors,
+			width: '1%',
+		} );
+		return _fields;
+	}, [ postType, authors, view.type ] );
 
 	const { data, paginationInfo } = useMemo( () => {
-		if ( ! allTemplates ) {
+		if ( ! records ) {
 			return {
 				data: EMPTY_ARRAY,
 				paginationInfo: { totalItems: 0, totalPages: 0 },
 			};
 		}
-		let filteredTemplates = [ ...allTemplates ];
+		let filteredData = [ ...records ];
 		// Handle global search.
 		if ( view.search ) {
 			const normalizedSearch = normalizeSearchInput( view.search );
-			filteredTemplates = filteredTemplates.filter( ( item ) => {
+			filteredData = filteredData.filter( ( item ) => {
 				const title = item.title?.rendered || item.slug;
 				return (
 					normalizeSearchInput( title ).includes(
@@ -288,7 +357,7 @@ export default function DataviewsTemplates() {
 					filter.operator === OPERATOR_IN &&
 					!! filter.value
 				) {
-					filteredTemplates = filteredTemplates.filter( ( item ) => {
+					filteredData = filteredData.filter( ( item ) => {
 						return item.author_text === filter.value;
 					} );
 				} else if (
@@ -296,7 +365,7 @@ export default function DataviewsTemplates() {
 					filter.operator === OPERATOR_NOT_IN &&
 					!! filter.value
 				) {
-					filteredTemplates = filteredTemplates.filter( ( item ) => {
+					filteredData = filteredData.filter( ( item ) => {
 						return item.author_text !== filter.value;
 					} );
 				}
@@ -305,19 +374,19 @@ export default function DataviewsTemplates() {
 
 		// Handle sorting.
 		if ( view.sort ) {
-			filteredTemplates = sortByTextFields( {
-				data: filteredTemplates,
+			filteredData = sortByTextFields( {
+				data: filteredData,
 				view,
 				fields,
-				textFields: [ 'title' ],
+				textFields: [ 'title', 'author' ],
 			} );
 		}
 		// Handle pagination.
 		return getPaginationResults( {
-			data: filteredTemplates,
+			data: filteredData,
 			view,
 		} );
-	}, [ allTemplates, view, fields ] );
+	}, [ records, view, fields ] );
 
 	const resetTemplateAction = useResetTemplateAction();
 	const actions = useMemo(
@@ -339,89 +408,49 @@ export default function DataviewsTemplates() {
 						...defaultConfigPerViewType[ newView.type ],
 					},
 				};
+
+				history.push( {
+					...params,
+					layout: newView.type,
+				} );
 			}
 
 			setView( newView );
 		},
-		[ view.type, setView ]
+		[ view.type, setView, history, params ]
 	);
 
 	return (
-		<>
-			<Page
-				className={
-					view.type === LAYOUT_LIST
-						? 'edit-site-template-pages-list-view'
-						: null
-				}
-				title={ __( 'Templates' ) }
-				actions={
+		<Page
+			title={
+				postType === TEMPLATE_POST_TYPE
+					? __( 'Templates' )
+					: __( 'Template Parts' )
+			}
+			actions={
+				postType === TEMPLATE_POST_TYPE ? (
 					<AddNewTemplate
-						templateType={ TEMPLATE_POST_TYPE }
+						templateType={ postType }
 						showIcon={ false }
 						toggleProps={ { variant: 'primary' } }
 					/>
-				}
-			>
-				<DataViews
-					paginationInfo={ paginationInfo }
-					fields={ fields }
-					actions={ actions }
-					data={ data }
-					isLoading={ isLoadingData }
-					view={ view }
-					onChangeView={ onChangeView }
-					onSelectionChange={ onSelectionChange }
-					deferredRendering={
-						! view.hiddenFields?.includes( 'preview' )
-					}
-				/>
-			</Page>
-			{ view.type === LAYOUT_LIST && (
-				<Page>
-					<div
-						className="edit-site-template-pages-preview"
-						tabIndex={ 0 }
-						role="button"
-						onKeyDown={ ( event ) => {
-							const { keyCode } = event;
-							if ( keyCode === ENTER || keyCode === SPACE ) {
-								history.push( {
-									postId: templateId,
-									postType: TEMPLATE_POST_TYPE,
-									canvas: 'edit',
-								} );
-							}
-						} }
-						onClick={ () =>
-							history.push( {
-								postId: templateId,
-								postType: TEMPLATE_POST_TYPE,
-								canvas: 'edit',
-							} )
-						}
-					>
-						{ templateId !== null ? (
-							<PostPreview
-								postId={ templateId }
-								postType={ TEMPLATE_POST_TYPE }
-							/>
-						) : (
-							<div
-								style={ {
-									display: 'flex',
-									flexDirection: 'column',
-									justifyContent: 'center',
-									textAlign: 'center',
-									height: '100%',
-								} }
-							>
-								<p>{ __( 'Select a template to preview' ) }</p>
-							</div>
-						) }
-					</div>
-				</Page>
-			) }
-		</>
+				) : (
+					<AddNewTemplatePart />
+				)
+			}
+		>
+			<DataViews
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ data }
+				isLoading={ isLoadingData }
+				view={ view }
+				onChangeView={ onChangeView }
+				onSelectionChange={ onSelectionChange }
+				deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) }
+				supportedLayouts={ SUPPORTED_LAYOUTS }
+			/>
+		</Page>
 	);
 }

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

@@ -0,0 +1,44 @@
+.page-templates-preview-field {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-radius: 3px 3px 0 0;
+
+	.page-templates-preview-field__button {
+		box-shadow: none;
+		border: none;
+		padding: 0;
+		background-color: unset;
+		box-sizing: border-box;
+		cursor: pointer;
+		overflow: hidden;
+		height: 100%;
+		border-radius: 3px;
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+		}
+	}
+
+	&.is-viewtype-list {
+		.block-editor-block-preview__container {
+			height: 120px;
+		}
+	}
+
+	&.is-viewtype-grid {
+		.block-editor-block-preview__container {
+			height: auto;
+		}
+
+		.page-templates-preview-field__button {
+			border-radius: 3px 3px 0 0;
+		}
+	}
+}
+
+.page-templates-description {
+	white-space: normal;
+}