@wordpress/edit-site 5.22.0 → 5.24.0

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

@@ -0,0 +1,345 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	VisuallyHidden,
+} 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';
+import { parse } from '@wordpress/blocks';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * 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 { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
+import {
+	useResetTemplateAction,
+	deleteTemplateAction,
+	renameTemplateAction,
+} from './template-actions';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
+
+const EMPTY_ARRAY = [];
+
+const defaultConfigPerViewType = {
+	list: {},
+	grid: {
+		mediaField: 'preview',
+		primaryField: 'title',
+	},
+};
+
+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: [ 'preview' ],
+	layout: {},
+	filters: [],
+};
+
+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" spacing={ 1 }>
+			{ imageUrl ? (
+				<AvatarImage imageUrl={ imageUrl } />
+			) : (
+				<div className="edit-site-list-added-by__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ text }</span>
+		</HStack>
+	);
+}
+
+function TemplatePreview( { content, viewType } ) {
+	const settings = usePatternSettings();
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const blocks = useMemo( () => {
+		return parse( content );
+	}, [ content ] );
+	if ( ! blocks?.length ) {
+		return null;
+	}
+	// 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 } }
+			>
+				<BlockPreview blocks={ blocks } />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+}
+
+export default function DataviewsTemplates() {
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const { records: allTemplates, isResolving: isLoadingData } =
+		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+			per_page: -1,
+		} );
+
+	const authors = useMemo( () => {
+		if ( ! allTemplates ) {
+			return EMPTY_ARRAY;
+		}
+		const authorsSet = new Set();
+		allTemplates.forEach( ( template ) => {
+			authorsSet.add( template.author_text );
+		} );
+		return Array.from( authorsSet ).map( ( author ) => ( {
+			value: author,
+			label: author,
+		} ) );
+	}, [ allTemplates ] );
+
+	const fields = useMemo(
+		() => [
+			{
+				header: __( 'Preview' ),
+				id: 'preview',
+				render: ( { item, view: { type: viewType } } ) => {
+					return (
+						<TemplatePreview
+							content={ item.content.raw }
+							viewType={ viewType }
+						/>
+					);
+				},
+				minWidth: 120,
+				maxWidth: 120,
+				enableSorting: false,
+			},
+			{
+				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 ? (
+						decodeEntities( item.description )
+					) : (
+						<>
+							<Text variant="muted" aria-hidden="true">
+								&#8212;
+							</Text>
+							<VisuallyHidden>
+								{ __( 'No description.' ) }
+							</VisuallyHidden>
+						</>
+					);
+				},
+				maxWidth: 200,
+				enableSorting: false,
+			},
+			{
+				header: __( 'Author' ),
+				id: 'author',
+				getValue: ( { item } ) => item.author_text,
+				render: ( { item } ) => {
+					return <AuthorField item={ item } />;
+				},
+				enableHiding: false,
+				type: ENUMERATION_TYPE,
+				elements: authors,
+			},
+		],
+		[ authors ]
+	);
+
+	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 filters.
+		if ( view.filters.length > 0 ) {
+			view.filters.forEach( ( filter ) => {
+				if (
+					filter.field === 'author' &&
+					filter.operator === OPERATOR_IN &&
+					!! filter.value
+				) {
+					filteredTemplates = filteredTemplates.filter( ( item ) => {
+						return item.author_text === filter.value;
+					} );
+				}
+			} );
+		}
+
+		// Handle sorting.
+		if ( view.sort ) {
+			const stringSortingFields = [ 'title', 'author' ];
+			const fieldId = view.sort.field;
+			if ( stringSortingFields.includes( fieldId ) ) {
+				const fieldToSort = fields.find( ( field ) => {
+					return field.id === fieldId;
+				} );
+				filteredTemplates.sort( ( a, b ) => {
+					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
+					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
+					return view.sort.direction === 'asc'
+						? valueA.localeCompare( valueB )
+						: valueB.localeCompare( valueA );
+				} );
+			}
+		}
+
+		// 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, fields ] );
+
+	const resetTemplateAction = useResetTemplateAction();
+	const actions = useMemo(
+		() => [
+			resetTemplateAction,
+			deleteTemplateAction,
+			renameTemplateAction,
+		],
+		[ resetTemplateAction ]
+	);
+	const onChangeView = useCallback(
+		( viewUpdater ) => {
+			let updatedView =
+				typeof viewUpdater === 'function'
+					? viewUpdater( view )
+					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
+			setView( updatedView );
+		},
+		[ view, setView ]
+	);
+	return (
+		<Page title={ __( 'Templates' ) }>
+			<DataViews
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ shownTemplates }
+				getItemId={ ( item ) => item.id }
+				isLoading={ isLoadingData }
+				view={ view }
+				onChangeView={ onChangeView }
+				supportedLayouts={ [ 'list', 'grid' ] }
+			/>
+		</Page>
+	);
+}

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

@@ -0,0 +1,13 @@
+.page-templates-preview-field {
+	&.is-viewtype-list {
+		.block-editor-block-preview__container {
+			height: 120px;
+		}
+	}
+
+	&.is-viewtype-grid {
+		.block-editor-block-preview__container {
+			height: auto;
+		}
+	}
+}

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/preferences-modal/index.js

@@ -34,7 +34,7 @@ export default function EditSitePreferencesModal() {
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setPreference( 'core/edit-site', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();

package/src/components/save-button/index.js

@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
 
@@ -11,7 +11,10 @@ import { displayShortcut } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
 
 export default function SaveButton( {
 	className = 'edit-site-save-button__button',
@@ -21,24 +24,34 @@ export default function SaveButton( {
 	icon,
 	__next40pxDefaultSize = false,
 } ) {
-	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
-		const {
-			__experimentalGetDirtyEntityRecords,
-			isSavingEntityRecord,
-			isResolving,
-		} = select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		const { isSaveViewOpened } = select( editSiteStore );
-		const isActivatingTheme = isResolving( 'activateTheme' );
-		return {
-			isDirty: dirtyEntityRecords.length > 0,
-			isSaving:
-				dirtyEntityRecords.some( ( record ) =>
-					isSavingEntityRecord( record.kind, record.name, record.key )
-				) || isActivatingTheme,
-			isSaveViewOpen: isSaveViewOpened(),
-		};
-	}, [] );
+	const { isDirty, isSaving, isSaveViewOpen, previewingThemeName } =
+		useSelect( ( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				isSavingEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const { isSaveViewOpened } = select( editSiteStore );
+			const isActivatingTheme = isResolving( 'activateTheme' );
+			const previewingTheme = select( coreStore ).getTheme(
+				currentlyPreviewingTheme()
+			);
+
+			return {
+				isDirty: dirtyEntityRecords.length > 0,
+				isSaving:
+					dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					) || isActivatingTheme,
+				isSaveViewOpen: isSaveViewOpened(),
+				previewingThemeName: previewingTheme?.name?.rendered,
+			};
+		}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	const activateSaveEnabled = isPreviewingTheme() || isDirty;
@@ -47,13 +60,13 @@ export default function SaveButton( {
 	const getLabel = () => {
 		if ( isPreviewingTheme() ) {
 			if ( isSaving ) {
-				return __( 'Activating' );
+				return sprintf( 'Activating %s', previewingThemeName );
 			} else if ( disabled ) {
 				return __( 'Saved' );
 			} else if ( isDirty ) {
-				return __( 'Activate & Save' );
+				return sprintf( 'Activate %s & Save', previewingThemeName );
 			}
-			return __( 'Activate' );
+			return sprintf( 'Activate %s', previewingThemeName );
 		}
 
 		if ( isSaving ) {
@@ -85,7 +98,7 @@ export default function SaveButton( {
 			 * Displaying the keyboard shortcut conditionally makes the tooltip
 			 * itself show conditionally. This would trigger a full-rerendering
 			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 * the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
 			showTooltip={ showTooltip }
 			icon={ icon }

package/src/components/save-hub/index.js

@@ -106,6 +106,15 @@ export default function SaveHub() {
 		label = __( 'Saving' );
 	}
 
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
 	const saveCurrentEntity = async () => {
 		if ( ! dirtyCurrentEntity ) return;
 
@@ -135,6 +144,12 @@ export default function SaveHub() {
 
 			createSuccessNotice( __( 'Site updated.' ), {
 				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'View site' ),
+						url: homeUrl,
+					},
+				],
 				id: saveNoticeId,
 			} );
 		} catch ( error ) {