[Site Editor]: Fix ability to edit trashed pages (#60236)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: mcsf <mcsf@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org>
WordPress · Apr 6, 2024 · 45ba7e7 · 45ba7e7
1 parent c2dd500
commit 45ba7e7
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 65 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -237,20 +237,20 @@
 .dataviews-view-table__primary-field {
 	font-size: $default-font-size;
 	font-weight: 500;
-	color: $gray-900;
+	color: $gray-700;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	display: block;
 	width: 100%;
 
 	a {
 		text-decoration: none;
-		color: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
 		flex-grow: 0;
+		color: $gray-900;
 
 		&:hover {
 			color: var(--wp-admin-theme-color);
@@ -405,6 +405,9 @@
 		}
 
 		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -11,7 +11,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -33,23 +36,32 @@ function EditorCanvas( {
 	onClick,
 	...props
 } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getBlockCount, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const { getEditedPostType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const _templateType = getEditedPostType();
+	const {
+		hasBlocks,
+		isFocusMode,
+		templateType,
+		canvasMode,
+		isZoomOutMode,
+		currentPostIsTrashed,
+	} = useSelect( ( select ) => {
+		const { getBlockCount, __unstableGetEditorMode } =
+			select( blockEditorStore );
+		const { getEditedPostType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const _templateType = getEditedPostType();
 
-			return {
-				templateType: _templateType,
-				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-				canvasMode: getCanvasMode(),
-				hasBlocks: !! getBlockCount(),
-			};
-		}, [] );
+		return {
+			templateType: _templateType,
+			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			canvasMode: getCanvasMode(),
+			hasBlocks: !! getBlockCount(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
+		};
+	}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -63,14 +75,18 @@ function EditorCanvas( {
 	// to switch to edit mode, with a meaningful label and no title attribute.
 	const viewModeIframeProps = {
 		'aria-label': __( 'Edit' ),
+		'aria-disabled': currentPostIsTrashed,
 		title: null,
 		role: 'button',
 		tabIndex: 0,
 		onFocus: () => setIsFocused( true ),
 		onBlur: () => setIsFocused( false ),
 		onKeyDown: ( event ) => {
 			const { keyCode } = event;
-			if ( keyCode === ENTER || keyCode === SPACE ) {
+			if (
+				( keyCode === ENTER || keyCode === SPACE ) &&
+				! currentPostIsTrashed
+			) {
 				event.preventDefault();
 				setCanvasMode( 'edit' );
 			}
@@ -82,6 +98,12 @@ function EditorCanvas( {
 				setCanvasMode( 'edit' );
 			}
 		},
+		onClickCapture: ( event ) => {
+			if ( currentPostIsTrashed ) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
 		readonly: true,
 	};
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
@@ -107,12 +129,14 @@ function EditorCanvas( {
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
 					canvasMode === 'view'
-						? 'cursor: pointer; min-height: 100vh;'
+						? `min-height: 100vh; ${
+								currentPostIsTrashed ? '' : 'cursor: pointer;'
+						  }`
 						: ''
 				}}}`,
 			},
 		],
-		[ settings.styles, enableResizing, canvasMode ]
+		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
 	);
 
 	const frameSize = isZoomOutMode ? 20 : undefined;

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -155,6 +150,7 @@ const STATUSES = [
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
 function FeaturedImage( { item, viewType } ) {
+	const isDisabled = item.status === 'trash';
 	const { onClick } = useLink( {
 		postId: item.id,
 		postType: item.type,
@@ -172,21 +168,24 @@ function FeaturedImage( { item, viewType } ) {
 			size={ size }
 		/>
 	) : null;
-	if ( viewType === LAYOUT_LIST ) {
-		return media;
-	}
+	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
 	return (
-		<button
-			className={ classNames( 'page-pages-preview-field__button', {
-				'edit-site-page-pages__media-wrapper':
-					viewType === LAYOUT_TABLE,
-			} ) }
-			type="button"
-			onClick={ onClick }
-			aria-label={ item.title?.rendered || __( '(no title)' ) }
+		<div
+			className={ `edit-site-page-pages__featured-image-wrapper is-layout-${ viewType }` }
 		>
-			{ media }
-		</button>
+			{ renderButton ? (
+				<button
+					className="page-pages-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || __( '(no title)' ) }
+				>
+					{ media }
+				</button>
+			) : (
+				media
+			) }
+		</div>
 	);
 }
 
@@ -281,9 +280,10 @@ export default function PagePages() {
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => {
-					return [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
-						view.type
-					) ? (
+					const addLink =
+						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+						item.status !== 'trash';
+					return addLink ? (
 						<Link
 							params={ {
 								postId: item.id,

diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
@@ -1,37 +1,25 @@
-.page-pages-preview-field__button {
-	box-shadow: none;
-	border: none;
-	padding: 0;
-	background-color: unset;
-	box-sizing: border-box;
-	cursor: pointer;
-	overflow: hidden;
+.edit-site-page-pages__featured-image {
 	height: 100%;
+	object-fit: cover;
 	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;
-	}
+.edit-site-page-pages__featured-image-wrapper {
+	height: 100%;
+	width: 100%;
+	border-radius: $grid-unit-05;
 
-	&.edit-site-page-pages__media-wrapper {
+	&.is-layout-table:not(:has(.page-pages-preview-field__button)),
+	&.is-layout-table .page-pages-preview-field__button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		display: block;
 		border-radius: $grid-unit-05;
 		position: relative;
-		background-color: $gray-100;
 		overflow: hidden;
+		background-color: $gray-100;
 		flex-grow: 0 !important;
 
-		.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);
@@ -44,3 +32,22 @@
 		}
 	}
 }
+
+.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;
+	}
+}