@wordpress/edit-site 6.2.0 → 6.3.0

package/src/components/{page-pages/index.js → posts-app/posts-list.js}

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	Icon,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -17,6 +26,15 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	trash,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+	commentAuthorAvatar as authorIcon,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,7 +42,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import {
-	DEFAULT_VIEWS,
+	useDefaultViews,
 	DEFAULT_CONFIG_PER_VIEW_TYPE,
 } from '../sidebar-dataviews/default-views';
 import {
@@ -35,7 +53,7 @@ import {
 	OPERATOR_IS_NONE,
 } from '../../utils/constants';
 
-import AddNewPageModal from '../add-new-page';
+import AddNewPostModal from '../add-new-post';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
@@ -56,6 +74,7 @@ function useView( postType ) {
 		params: { activeView = 'all', isCustom = 'false', layout },
 	} = useLocation();
 	const history = useHistory();
+	const DEFAULT_VIEWS = useDefaultViews( { postType } );
 	const selectedDefaultView = useMemo( () => {
 		const defaultView =
 			isCustom === 'false' &&
@@ -72,7 +91,7 @@ function useView( postType ) {
 			};
 		}
 		return defaultView;
-	}, [ isCustom, activeView, layout, postType ] );
+	}, [ isCustom, activeView, layout, postType, DEFAULT_VIEWS ] );
 	const [ view, setView ] = useState( selectedDefaultView );
 
 	useEffect( () => {
@@ -153,12 +172,12 @@ function useView( postType ) {
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
 const STATUSES = [
-	{ value: 'draft', label: __( 'Draft' ) },
-	{ value: 'future', label: __( 'Scheduled' ) },
-	{ value: 'pending', label: __( 'Pending Review' ) },
-	{ value: 'private', label: __( 'Private' ) },
-	{ value: 'publish', label: __( 'Published' ) },
-	{ value: 'trash', label: __( 'Trash' ) },
+	{ value: 'draft', label: __( 'Draft' ), icon: drafts },
+	{ value: 'future', label: __( 'Scheduled' ), icon: scheduled },
+	{ value: 'pending', label: __( 'Pending Review' ), icon: pending },
+	{ value: 'private', label: __( 'Private' ), icon: notAllowed },
+	{ value: 'publish', label: __( 'Published' ), icon: published },
+	{ value: 'trash', label: __( 'Trash' ), icon: trash },
 ];
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
@@ -176,7 +195,7 @@ function FeaturedImage( { item, viewType } ) {
 			: [ 'thumbnail', 'medium', 'large', 'full' ];
 	const media = hasMedia ? (
 		<Media
-			className="edit-site-page-pages__featured-image"
+			className="posts-list-page__featured-image"
 			id={ item.featured_media }
 			size={ size }
 		/>
@@ -184,11 +203,11 @@ function FeaturedImage( { item, viewType } ) {
 	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
 	return (
 		<div
-			className={ `edit-site-page-pages__featured-image-wrapper is-layout-${ viewType }` }
+			className={ `posts-list-page__featured-image-wrapper is-layout-${ viewType }` }
 		>
 			{ renderButton ? (
 				<button
-					className="page-pages-preview-field__button"
+					className="posts-list-page-preview-field__button"
 					type="button"
 					onClick={ onClick }
 					aria-label={ item.title?.rendered || __( '(no title)' ) }
@@ -206,15 +225,71 @@ function getItemId( item ) {
 	return item.id.toString();
 }
 
-export default function PagePages() {
-	const postType = 'page';
+function PostStatusField( { item } ) {
+	const status = STATUSES.find( ( { value } ) => value === item.status );
+	const label = status?.label || item.status;
+	const icon = status?.icon;
+	return (
+		<HStack alignment="left" spacing={ 1 }>
+			{ icon && (
+				<div className="posts-list-page-post-author-field__icon-container">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ label }</span>
+		</HStack>
+	);
+}
+
+function PostAuthorField( { item, viewType } ) {
+	const { text, icon, imageUrl } = useSelect(
+		( select ) => {
+			const { getUser } = select( coreStore );
+			const user = getUser( item.author );
+			return {
+				icon: authorIcon,
+				imageUrl: user?.avatar_urls?.[ 48 ],
+				text: user?.name,
+			};
+		},
+		[ item ]
+	);
+
+	const withAuthorImage = viewType !== LAYOUT_LIST && imageUrl;
+	const withAuthorIcon = viewType !== LAYOUT_LIST && ! imageUrl;
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	return (
+		<HStack alignment="left" spacing={ 1 }>
+			{ withAuthorImage && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt={ __( 'Author avatar' ) }
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ withAuthorIcon && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export default function PostsList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
 	const {
 		params: { postId },
 	} = useLocation();
 	const [ selection, setSelection ] = useState( [ postId ] );
-
 	const onSelectionChange = useCallback(
 		( items ) => {
 			const { params } = history.getLocationWithParams();
@@ -269,13 +344,13 @@ export default function PagePages() {
 		};
 	}, [ view ] );
 	const {
-		records: pages,
-		isResolving: isLoadingPages,
+		records,
+		isResolving: isLoadingMainEntities,
 		totalItems,
 		totalPages,
 	} = useEntityRecords( 'postType', postType, queryArgs );
 
-	const ids = pages?.map( ( page ) => getItemId( page ) ) ?? [];
+	const ids = records?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];
 	const deletedIds = prevIds.filter( ( id ) => ! ids.includes( id ) );
 	const postIdWasDeleted = deletedIds.includes( postId );
@@ -300,20 +375,26 @@ export default function PagePages() {
 		[ totalItems, totalPages ]
 	);
 
-	const { frontPageId, postsPageId, addNewLabel, canCreatePage } = useSelect(
+	const { frontPageId, postsPageId, labels, canCreateRecord } = useSelect(
 		( select ) => {
 			const { getEntityRecord, getPostType, canUser } =
 				select( coreStore );
 			const siteSettings = getEntityRecord( 'root', 'site' );
+			const postTypeObject = getPostType( postType );
 			return {
 				frontPageId: siteSettings?.page_on_front,
 				postsPageId: siteSettings?.page_for_posts,
-				addNewLabel: getPostType( 'page' )?.labels?.add_new_item,
-				canCreatePage: canUser( 'create', 'pages' ),
+				labels: getPostType( postType )?.labels,
+				canCreateRecord: canUser(
+					'create',
+					postTypeObject?.rest_base || 'posts'
+				),
 			};
-		}
+		},
+		[ postType ]
 	);
 
+	// TODO: this should be abstracted into a hook similar to `usePostActions`.
 	const fields = useMemo(
 		() => [
 			{
@@ -355,13 +436,13 @@ export default function PagePages() {
 					let suffix = '';
 					if ( item.id === frontPageId ) {
 						suffix = (
-							<span className="edit-site-page-pages__title-badge">
+							<span className="posts-list-page-title-badge">
 								{ __( 'Front Page' ) }
 							</span>
 						);
 					} else if ( item.id === postsPageId ) {
 						suffix = (
-							<span className="edit-site-page-pages__title-badge">
+							<span className="posts-list-page-title-badge">
 								{ __( 'Posts Page' ) }
 							</span>
 						);
@@ -369,7 +450,7 @@ export default function PagePages() {
 
 					return (
 						<HStack
-							className="edit-site-page-pages-title"
+							className="posts-list-page-title"
 							alignment="center"
 							justify="flex-start"
 						>
@@ -390,6 +471,11 @@ export default function PagePages() {
 						value: id,
 						label: name,
 					} ) ) || [],
+				render: ( { item } ) => {
+					return (
+						<PostAuthorField viewType={ view.type } item={ item } />
+					);
+				},
 			},
 			{
 				header: __( 'Status' ),
@@ -398,6 +484,7 @@ export default function PagePages() {
 					STATUSES.find( ( { value } ) => value === item.status )
 						?.label ?? item.status,
 				elements: STATUSES,
+				render: PostStatusField,
 				enableSorting: false,
 				filterBy: {
 					operators: [ OPERATOR_IS_ANY ],
@@ -482,9 +569,8 @@ export default function PagePages() {
 		],
 		[ authors, view.type, frontPageId, postsPageId ]
 	);
-
 	const postTypeActions = usePostActions( {
-		postType: 'page',
+		postType,
 		context: 'list',
 	} );
 	const editAction = useEditPostAction();
@@ -509,10 +595,10 @@ export default function PagePages() {
 		[ view.type, setView ]
 	);
 
-	const [ showAddPageModal, setShowAddPageModal ] = useState( false );
+	const [ showAddPostModal, setShowAddPostModal ] = useState( false );
 
-	const openModal = () => setShowAddPageModal( true );
-	const closeModal = () => setShowAddPageModal( false );
+	const openModal = () => setShowAddPostModal( true );
+	const closeModal = () => setShowAddPostModal( false );
 	const handleNewPage = ( { type, id } ) => {
 		history.push( {
 			postId: id,
@@ -524,20 +610,21 @@ export default function PagePages() {
 
 	return (
 		<Page
-			title={ __( 'Pages' ) }
+			title={ labels?.name }
 			actions={
-				addNewLabel &&
-				canCreatePage && (
+				labels?.add_new_item &&
+				canCreateRecord && (
 					<>
 						<Button
 							variant="primary"
 							onClick={ openModal }
 							__next40pxDefaultSize
 						>
-							{ addNewLabel }
+							{ labels.add_new_item }
 						</Button>
-						{ showAddPageModal && (
-							<AddNewPageModal
+						{ showAddPostModal && (
+							<AddNewPostModal
+								postType={ postType }
 								onSave={ handleNewPage }
 								onClose={ closeModal }
 							/>
@@ -550,8 +637,8 @@ export default function PagePages() {
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
-				data={ pages || EMPTY_ARRAY }
-				isLoading={ isLoadingPages || isLoadingAuthors }
+				data={ records || EMPTY_ARRAY }
+				isLoading={ isLoadingMainEntities || isLoadingAuthors }
 				view={ view }
 				onChangeView={ onChangeView }
 				selection={ selection }

package/src/components/posts-app/router.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostsList from '../posts-app/posts-list';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function useLayoutAreas() {
+	const { params = {} } = useLocation();
+	const { postType, layout, canvas } = params;
+	const labels = useSelect(
+		( select ) => {
+			return select( coreStore ).getPostType( postType )?.labels;
+		},
+		[ postType ]
+	);
+
+	// Posts list.
+	if ( [ 'post' ].includes( postType ) ) {
+		const isListLayout = layout === 'list' || ! layout;
+		return {
+			key: 'posts-list',
+			areas: {
+				sidebar: (
+					<SidebarNavigationScreen
+						title={ labels?.name }
+						isRoot
+						content={ <DataViewsSidebarContent /> }
+					/>
+				),
+				content: <PostsList postType={ postType } />,
+				preview: ( isListLayout || canvas === 'edit' ) && (
+					<Editor isPostsList />
+				),
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isPostsList />
+					) : (
+						<PostsList postType={ postType } />
+					),
+			},
+			widths: {
+				content: isListLayout ? 380 : undefined,
+			},
+		};
+	}
+
+	// Fallback shows the home page preview
+	return {
+		key: 'default',
+		areas: {
+			sidebar: <SidebarNavigationScreenMain />,
+			preview: <Editor isPostsList />,
+			mobile: canvas === 'edit' && <Editor isPostsList />,
+		},
+	};
+}

package/src/components/{page-pages → posts-app}/style.scss

@@ -1,16 +1,16 @@
-.edit-site-page-pages__featured-image {
+.posts-list-page__featured-image {
 	height: 100%;
 	object-fit: cover;
 	width: 100%;
 }
 
-.edit-site-page-pages__featured-image-wrapper {
+.posts-list-page__featured-image-wrapper {
 	height: 100%;
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.page-pages-preview-field__button)),
-	&.is-layout-table .page-pages-preview-field__button {
+	&.is-layout-table:not(:has(.posts-list-page-preview-field__button)),
+	&.is-layout-table .posts-list-page-preview-field__button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		display: block;
@@ -33,7 +33,7 @@
 	}
 }
 
-.page-pages-preview-field__button {
+.posts-list-page-preview-field__button {
 	box-shadow: none;
 	border: none;
 	padding: 0;
@@ -43,7 +43,7 @@
 	overflow: hidden;
 	height: 100%;
 	width: 100%;
-	border-radius: 3px 3px 0 0;
+	border-radius: $grid-unit-05;
 
 	&:focus-visible {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -52,12 +52,19 @@
 	}
 }
 
-.edit-site-page-pages-title span {
+.dataviews-view-grid__card.is-selected {
+	.posts-list-page-preview-field__button::after {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+}
+
+.posts-list-page-title span {
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-.edit-site-page-pages__title-badge {
+.posts-list-page-title-badge {
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
@@ -66,3 +73,10 @@
 	font-weight: 400;
 	flex-shrink: 0;
 }
+
+.posts-list-page-post-author-field__icon-container {
+	height: $grid-unit-30;
+	svg {
+		fill: currentColor;
+	}
+}

package/src/components/revisions/index.js

@@ -25,6 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -74,7 +75,6 @@ function Revisions( { userConfig, blocks } ) {
 				name="revisions"
 				tabIndex={ 0 }
 			>
-				<EditorStyles styles={ editorStyles } />
 				<style>
 					{
 						// Forming a "block formatting context" to prevent margin collapsing.
@@ -88,6 +88,14 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />
+						{ /*
+						 * Styles are printed inside the block editor provider,
+						 * so they can access any registered style overrides.
+						 */ }
+						<EditorStyles styles={ editorStyles } />
+						<__unstableBlockStyleVariationOverridesWithConfig
+							config={ mergedConfig }
+						/>
 					</ExperimentalBlockEditorProvider>
 				</Disabled>
 			</Iframe>

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

@@ -155,7 +155,7 @@ export default function SavePanel() {
 					onClick={ () => setIsSaveViewOpened( true ) }
 					aria-haspopup="dialog"
 					disabled={ disabled }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 				>
 					{ __( 'Open save panel' ) }
 				</Button>

package/src/components/sidebar/style.scss

@@ -1,6 +1,12 @@
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;
+	// Prevents horizontal overflow while animating screen transitions
+	overflow-x: hidden;
+	// Mark this section of the DOM as isolated, providing performance benefits
+	// by limiting calculations of layout, style and paint to a DOM subtree rather
+	// than the entire page.
+	contain: content;
 }
 
 @keyframes local--slide-from-right {

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

@@ -19,7 +19,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { DEFAULT_VIEWS } from './default-views';
+import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -29,6 +29,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
 	const [ isSaving, setIsSaving ] = useState( false );
+	const DEFAULT_VIEWS = useDefaultViews( { postType: type } );
 	return (
 		<form
 			onSubmit={ async ( event ) => {

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -61,6 +61,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 				<HStack justify="right">
 					<Button
 						variant="tertiary"
+						__next40pxDefaultSize
 						onClick={ () => {
 							setIsRenaming( false );
 						} }
@@ -71,8 +72,9 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title }
+						__next40pxDefaultSize
 					>
-						{ __( 'Rename' ) }
+						{ __( 'Save' ) }
 					</Button>
 				</HStack>
 			</VStack>
@@ -160,10 +162,12 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 			/>
 			{ isRenaming && (
 				<Modal
-					title={ __( 'Rename view' ) }
+					title={ __( 'Rename' ) }
 					onRequestClose={ () => {
 						setIsRenaming( false );
 					} }
+					focusOnMount="firstContentElement"
+					size="small"
 				>
 					<RenameItemModalContent
 						dataviewId={ dataviewId }