@wordpress/edit-site 3.0.10 → 3.0.14

package/src/components/keyboard-shortcuts/index.js

@@ -136,6 +136,38 @@ function KeyboardShortcutsRegister() {
 				character: ',',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+			],
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/list/actions/index.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import isTemplateRemovable from '../../../utils/is-template-removable';
+import isTemplateRevertable from '../../../utils/is-template-revertable';
+import RenameMenuItem from './rename-menu-item';
+
+export default function Actions( { template } ) {
+	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+	const { saveEditedEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } = useDispatch(
+		noticesStore
+	);
+
+	const isRemovable = isTemplateRemovable( template );
+	const isRevertable = isTemplateRevertable( template );
+
+	if ( ! isRemovable && ! isRevertable ) {
+		return null;
+	}
+
+	async function revertAndSaveTemplate() {
+		try {
+			await revertTemplate( template, { allowUndo: false } );
+			await saveEditedEntityRecord(
+				'postType',
+				template.type,
+				template.id
+			);
+
+			createSuccessNotice( __( 'Template reverted.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while reverting the template.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className="edit-site-list-table__actions"
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					{ isRemovable && (
+						<>
+							<RenameMenuItem
+								template={ template }
+								onClose={ onClose }
+							/>
+							<MenuItem
+								isDestructive
+								onClick={ () => {
+									removeTemplate( template );
+									onClose();
+								} }
+							>
+								{ __( 'Delete template' ) }
+							</MenuItem>
+						</>
+					) }
+					{ isRevertable && (
+						<MenuItem
+							info={ __( 'Restore template to default state' ) }
+							onClick={ () => {
+								revertAndSaveTemplate();
+								onClose();
+							} }
+						>
+							{ __( 'Clear customizations' ) }
+						</MenuItem>
+					) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/list/actions/rename-menu-item.js

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	MenuItem,
+	Modal,
+	TextControl,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function RenameMenuItem( { template, onClose } ) {
+	const [ title, setTitle ] = useState( () => template.title.rendered );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const { getLastEntitySaveError } = useSelect( coreStore );
+	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
+		coreStore
+	);
+	const { createSuccessNotice, createErrorNotice } = useDispatch(
+		noticesStore
+	);
+
+	if ( ! template.is_custom ) {
+		return null;
+	}
+
+	async function onTemplateRename( event ) {
+		event.preventDefault();
+
+		try {
+			await editEntityRecord( 'postType', template.type, template.id, {
+				title,
+			} );
+
+			// Update state before saving rerenders the list.
+			setTitle( '' );
+			setIsModalOpen( false );
+			onClose();
+
+			// Persist edited entity.
+			await saveEditedEntityRecord(
+				'postType',
+				template.type,
+				template.id
+			);
+
+			const lastError = getLastEntitySaveError(
+				'postType',
+				template.type,
+				template.id
+			);
+
+			if ( lastError ) {
+				throw lastError;
+			}
+
+			createSuccessNotice( __( 'Template has been renamed.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while renaming the template.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setIsModalOpen( true );
+					setTitle( template.title.rendered );
+				} }
+			>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Rename template' ) }
+					closeLabel={ __( 'Close' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="edit-site-list__rename-modal"
+				>
+					<form onSubmit={ onTemplateRename }>
+						<Flex align="flex-start" gap={ 8 }>
+							<FlexItem>
+								<TextControl
+									label={ __( 'Name' ) }
+									value={ title }
+									onChange={ setTitle }
+									required
+								/>
+							</FlexItem>
+						</Flex>
+
+						<Flex
+							className="edit-site-list__rename-modal-actions"
+							justify="flex-end"
+							expanded={ false }
+						>
+							<FlexItem>
+								<Button
+									variant="tertiary"
+									onClick={ () => {
+										setIsModalOpen( false );
+									} }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+							</FlexItem>
+							<FlexItem>
+								<Button variant="primary" type="submit">
+									{ __( 'Save' ) }
+								</Button>
+							</FlexItem>
+						</Flex>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}

package/src/components/list/added-by.js

@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	Icon,
+	Tooltip,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { layout as themeIcon, plugins as pluginIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
+
+function CustomizedTooltip( { isCustomized, children } ) {
+	if ( ! isCustomized ) {
+		return children;
+	}
+
+	return (
+		<Tooltip text={ __( 'This template has been customized' ) }>
+			{ children }
+		</Tooltip>
+	);
+}
+
+function AddedByTheme( { slug, isCustomized } ) {
+	const theme = useSelect(
+		( select ) => select( coreStore ).getTheme( slug ),
+		[ slug ]
+	);
+
+	return (
+		<HStack alignment="left">
+			<CustomizedTooltip isCustomized={ isCustomized }>
+				<div
+					className={ classnames( 'edit-site-list-added-by__icon', {
+						'is-customized': isCustomized,
+					} ) }
+				>
+					<Icon icon={ themeIcon } />
+				</div>
+			</CustomizedTooltip>
+			<span>{ theme?.name?.rendered || slug }</span>
+		</HStack>
+	);
+}
+
+function AddedByPlugin( { slug, isCustomized } ) {
+	const plugin = useSelect(
+		( select ) => select( coreStore ).getPlugin( slug ),
+		[ slug ]
+	);
+
+	return (
+		<HStack alignment="left">
+			<CustomizedTooltip isCustomized={ isCustomized }>
+				<div className="edit-site-list-added-by__icon">
+					<Icon icon={ pluginIcon } />
+				</div>
+			</CustomizedTooltip>
+			<span>{ plugin?.name || slug }</span>
+		</HStack>
+	);
+}
+
+function AddedByAuthor( { id } ) {
+	const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [
+		id,
+	] );
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+
+	return (
+		<HStack alignment="left">
+			<div
+				className={ classnames( 'edit-site-list-added-by__avatar', {
+					'is-loaded': isImageLoaded,
+				} ) }
+			>
+				<img
+					onLoad={ () => setIsImageLoaded( true ) }
+					alt=""
+					src={ user?.avatar_urls[ 48 ] }
+				/>
+			</div>
+			<span>{ user?.nickname }</span>
+		</HStack>
+	);
+}
+
+function AddedBySite() {
+	const { name, logoURL } = useSelect( ( select ) => {
+		const { getEntityRecord, getMedia } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+
+		return {
+			name: siteData.name,
+			logoURL: siteData?.site_logo
+				? getMedia( siteData.site_logo )?.source_url
+				: undefined,
+		};
+	}, [] );
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+
+	return (
+		<HStack alignment="left">
+			<div
+				className={ classnames( 'edit-site-list-added-by__avatar', {
+					'is-loaded': isImageLoaded,
+				} ) }
+			>
+				<img
+					onLoad={ () => setIsImageLoaded( true ) }
+					alt=""
+					src={ logoURL }
+				/>
+			</div>
+			<span>{ name }</span>
+		</HStack>
+	);
+}
+
+export default function AddedBy( { templateType, template } ) {
+	if ( ! template ) {
+		return;
+	}
+
+	if ( TEMPLATE_POST_TYPE_NAMES.includes( templateType ) ) {
+		// Template originally provided by a theme, but customized by a user.
+		// Templates originally didn't have the 'origin' field so identify
+		// older customized templates by checking for no origin and a 'theme'
+		// or 'custom' source.
+		if (
+			template.has_theme_file &&
+			( template.origin === 'theme' ||
+				( ! template.origin &&
+					[ 'theme', 'custom' ].includes( template.source ) ) )
+		) {
+			return (
+				<AddedByTheme
+					slug={ template.theme }
+					isCustomized={ template.source === 'custom' }
+				/>
+			);
+		}
+
+		// Template originally provided by a plugin, but customized by a user.
+		if ( template.has_theme_file && template.origin === 'plugin' ) {
+			return (
+				<AddedByPlugin
+					slug={ template.theme }
+					isCustomized={ template.source === 'custom' }
+				/>
+			);
+		}
+
+		// Template was created from scratch, but has no author. Author support
+		// was only added to templates in WordPress 5.9. Fallback to showing the
+		// site logo and title.
+		if (
+			! template.has_theme_file &&
+			template.source === 'custom' &&
+			! template.author
+		) {
+			return <AddedBySite />;
+		}
+	}
+
+	// Simply show the author for templates created from scratch that have an
+	// author or for any other post type.
+	return <AddedByAuthor id={ template.author } />;
+}

package/src/components/list/index.js

@@ -1,38 +1,96 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { InterfaceSkeleton } from '@wordpress/interface';
-import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { EditorSnackbars } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
+import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
 import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
+import { store as editSiteStore } from '../../store';
 
 export default function List( { templateType } ) {
-	const isDesktopViewport = useViewportMatch( 'medium' );
+	useRegisterShortcuts();
+
+	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
+		( select ) => {
+			return {
+				previousShortcut: select(
+					keyboardShortcutsStore
+				).getAllShortcutKeyCombinations(
+					'core/edit-site/previous-region'
+				),
+				nextShortcut: select(
+					keyboardShortcutsStore
+				).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
+			};
+		},
+		[]
+	);
+
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	// `postType` could load in asynchronously. Only provide the detailed region labels if
+	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
+	const itemsListLabel = postType?.labels?.items_list;
+	const detailedRegionLabels = postType
+		? {
+				header: sprintf(
+					// translators: %s - the name of the page, 'Header' as in the header area of that page.
+					__( '%s - Header' ),
+					itemsListLabel
+				),
+				body: sprintf(
+					// translators: %s - the name of the page, 'Content' as in the content area of that page.
+					__( '%s - Content' ),
+					itemsListLabel
+				),
+		  }
+		: undefined;
 
 	return (
 		<InterfaceSkeleton
-			className="edit-site-list"
+			className={ classnames( 'edit-site-list', {
+				'is-navigation-open': isNavigationOpen,
+			} ) }
 			labels={ {
 				drawer: __( 'Navigation Sidebar' ),
+				...detailedRegionLabels,
 			} }
 			header={ <Header templateType={ templateType } /> }
 			drawer={
 				<NavigationSidebar
-					defaultIsOpen={ isDesktopViewport }
 					activeTemplateType={ templateType }
+					isDefaultOpen
 				/>
 			}
+			notices={ <EditorSnackbars /> }
 			content={
 				<main className="edit-site-list-main">
 					<Table templateType={ templateType } />
 				</main>
 			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
 		/>
 	);
 }

package/src/components/list/style.scss

@@ -61,12 +61,14 @@
 
 .edit-site-list-table {
 	width: 100%;
-	border: $border-width solid $gray-200;
+	border: $border-width solid $gray-300;
 	border-radius: 2px;
 	margin: 0;
 	overflow: hidden;
+	border-spacing: 0;
+	max-width: 960px;
 
-	li {
+	tr {
 		display: flex;
 		align-items: center;
 		padding: $grid-unit-20;
@@ -74,40 +76,133 @@
 		border-top: $border-width solid $gray-100;
 		margin: 0;
 
+		&:first-child {
+			border-top: 0;
+		}
+
 		@include break-medium() {
 			padding: $grid-unit-30 $grid-unit-40;
 		}
 
+		// Template.
 		.edit-site-list-table-column:nth-child(1) {
-			width: calc(60% - 36px);
+			width: calc(60% - 18px);
+			padding-right: $grid-unit-30;
 
 			a {
-				display: block;
+				display: inline-block;
 				text-decoration: none;
 				font-weight: 500;
 				margin-bottom: $grid-unit-05;
 			}
 		}
 
+		// Added by.
 		.edit-site-list-table-column:nth-child(2) {
-			width: calc(40% - 36px);
+			width: calc(40% - 18px);
 		}
 
+		// Actions.
 		.edit-site-list-table-column:nth-child(3) {
 			min-width: $button-size;
+			flex-shrink: 0;
 		}
 	}
 
-	li.edit-site-list-table-head {
-		border-bottom: $border-width solid $gray-200;
+	tr.edit-site-list-table-head {
 		font-size: 16px;
-		font-weight: 500;
+		font-weight: 600;
 		text-align: left;
-		color: $black;
+		color: $gray-900;
 		border-top: none;
+		border-bottom: $border-width solid $gray-300;
 
-		& + li {
-			border-top: 0;
+		th {
+			font-weight: inherit;
+		}
+	}
+}
+
+.edit-site-list.is-navigation-open .components-snackbar-list {
+	@include break-medium() {
+		margin-left: $nav-sidebar-width;
+	}
+}
+
+.edit-site-list__rename-modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-site-list__rename-modal-actions {
+	margin-top: $grid-unit-15;
+}
+
+.edit-site-template__actions {
+	button:not(:last-child) {
+		margin-right: $grid-unit-10;
+	}
+}
+
+.edit-site-list-added-by__icon {
+	display: flex;
+	flex-shrink: 0;
+	position: relative;
+	align-items: center;
+	justify-content: center;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+	background: $gray-800;
+	border-radius: 100%;
+
+	svg {
+		fill: $white;
+	}
+
+	&.is-customized::after {
+		position: absolute;
+		content: "";
+		background: var(--wp-admin-theme-color);
+		height: $grid-unit-10;
+		width: $grid-unit-10;
+		outline: 2px solid $white;
+		border-radius: 100%;
+		top: -1px;
+		right: -1px;
+	}
+}
+
+.edit-site-list-added-by__avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	border-radius: 100%;
+	background: $gray-800;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+
+	img {
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
 		}
 	}
 }