@wordpress/edit-site 5.22.0 → 5.23.0

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

@@ -0,0 +1,224 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Link from '../routes/link';
+import { useAddedBy, AvatarImage } from '../list/added-by';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { DataViews } from '../dataviews';
+import {
+	useResetTemplateAction,
+	deleteTemplateAction,
+	renameTemplateAction,
+} from './template-actions';
+
+const EMPTY_ARRAY = [];
+
+const DEFAULT_VIEW = {
+	type: 'list',
+	search: '',
+	page: 1,
+	perPage: 20,
+	// All fields are visible by default, so it's
+	// better to keep track of the hidden ones.
+	hiddenFields: [],
+	layout: {},
+};
+
+function normalizeSearchInput( input = '' ) {
+	return removeAccents( input.trim().toLowerCase() );
+}
+
+// TODO: these are going to be reused in the template part list.
+// That's the reason for leaving the template parts code for now.
+function TemplateTitle( { item } ) {
+	const { isCustomized } = useAddedBy( item.type, item.id );
+	return (
+		<VStack spacing={ 1 }>
+			<Heading as="h3" level={ 5 }>
+				<Link
+					params={ {
+						postId: item.id,
+						postType: item.type,
+						canvas: 'edit',
+					} }
+				>
+					{ decodeEntities( item.title?.rendered || item.slug ) ||
+						__( '(no title)' ) }
+				</Link>
+			</Heading>
+			{ isCustomized && (
+				<span className="edit-site-list-added-by__customized-info">
+					{ item.type === TEMPLATE_POST_TYPE
+						? _x( 'Customized', 'template' )
+						: _x( 'Customized', 'template part' ) }
+				</span>
+			) }
+		</VStack>
+	);
+}
+
+function AuthorField( { item } ) {
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+	return (
+		<HStack alignment="left">
+			{ imageUrl ? (
+				<AvatarImage imageUrl={ imageUrl } />
+			) : (
+				<div className="edit-site-list-added-by__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ text }</span>
+		</HStack>
+	);
+}
+
+export default function DataviewsTemplates() {
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const { records: allTemplates, isResolving: isLoadingData } =
+		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+			per_page: -1,
+		} );
+	const { shownTemplates, paginationInfo } = useMemo( () => {
+		if ( ! allTemplates ) {
+			return {
+				shownTemplates: EMPTY_ARRAY,
+				paginationInfo: { totalItems: 0, totalPages: 0 },
+			};
+		}
+		let filteredTemplates = [ ...allTemplates ];
+		// Handle global search.
+		if ( view.search ) {
+			const normalizedSearch = normalizeSearchInput( view.search );
+			filteredTemplates = filteredTemplates.filter( ( item ) => {
+				const title = item.title?.rendered || item.slug;
+				return (
+					normalizeSearchInput( title ).includes(
+						normalizedSearch
+					) ||
+					normalizeSearchInput( item.description ).includes(
+						normalizedSearch
+					)
+				);
+			} );
+		}
+		// Handle sorting.
+		// TODO: Explore how this can be more dynamic..
+		if ( view.sort ) {
+			if ( view.sort.field === 'title' ) {
+				filteredTemplates.sort( ( a, b ) => {
+					const titleA = a.title?.rendered || a.slug;
+					const titleB = b.title?.rendered || b.slug;
+					return view.sort.direction === 'asc'
+						? titleA.localeCompare( titleB )
+						: titleB.localeCompare( titleA );
+				} );
+			}
+		}
+		// Handle pagination.
+		const start = ( view.page - 1 ) * view.perPage;
+		const totalItems = filteredTemplates?.length || 0;
+		filteredTemplates = filteredTemplates?.slice(
+			start,
+			start + view.perPage
+		);
+		return {
+			shownTemplates: filteredTemplates,
+			paginationInfo: {
+				totalItems,
+				totalPages: Math.ceil( totalItems / view.perPage ),
+			},
+		};
+	}, [ allTemplates, view ] );
+	const fields = useMemo(
+		() => [
+			{
+				header: __( 'Template' ),
+				id: 'title',
+				getValue: ( { item } ) => item.title?.rendered || item.slug,
+				render: ( { item } ) => <TemplateTitle item={ item } />,
+				maxWidth: 400,
+				enableHiding: false,
+			},
+			{
+				header: __( 'Description' ),
+				id: 'description',
+				getValue: ( { item } ) => item.description,
+				render: ( { item } ) => {
+					return (
+						item.description && (
+							<Text variant="muted">
+								{ decodeEntities( item.description ) }
+							</Text>
+						)
+					);
+				},
+				maxWidth: 200,
+				enableSorting: false,
+			},
+			{
+				header: __( 'Author' ),
+				id: 'author',
+				getValue: () => {},
+				render: ( { item } ) => <AuthorField item={ item } />,
+				enableHiding: false,
+				enableSorting: false,
+			},
+		],
+		[]
+	);
+	const resetTemplateAction = useResetTemplateAction();
+	const actions = useMemo(
+		() => [
+			resetTemplateAction,
+			deleteTemplateAction,
+			renameTemplateAction,
+		],
+		[ resetTemplateAction ]
+	);
+	const onChangeView = useCallback(
+		( viewUpdater ) => {
+			const updatedView =
+				typeof viewUpdater === 'function'
+					? viewUpdater( view )
+					: viewUpdater;
+			setView( updatedView );
+		},
+		[ view, setView ]
+	);
+	return (
+		<Page title={ __( 'Templates' ) }>
+			<DataViews
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ shownTemplates }
+				isLoading={ isLoadingData }
+				view={ view }
+				onChangeView={ onChangeView }
+				supportedLayouts={ [ 'list' ] }
+			/>
+		</Page>
+	);
+}

package/src/components/page-templates/template-actions.js

@@ -0,0 +1,209 @@
+/**
+ * WordPress dependencies
+ */
+import { backup, trash } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	Button,
+	TextControl,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import isTemplateRevertable from '../../utils/is-template-revertable';
+import isTemplateRemovable from '../../utils/is-template-removable';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
+export function useResetTemplateAction() {
+	const { revertTemplate } = useDispatch( editSiteStore );
+	const { saveEditedEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	return useMemo(
+		() => ( {
+			id: 'reset-template',
+			label: __( 'Reset template' ),
+			isPrimary: true,
+			icon: backup,
+			isEligible: isTemplateRevertable,
+			async callback( template ) {
+				try {
+					await revertTemplate( template, { allowUndo: false } );
+					await saveEditedEntityRecord(
+						'postType',
+						template.type,
+						template.id
+					);
+
+					createSuccessNotice(
+						sprintf(
+							/* translators: The template/part's name. */
+							__( '"%s" reverted.' ),
+							decodeEntities( template.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-template-reverted',
+						}
+					);
+				} catch ( error ) {
+					const fallbackErrorMessage =
+						template.type === TEMPLATE_POST_TYPE
+							? __(
+									'An error occurred while reverting the template.'
+							  )
+							: __(
+									'An error occurred while reverting the template part.'
+							  );
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: fallbackErrorMessage;
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[
+			createErrorNotice,
+			createSuccessNotice,
+			revertTemplate,
+			saveEditedEntityRecord,
+		]
+	);
+}
+
+export const deleteTemplateAction = {
+	id: 'delete-template',
+	label: __( 'Delete template' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible: isTemplateRemovable,
+	hideModalHeader: true,
+	RenderModal: ( { item: template, closeModal } ) => {
+		const { removeTemplate } = useDispatch( editSiteStore );
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ sprintf(
+						// translators: %s: The template or template part's title.
+						__( 'Are you sure you want to delete "%s"?' ),
+						decodeEntities( template.title.rendered )
+					) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ () =>
+							removeTemplate( template, {
+								allowUndo: false,
+							} )
+						}
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export const renameTemplateAction = {
+	id: 'rename-template',
+	label: __( 'Rename' ),
+	isEligible: ( template ) =>
+		isTemplateRemovable( template ) && template.is_custom,
+	RenderModal: ( { item: template, closeModal } ) => {
+		const title = decodeEntities( template.title.rendered );
+		const [ editedTitle, setEditedTitle ] = useState( title );
+		const {
+			editEntityRecord,
+			__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+		} = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		async function onTemplateRename( event ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord(
+					'postType',
+					template.type,
+					template.id,
+					{
+						title: editedTitle,
+					}
+				);
+				// Update state before saving rerenders the list.
+				setEditedTitle( '' );
+				closeModal();
+				// Persist edited entity.
+				await saveSpecifiedEntityEdits(
+					'postType',
+					template.type,
+					template.id,
+					[ 'title' ], // Only save title to avoid persisting other edits.
+					{
+						throwOnError: true,
+					}
+				);
+				// TODO: this action will be reused in template parts list, so
+				// let's keep this for a bit, even it's always a `template` now.
+				createSuccessNotice(
+					template.type === TEMPLATE_POST_TYPE
+						? __( 'Template renamed.' )
+						: __( 'Template part renamed.' ),
+					{
+						type: 'snackbar',
+					}
+				);
+			} catch ( error ) {
+				const fallbackErrorMessage =
+					template.type === TEMPLATE_POST_TYPE
+						? __( 'An error occurred while renaming the template.' )
+						: __(
+								'An error occurred while renaming the template part.'
+						  );
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: fallbackErrorMessage;
+
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+		return (
+			<form onSubmit={ onTemplateRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ editedTitle }
+						onChange={ setEditedTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ closeModal }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button variant="primary" type="submit">
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};

package/src/components/sidebar/index.js

@@ -59,8 +59,7 @@ function SidebarScreens() {
 			{ window?.__experimentalAdminViews && (
 				<NavigatorScreen path="/pages">
 					<SidebarNavigationScreen
-						title={ __( 'All Pages' ) }
-						description={ __( 'Manage your pages.' ) }
+						title={ __( 'Pages' ) }
 						backPath="/page"
 						content={ <DataViewsSidebarContent /> }
 					/>

package/src/components/sidebar-dataviews/add-new-view.js

@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import DEFAULT_VIEWS from './default-views';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+function AddNewItemModalContent( { type, setIsAdding } ) {
+	const {
+		params: { path },
+	} = useLocation();
+	const history = useHistory();
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const [ title, setTitle ] = useState( '' );
+	const [ isSaving, setIsSaving ] = useState( false );
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				setIsSaving( true );
+				const { getEntityRecords } = resolveSelect( coreStore );
+				let dataViewTaxonomyId;
+				const dataViewTypeRecords = await getEntityRecords(
+					'taxonomy',
+					'wp_dataviews_type',
+					{ slug: type }
+				);
+				if ( dataViewTypeRecords && dataViewTypeRecords.length > 0 ) {
+					dataViewTaxonomyId = dataViewTypeRecords[ 0 ].id;
+				} else {
+					const record = await saveEntityRecord(
+						'taxonomy',
+						'wp_dataviews_type',
+						{ name: type }
+					);
+					if ( record && record.id ) {
+						dataViewTaxonomyId = record.id;
+					}
+				}
+				const savedRecord = await saveEntityRecord(
+					'postType',
+					'wp_dataviews',
+					{
+						title,
+						status: 'publish',
+						wp_dataviews_type: dataViewTaxonomyId,
+						content: JSON.stringify(
+							DEFAULT_VIEWS[ type ][ 0 ].view
+						),
+					}
+				);
+				history.push( {
+					path,
+					activeView: savedRecord.id,
+					isCustom: 'true',
+				} );
+				setIsSaving( false );
+				setIsAdding( false );
+			} }
+		>
+			<VStack spacing="5">
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ __( 'My view' ) }
+					className="patterns-create-modal__name-input"
+				/>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							setIsAdding( false );
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+
+					<Button
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSaving }
+						isBusy={ isSaving }
+					>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+export default function AddNewItem( { type } ) {
+	const [ isAdding, setIsAdding ] = useState( false );
+	return (
+		<>
+			<SidebarNavigationItem
+				icon={ plus }
+				onClick={ () => {
+					setIsAdding( true );
+				} }
+				className="dataviews__siderbar-content-add-new-item"
+			>
+				{ __( 'New view' ) }
+			</SidebarNavigationItem>
+			{ isAdding && (
+				<Modal
+					title={ __( 'Add new view' ) }
+					onRequestClose={ () => {
+						setIsAdding( false );
+					} }
+				>
+					<AddNewItemModalContent
+						type={ type }
+						setIsAdding={ setIsAdding }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}