@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/page/index.js

@@ -1,15 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import {
-	EditorSnackbars,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -27,7 +24,7 @@ export default function Page( {
 	className,
 	hideTitleFromUI = false,
 } ) {
-	const classes = classnames( 'edit-site-page', className );
+	const classes = clsx( 'edit-site-page', className );
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>
@@ -41,7 +38,6 @@ export default function Page( {
 				) }
 				{ children }
 			</div>
-			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }

package/src/components/page/style.scss

@@ -2,25 +2,39 @@
 	color: $gray-800;
 	background: $white;
 	height: 100%;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: edit-site-page / inline-size;
+	transition: width ease-out 0.2s;
+	@include reduce-motion("transition");
 }
 
 .edit-site-page-header {
-	padding: $grid-unit-20 $grid-unit-40;
-	min-height: $grid-unit * 9;
+	padding: $grid-unit-20 $grid-unit-60;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
-	.components-text {
-		color: $gray-800;
-	}
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
 	.components-heading {
 		color: $gray-900;
 	}
+
+	.edit-site-page-header__page-title {
+		min-height: $grid-unit-50;
+	}
+
 	.edit-site-page-header__sub-title {
-		margin-top: $grid-unit-10;
-		color: $gray-700;
+		margin-bottom: $grid-unit-10;
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.edit-site-page-header {
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 

package/src/components/page-pages/index.js

@@ -1,11 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useState,
+	useMemo,
+	useCallback,
+	useEffect,
+} from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -32,16 +38,22 @@ import {
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
-
 const { useLocation, useHistory } = unlock( routerPrivateApis );
-
 const EMPTY_ARRAY = [];
 
+const getFormattedDate = ( dateToDisplay ) =>
+	dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( dateToDisplay )
+	);
+
 function useView( postType ) {
-	const { params } = useLocation();
-	const { activeView = 'all', isCustom = 'false', layout } = params;
+	const {
+		params: { activeView = 'all', isCustom = 'false', layout },
+	} = useLocation();
 	const history = useHistory();
 	const selectedDefaultView = useMemo( () => {
 		const defaultView =
@@ -117,6 +129,7 @@ function useView( postType ) {
 	const setDefaultViewAndUpdateUrl = useCallback(
 		( viewToSet ) => {
 			if ( viewToSet.type !== view?.type ) {
+				const { params } = history.getLocationWithParams();
 				history.push( {
 					...params,
 					layout: viewToSet.type,
@@ -124,7 +137,7 @@ function useView( postType ) {
 			}
 			setView( viewToSet );
 		},
-		[ params, view?.type, history ]
+		[ history, view?.type ]
 	);
 
 	if ( isCustom === 'false' ) {
@@ -188,46 +201,25 @@ function FeaturedImage( { item, viewType } ) {
 	);
 }
 
-let PAGE_ACTIONS = [
-	'edit-post',
-	'view-post',
-	'restore',
-	'permanently-delete',
-	'view-post-revisions',
-	'rename-post',
-	'move-to-trash',
-];
-
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	PAGE_ACTIONS = [
-		'edit-post',
-		'view-post',
-		'restore',
-		'permanently-delete',
-		'view-post-revisions',
-		'duplicate-post',
-		'rename-post',
-		'move-to-trash',
-	];
-}
-
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
-	const { params } = useLocation();
-	const { isCustom = 'false' } = params;
 
 	const onSelectionChange = useCallback(
 		( items ) => {
-			if ( isCustom === 'false' && view?.type === LAYOUT_LIST ) {
+			const { params } = history.getLocationWithParams();
+			if (
+				( params.isCustom ?? 'false' ) === 'false' &&
+				view?.type === LAYOUT_LIST
+			) {
 				history.push( {
 					...params,
 					postId: items.length === 1 ? items[ 0 ].id : undefined,
 				} );
 			}
 		},
-		[ history, params, view?.type, isCustom ]
+		[ history, view?.type ]
 	);
 
 	const queryArgs = useMemo( () => {
@@ -285,6 +277,16 @@ export default function PagePages() {
 		[ totalItems, totalPages ]
 	);
 
+	const { frontPageId, postsPageId, addNewLabel } = useSelect( ( select ) => {
+		const { getEntityRecord, getPostType } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+			addNewLabel: getPostType( 'page' )?.labels?.add_new_item,
+		};
+	} );
+
 	const fields = useMemo(
 		() => [
 			{
@@ -305,7 +307,7 @@ export default function PagePages() {
 					const addLink =
 						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
 						item.status !== 'trash';
-					return addLink ? (
+					const title = addLink ? (
 						<Link
 							params={ {
 								postId: item.id,
@@ -317,8 +319,36 @@ export default function PagePages() {
 								__( '(no title)' ) }
 						</Link>
 					) : (
-						decodeEntities( item.title?.rendered ) ||
-							__( '(no title)' )
+						<span>
+							{ decodeEntities( item.title?.rendered ) ||
+								__( '(no title)' ) }
+						</span>
+					);
+
+					let suffix = '';
+					if ( item.id === frontPageId ) {
+						suffix = (
+							<span className="edit-site-page-pages__title-badge">
+								{ __( 'Front Page' ) }
+							</span>
+						);
+					} else if ( item.id === postsPageId ) {
+						suffix = (
+							<span className="edit-site-page-pages__title-badge">
+								{ __( 'Posts Page' ) }
+							</span>
+						);
+					}
+
+					return (
+						<HStack
+							className="edit-site-page-pages-title"
+							alignment="center"
+							justify="flex-start"
+						>
+							{ title }
+							{ suffix }
+						</HStack>
 					);
 				},
 				maxWidth: 300,
@@ -350,30 +380,89 @@ export default function PagePages() {
 				header: __( 'Date' ),
 				id: 'date',
 				render: ( { item } ) => {
-					const formattedDate = dateI18n(
-						getSettings().formats.datetimeAbbreviated,
-						getDate( item.date )
+					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
+						item.status
 					);
-					return <time>{ formattedDate }</time>;
+					if ( isDraftOrPrivate ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: page creation date */
+								__( '<span>Modified: <time>%s</time></span>' ),
+								getFormattedDate( item.date )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					const isScheduled = item.status === 'future';
+					if ( isScheduled ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: page creation date */
+								__( '<span>Scheduled: <time>%s</time></span>' ),
+								getFormattedDate( item.date )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					// Pending & Published posts show the modified date if it's newer.
+					const dateToDisplay =
+						getDate( item.modified ) > getDate( item.date )
+							? item.modified
+							: item.date;
+
+					const isPending = item.status === 'pending';
+					if ( isPending ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: the newest of created or modified date for the page */
+								__( '<span>Modified: <time>%s</time></span>' ),
+								getFormattedDate( dateToDisplay )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					const isPublished = item.status === 'publish';
+					if ( isPublished ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: the newest of created or modified date for the page */
+								__( '<span>Published: <time>%s</time></span>' ),
+								getFormattedDate( dateToDisplay )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					// Unknow status.
+					return <time>{ getFormattedDate( item.date ) }</time>;
 				},
 			},
 		],
-		[ authors, view.type ]
+		[ authors, view.type, frontPageId, postsPageId ]
 	);
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'edit-post' ) {
-				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					canvas: 'edit',
-				} );
-			}
-		},
-		[ history ]
+
+	const postTypeActions = usePostActions( 'page' );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
 	);
-	const actions = usePostActions( onActionPerformed, PAGE_ACTIONS );
+
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
@@ -403,22 +492,27 @@ export default function PagePages() {
 		closeModal();
 	};
 
-	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
 		<Page
 			title={ __( 'Pages' ) }
 			actions={
-				<>
-					<Button variant="primary" onClick={ openModal }>
-						{ __( 'Add new page' ) }
-					</Button>
-					{ showAddPageModal && (
-						<AddNewPageModal
-							onSave={ handleNewPage }
-							onClose={ closeModal }
-						/>
-					) }
-				</>
+				addNewLabel && (
+					<>
+						<Button
+							variant="primary"
+							onClick={ openModal }
+							__next40pxDefaultSize
+						>
+							{ addNewLabel }
+						</Button>
+						{ showAddPageModal && (
+							<AddNewPageModal
+								onSave={ handleNewPage }
+								onClose={ closeModal }
+							/>
+						) }
+					</>
+				)
 			}
 		>
 			<DataViews

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

@@ -50,15 +50,19 @@
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
+}
 
-	// Make the button targetable for clicks
-	&::after {
-		content: "";
-		height: 100%;
-		left: 0;
-		position: absolute;
-		top: 0;
-		width: 100%;
-		z-index: 1;
-	}
+.edit-site-page-pages-title span {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.edit-site-page-pages__title-badge {
+	background: $gray-100;
+	color: $gray-700;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-block-ui;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
 }

package/src/components/page-patterns/delete-category-menu-item.js

@@ -60,8 +60,7 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 
 			onClose?.();
 			history.push( {
-				path: `/patterns`,
-				categoryType: PATTERN_TYPES.theme,
+				postType: PATTERN_TYPES.user,
 				categoryId: PATTERN_DEFAULT_CATEGORY,
 			} );
 		} catch ( error ) {

package/src/components/page-patterns/header.js

@@ -17,6 +17,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import AddNewPattern from '../add-new-pattern';
 import RenameCategoryMenuItem from './rename-category-menu-item';
 import DeleteCategoryMenuItem from './delete-category-menu-item';
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
@@ -44,7 +45,7 @@ export default function PatternsHeader( {
 		description =
 			templatePartArea?.description ||
 			__( 'Includes every template part defined for any area.' );
-	} else if ( type === PATTERN_TYPES.theme ) {
+	} else if ( type === PATTERN_TYPES.user && !! categoryId ) {
 		patternCategory = patternCategories.find(
 			( category ) => category.name === categoryId
 		);
@@ -57,42 +58,53 @@ export default function PatternsHeader( {
 	}
 
 	return (
-		<VStack className="edit-site-patterns__section-header">
-			<HStack justify="space-between">
-				<Heading as="h2" level={ 4 } id={ titleId }>
+		<VStack className="edit-site-patterns__section-header" spacing={ 0 }>
+			<HStack
+				justify="space-between"
+				className="edit-site-patterns__title"
+			>
+				<Heading as="h2" level={ 3 } id={ titleId } weight={ 500 }>
 					{ title }
 				</Heading>
-				{ !! patternCategory?.id && (
-					<DropdownMenu
-						icon={ moreVertical }
-						label={ __( 'Actions' ) }
-						toggleProps={ {
-							className: 'edit-site-patterns__button',
-							describedBy: sprintf(
-								/* translators: %s: pattern category name */
-								__( 'Action menu for %s pattern category' ),
-								title
-							),
-							size: 'compact',
-						} }
-					>
-						{ ( { onClose } ) => (
-							<MenuGroup>
-								<RenameCategoryMenuItem
-									category={ patternCategory }
-									onClose={ onClose }
-								/>
-								<DeleteCategoryMenuItem
-									category={ patternCategory }
-									onClose={ onClose }
-								/>
-							</MenuGroup>
-						) }
-					</DropdownMenu>
-				) }
+				<HStack expanded={ false }>
+					<AddNewPattern />
+					{ !! patternCategory?.id && (
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+							toggleProps={ {
+								className: 'edit-site-patterns__button',
+								describedBy: sprintf(
+									/* translators: %s: pattern category name */
+									__( 'Action menu for %s pattern category' ),
+									title
+								),
+								size: 'compact',
+							} }
+						>
+							{ ( { onClose } ) => (
+								<MenuGroup>
+									<RenameCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+									<DeleteCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+								</MenuGroup>
+							) }
+						</DropdownMenu>
+					) }
+				</HStack>
 			</HStack>
 			{ description ? (
-				<Text variant="muted" as="p" id={ descriptionId }>
+				<Text
+					variant="muted"
+					as="p"
+					id={ descriptionId }
+					className="edit-site-patterns__sub-title"
+				>
 					{ description }
 				</Text>
 			) : null }