@wordpress/edit-site 5.35.0 → 6.0.0

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';
@@ -38,9 +44,16 @@ 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 =
@@ -116,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,
@@ -123,7 +137,7 @@ function useView( postType ) {
 			}
 			setView( viewToSet );
 		},
-		[ params, view?.type, history ]
+		[ history, view?.type ]
 	);
 
 	if ( isCustom === 'false' ) {
@@ -191,19 +205,21 @@ 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( () => {
@@ -261,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(
 		() => [
 			{
@@ -281,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,
@@ -293,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,
@@ -326,15 +380,80 @@ 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 postTypeActions = usePostActions( 'page' );
@@ -373,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

@@ -51,3 +51,18 @@
 		outline: 2px solid transparent;
 	}
 }
+
+.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 }

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

@@ -46,13 +46,6 @@ import {
 	PATTERN_DEFAULT_CATEGORY,
 	OPERATOR_IS,
 } from '../../utils/constants';
-import {
-	exportJSONaction,
-	resetAction,
-	deleteAction,
-	duplicatePatternAction,
-	duplicateTemplatePartAction,
-} from './dataviews-pattern-actions';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
@@ -123,7 +116,7 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 	);
 }
 
-function Preview( { item, categoryId, viewType } ) {
+function Preview( { item, viewType } ) {
 	const descriptionId = useId();
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
@@ -133,8 +126,6 @@ function Preview( { item, categoryId, viewType } ) {
 	const { onClick } = useLink( {
 		postType: item.type,
 		postId: isUserPattern ? item.id : item.name,
-		categoryId,
-		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 		canvas: 'edit',
 	} );
 
@@ -198,14 +189,11 @@ function Author( { item, viewType } ) {
 	);
 }
 
-function Title( { item, categoryId } ) {
+function Title( { item } ) {
 	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const { onClick } = useLink( {
 		postType: item.type,
 		postId: isUserPattern ? item.id : item.name,
-		categoryId,
-		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 		canvas: 'edit',
 	} );
 	return (
@@ -248,25 +236,19 @@ function Title( { item, categoryId } ) {
 
 export default function DataviewsPatterns() {
 	const {
-		params: { categoryType, categoryId: categoryIdFromURL },
+		params: { postType, categoryId: categoryIdFromURL },
 	} = useLocation();
-	const type = categoryType || PATTERN_TYPES.theme;
+	const type = postType || PATTERN_TYPES.user;
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const isUncategorizedThemePatterns =
-		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
 	const previousCategoryId = usePrevious( categoryId );
 	const viewSyncStatus = view.filters?.find(
 		( { field } ) => field === 'sync-status'
 	)?.value;
-	const { patterns, isResolving } = usePatterns(
-		type,
-		isUncategorizedThemePatterns ? '' : categoryId,
-		{
-			search: view.search,
-			syncStatus: viewSyncStatus,
-		}
-	);
+	const { patterns, isResolving } = usePatterns( type, categoryId, {
+		search: view.search,
+		syncStatus: viewSyncStatus,
+	} );
 
 	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
 		per_page: -1,
@@ -291,11 +273,7 @@ export default function DataviewsPatterns() {
 				header: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => (
-					<Preview
-						item={ item }
-						categoryId={ categoryId }
-						viewType={ view.type }
-					/>
+					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
 				enableHiding: false,
@@ -304,14 +282,12 @@ export default function DataviewsPatterns() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				render: ( { item } ) => (
-					<Title item={ item } categoryId={ categoryId } />
-				),
+				render: ( { item } ) => <Title item={ item } />,
 				enableHiding: false,
 			},
 		];
 
-		if ( type === PATTERN_TYPES.theme ) {
+		if ( type === PATTERN_TYPES.user ) {
 			_fields.push( {
 				header: __( 'Sync status' ),
 				id: 'sync-status',
@@ -356,7 +332,7 @@ export default function DataviewsPatterns() {
 		}
 
 		return _fields;
-	}, [ view.type, categoryId, type, authors ] );
+	}, [ view.type, type, authors ] );
 
 	// Reset the page number when the category changes.
 	useEffect( () => {
@@ -381,22 +357,9 @@ export default function DataviewsPatterns() {
 
 	const actions = useMemo( () => {
 		if ( type === TEMPLATE_PART_POST_TYPE ) {
-			return [
-				editAction,
-				...templatePartActions,
-				duplicateTemplatePartAction,
-				resetAction,
-				deleteAction,
-			].filter( Boolean );
+			return [ editAction, ...templatePartActions ].filter( Boolean );
 		}
-		return [
-			editAction,
-			...patternActions,
-			duplicatePatternAction,
-			exportJSONaction,
-			resetAction,
-			deleteAction,
-		].filter( Boolean );
+		return [ editAction, ...patternActions ].filter( Boolean );
 	}, [ editAction, type, templatePartActions, patternActions ] );
 	const onChangeView = useCallback(
 		( newView ) => {

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

@@ -1,15 +1,3 @@
-.edit-site-patterns__header {
-	position: sticky;
-	top: 0;
-	background: $gray-900;
-	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
-	z-index: z-index(".edit-site-patterns__header");
-
-	.edit-site-patterns__button {
-		color: $gray-600;
-	}
-}
-
 .edit-site-patterns__section-header {
 	.screen-reader-shortcut:focus {
 		top: 0;
@@ -99,11 +87,22 @@
 
 	.edit-site-patterns__section-header {
 		border-bottom: 1px solid #f0f0f0;
-		min-height: 72px;
-		padding: $grid-unit-20 $grid-unit-40;
+		padding: $grid-unit-20 $grid-unit-60;
 		position: sticky;
 		top: 0;
 		z-index: 2;
+		flex-shrink: 0;
+		transition: padding ease-out 0.1s;
+		@include reduce-motion("transition");
+		min-height: $grid-unit-50;
+
+		.edit-site-patterns__title {
+			min-height: $grid-unit-50;
+		}
+
+		.edit-site-patterns__sub-title {
+			margin-bottom: $grid-unit-10;
+		}
 	}
 
 	.edit-site-patterns__pattern-title {
@@ -160,3 +159,11 @@
 		}
 	}
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}

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

@@ -291,21 +291,28 @@ const selectUserPatterns = createSelector(
 );
 
 export const usePatterns = (
-	categoryType,
+	postType,
 	categoryId,
 	{ search = '', syncStatus } = {}
 ) => {
 	return useSelect(
 		( select ) => {
-			if ( categoryType === TEMPLATE_PART_POST_TYPE ) {
+			if ( postType === TEMPLATE_PART_POST_TYPE ) {
 				return selectTemplatePartsAsPatterns(
 					select,
 					categoryId,
 					search
 				);
-			} else if ( categoryType === PATTERN_TYPES.theme ) {
-				return selectPatterns( select, categoryId, syncStatus, search );
-			} else if ( categoryType === PATTERN_TYPES.user ) {
+			} else if ( postType === PATTERN_TYPES.user && !! categoryId ) {
+				const appliedCategory =
+					categoryId === 'uncategorized' ? '' : categoryId;
+				return selectPatterns(
+					select,
+					appliedCategory,
+					syncStatus,
+					search
+				);
+			} else if ( postType === PATTERN_TYPES.user ) {
 				return selectUserPatterns( select, syncStatus, search );
 			}
 			return {
@@ -313,7 +320,7 @@ export const usePatterns = (
 				isResolving: false,
 			};
 		},
-		[ categoryId, categoryType, search, syncStatus ]
+		[ categoryId, postType, search, syncStatus ]
 	);
 };
 

package/src/components/resizable-frame/index.js

@@ -263,7 +263,7 @@ function ResizableFrame( {
 			} }
 			minWidth={ FRAME_MIN_WIDTH }
 			maxWidth={ isFullWidth ? '100%' : '150%' }
-			maxHeight={ '100%' }
+			maxHeight="100%"
 			onFocus={ () => setShouldShowHandle( true ) }
 			onBlur={ () => setShouldShowHandle( false ) }
 			onMouseOver={ () => setShouldShowHandle( true ) }

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

@@ -151,11 +151,9 @@ export default function SavePanel() {
 			>
 				<Button
 					variant="secondary"
-					className={ clsx(
-						'edit-site-editor__toggle-save-panel-button'
-					) }
+					className="edit-site-editor__toggle-save-panel-button"
 					onClick={ () => setIsSaveViewOpened( true ) }
-					aria-haspopup={ 'dialog' }
+					aria-haspopup="dialog"
 					disabled={ disabled }
 					__experimentalIsFocusable
 				>