@wordpress/edit-site 5.26.0 → 5.27.0

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

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalView as View,
-	__experimentalVStack as VStack,
-	Button,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -14,13 +10,12 @@ import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
-import Link from '../routes/link';
+import { default as Link, useLink } from '../routes/link';
 import {
 	DEFAULT_VIEWS,
 	DEFAULT_CONFIG_PER_VIEW_TYPE,
@@ -42,21 +37,35 @@ import {
 	viewPostAction,
 	useEditPostAction,
 } from '../actions';
-import PostPreview from '../post-preview';
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
+
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
+const SUPPORTED_LAYOUTS = window?.__experimentalAdminViews
+	? [ LAYOUT_GRID, LAYOUT_TABLE, LAYOUT_LIST ]
+	: [ LAYOUT_GRID, LAYOUT_TABLE ];
 
-function useView( type ) {
-	const {
-		params: { activeView = 'all', isCustom = 'false' },
-	} = useLocation();
-	const selectedDefaultView =
-		isCustom === 'false' &&
-		DEFAULT_VIEWS[ type ].find( ( { slug } ) => slug === activeView )?.view;
+function useView( postType ) {
+	const { params } = useLocation();
+	const { activeView = 'all', isCustom = 'false', layout } = params;
+	const history = useHistory();
+	const selectedDefaultView = useMemo( () => {
+		const defaultView =
+			isCustom === 'false' &&
+			DEFAULT_VIEWS[ postType ].find(
+				( { slug } ) => slug === activeView
+			)?.view;
+		if ( isCustom === 'false' && layout ) {
+			return {
+				...defaultView,
+				type: layout,
+			};
+		}
+		return defaultView;
+	}, [ isCustom, activeView, layout, postType ] );
 	const [ view, setView ] = useState( selectedDefaultView );
 
 	useEffect( () => {
@@ -82,10 +91,21 @@ function useView( type ) {
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	const customView = useMemo( () => {
-		return (
-			editedViewRecord?.content && JSON.parse( editedViewRecord?.content )
-		);
+		const storedView =
+			editedViewRecord?.content &&
+			JSON.parse( editedViewRecord?.content );
+		if ( ! storedView ) {
+			return storedView;
+		}
+
+		return {
+			...storedView,
+			layout: {
+				...( DEFAULT_CONFIG_PER_VIEW_TYPE[ storedView?.type ] || {} ),
+			},
+		};
 	}, [ editedViewRecord?.content ] );
+
 	const setCustomView = useCallback(
 		( viewToSet ) => {
 			editEntityRecord(
@@ -100,13 +120,26 @@ function useView( type ) {
 		[ editEntityRecord, editedViewRecord?.id ]
 	);
 
+	const setDefaultViewAndUpdateUrl = useCallback(
+		( viewToSet ) => {
+			if ( viewToSet.type !== view?.type ) {
+				history.push( {
+					...params,
+					layout: viewToSet.type,
+				} );
+			}
+			setView( viewToSet );
+		},
+		[ params, view?.type, history ]
+	);
+
 	if ( isCustom === 'false' ) {
-		return [ view, setView ];
+		return [ view, setDefaultViewAndUpdateUrl ];
 	} else if ( isCustom === 'true' && customView ) {
 		return [ customView, setCustomView ];
 	}
 	// Loading state where no the view was not found on custom views or default views.
-	return [ DEFAULT_VIEWS[ type ][ 0 ].view, setView ];
+	return [ DEFAULT_VIEWS[ postType ][ 0 ].view, setDefaultViewAndUpdateUrl ];
 }
 
 // See https://github.com/WordPress/gutenberg/issues/55886
@@ -121,27 +154,59 @@ const STATUSES = [
 ];
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
+function FeaturedImage( { item, viewType } ) {
+	const { onClick } = useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
+	const hasMedia = !! item.featured_media;
+	return (
+		<span
+			className={ {
+				'edit-site-page-pages__media-wrapper':
+					viewType === LAYOUT_TABLE,
+			} }
+		>
+			<button
+				className="page-pages-preview-field__button"
+				type="button"
+				onClick={ onClick }
+				aria-label={ item.title?.rendered || __( '(no title)' ) }
+			>
+				{ hasMedia && (
+					<Media
+						className="edit-site-page-pages__featured-image"
+						id={ item.featured_media }
+						size={
+							viewType === LAYOUT_GRID
+								? [ 'large', 'full', 'medium', 'thumbnail' ]
+								: [ 'thumbnail', 'medium', 'large', 'full' ]
+						}
+					/>
+				) }
+			</button>
+		</span>
+	);
+}
+
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
-	const [ pageId, setPageId ] = useState( null );
 	const history = useHistory();
+	const { params } = useLocation();
+	const { isCustom = 'false' } = params;
 
 	const onSelectionChange = useCallback(
-		( items ) => setPageId( items?.length === 1 ? items[ 0 ].id : null ),
-		[ setPageId ]
-	);
-
-	const onDetailsChange = useCallback(
 		( items ) => {
-			if ( !! postType && items?.length === 1 ) {
+			if ( isCustom === 'false' && view?.type === LAYOUT_LIST ) {
 				history.push( {
-					postId: items[ 0 ].id,
-					postType,
+					...params,
+					postId: items.length === 1 ? items[ 0 ].id : undefined,
 				} );
 			}
 		},
-		[ history, postType ]
+		[ history, params, view?.type, isCustom ]
 	);
 
 	const queryArgs = useMemo( () => {
@@ -205,18 +270,9 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				getValue: ( { item } ) => item.featured_media,
-				render: ( { item } ) =>
-					!! item.featured_media ? (
-						<Media
-							className="edit-site-page-pages__featured-image"
-							id={ item.featured_media }
-							size={
-								view.type === LAYOUT_GRID
-									? [ 'large', 'full', 'medium', 'thumbnail' ]
-									: [ 'thumbnail', 'medium', 'large', 'full' ]
-							}
-						/>
-					) : null,
+				render: ( { item } ) => (
+					<FeaturedImage item={ item } viewType={ view.type } />
+				),
 				enableSorting: false,
 			},
 			{
@@ -224,32 +280,22 @@ export default function PagePages() {
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => {
-					return (
-						<VStack spacing={ 1 }>
-							<View
-								as="span"
-								className="dataviews-view-grid__title-field"
-							>
-								{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
-									view.type
-								) ? (
-									<Link
-										params={ {
-											postId: item.id,
-											postType: item.type,
-											canvas: 'edit',
-										} }
-									>
-										{ decodeEntities(
-											item.title?.rendered
-										) || __( '(no title)' ) }
-									</Link>
-								) : (
-									decodeEntities( item.title?.rendered ) ||
-									__( '(no title)' )
-								) }
-							</View>
-						</VStack>
+					return [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
+						view.type
+					) ? (
+						<Link
+							params={ {
+								postId: item.id,
+								postType: item.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities( item.title?.rendered ) ||
+								__( '(no title)' ) }
+						</Link>
+					) : (
+						decodeEntities( item.title?.rendered ) ||
+							__( '(no title)' )
 					);
 				},
 				maxWidth: 400,
@@ -350,85 +396,33 @@ export default function PagePages() {
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
-		<>
-			<Page
-				className={
-					view.type === LAYOUT_LIST
-						? 'edit-site-page-pages-list-view'
-						: null
-				}
-				title={ __( 'Pages' ) }
-				actions={
-					<>
-						<Button variant="primary" onClick={ openModal }>
-							{ __( 'Add new page' ) }
-						</Button>
-						{ showAddPageModal && (
-							<AddNewPageModal
-								onSave={ handleNewPage }
-								onClose={ closeModal }
-							/>
-						) }
-					</>
-				}
-			>
-				<DataViews
-					paginationInfo={ paginationInfo }
-					fields={ fields }
-					actions={ actions }
-					data={ pages || EMPTY_ARRAY }
-					isLoading={ isLoadingPages || isLoadingAuthors }
-					view={ view }
-					onChangeView={ onChangeView }
-					onSelectionChange={ onSelectionChange }
-					onDetailsChange={ onDetailsChange }
-				/>
-			</Page>
-			{ view.type === LAYOUT_LIST && (
-				<Page>
-					<div
-						className="edit-site-page-pages-preview"
-						tabIndex={ 0 }
-						role="button"
-						onKeyDown={ ( event ) => {
-							const { keyCode } = event;
-							if ( keyCode === ENTER || keyCode === SPACE ) {
-								history.push( {
-									postId: pageId,
-									postType,
-									canvas: 'edit',
-								} );
-							}
-						} }
-						onClick={ () =>
-							history.push( {
-								postId: pageId,
-								postType,
-								canvas: 'edit',
-							} )
-						}
-					>
-						{ pageId !== null ? (
-							<PostPreview
-								postId={ pageId }
-								postType={ postType }
-							/>
-						) : (
-							<div
-								style={ {
-									display: 'flex',
-									flexDirection: 'column',
-									justifyContent: 'center',
-									textAlign: 'center',
-									height: '100%',
-								} }
-							>
-								<p>{ __( 'Select a page to preview' ) }</p>
-							</div>
-						) }
-					</div>
-				</Page>
-			) }
-		</>
+		<Page
+			title={ __( 'Pages' ) }
+			actions={
+				<>
+					<Button variant="primary" onClick={ openModal }>
+						{ __( 'Add new page' ) }
+					</Button>
+					{ showAddPageModal && (
+						<AddNewPageModal
+							onSave={ handleNewPage }
+							onClose={ closeModal }
+						/>
+					) }
+				</>
+			}
+		>
+			<DataViews
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ pages || EMPTY_ARRAY }
+				isLoading={ isLoadingPages || isLoadingAuthors }
+				view={ view }
+				onChangeView={ onChangeView }
+				onSelectionChange={ onSelectionChange }
+				supportedLayouts={ SUPPORTED_LAYOUTS }
+			/>
+		</Page>
 	);
 }

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

@@ -1,6 +1,45 @@
-.edit-site-page-pages__featured-image {
-	border-radius: $grid-unit-05;
+.edit-site-page-pages__media-wrapper {
 	width: $grid-unit-50;
 	height: $grid-unit-50;
 	display: block;
+	border-radius: $grid-unit-05;
+	position: relative;
+	background-color: $gray-100;
+	overflow: hidden;
+
+	.edit-site-page-pages__featured-image {
+		height: 100%;
+		object-fit: cover;
+		width: 100%;
+	}
+
+	&::after {
+		border-radius: 4px;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+		content: "";
+		height: 100%;
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+	}
+}
+
+.page-pages-preview-field__button {
+	box-shadow: none;
+	border: none;
+	padding: 0;
+	background-color: unset;
+	box-sizing: border-box;
+	cursor: pointer;
+	overflow: hidden;
+	height: 100%;
+	width: 100%;
+	border-radius: 3px 3px 0 0;
+
+	&:focus-visible {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+	}
 }

package/src/components/page-patterns/dataviews-pattern-actions.js

@@ -45,7 +45,7 @@ export const exportJSONaction = {
 	id: 'export-pattern',
 	label: __( 'Export as JSON' ),
 	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
-	callback: ( item ) => {
+	callback: ( [ item ] ) => {
 		const json = {
 			__file: item.type,
 			title: item.title || item.name,
@@ -71,7 +71,8 @@ export const renameAction = {
 		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
 		return isCustomPattern && ! hasThemeFile;
 	},
-	RenderModal: ( { item, closeModal } ) => {
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
 		const [ title, setTitle ] = useState( () => item.title );
 		const { editEntityRecord, saveEditedEntityRecord } =
 			useDispatch( coreStore );
@@ -160,7 +161,8 @@ export const deleteAction = {
 		return canDeleteOrReset( item ) && ! hasThemeFile;
 	},
 	hideModalHeader: true,
-	RenderModal: ( { item, closeModal } ) => {
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
 		const { __experimentalDeleteReusableBlock } =
 			useDispatch( reusableBlocksStore );
 		const { createErrorNotice, createSuccessNotice } =
@@ -224,7 +226,8 @@ export const resetAction = {
 		return canDeleteOrReset( item ) && hasThemeFile;
 	},
 	hideModalHeader: true,
-	RenderModal: ( { item, closeModal } ) => {
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
 		const { removeTemplate } = useDispatch( editSiteStore );
 		return (
 			<VStack spacing="5">
@@ -254,7 +257,8 @@ export const duplicatePatternAction = {
 	label: _x( 'Duplicate', 'action label' ),
 	isEligible: ( item ) => item.type !== TEMPLATE_PART_POST_TYPE,
 	modalHeader: _x( 'Duplicate pattern', 'action label' ),
-	RenderModal: ( { item, closeModal } ) => {
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
 		const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
 			window.location.href
 		);
@@ -288,7 +292,8 @@ export const duplicateTemplatePartAction = {
 	label: _x( 'Duplicate', 'action label' ),
 	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
 	modalHeader: _x( 'Duplicate template part', 'action label' ),
-	RenderModal: ( { item, closeModal } ) => {
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
 		const { createSuccessNotice } = useDispatch( noticesStore );
 		const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
 			window.location.href