Improve the featured image UI when cannot retrieve the image file and…

… data.
WordPress · Nov 14, 2024 · 0bb386c · 0bb386c
1 parent a8a8747
commit 0bb386c
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 53 deletions.
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -150,6 +155,25 @@ function PostFeaturedImage( {
 		);
 	}
 
+	const { isRequestingFeaturedImageMedia } = useSelect(
+		( select ) => {
+			const _isRequestingFeaturedImageMedia =
+				!! featuredImageId &&
+				! select( coreStore ).hasFinishedResolution( 'getMedia', [
+					featuredImageId,
+					{ context: 'view' },
+				] );
+
+			return {
+				isRequestingFeaturedImageMedia: _isRequestingFeaturedImageMedia,
+			};
+		},
+		[ featuredImageId ]
+	);
+
+	const noImageData =
+		! isRequestingFeaturedImageMedia && !! featuredImageId && ! media;
+
 	return (
 		<PostFeaturedImageCheck>
 			{ noticeUI }
@@ -174,52 +198,80 @@ function PostFeaturedImage( {
 						modalClass="editor-post-featured-image__media-modal"
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
-								<Button
-									__next40pxDefaultSize
-									ref={ toggleRef }
-									className={
-										! featuredImageId
-											? 'editor-post-featured-image__toggle'
-											: 'editor-post-featured-image__preview'
-									}
-									onClick={ open }
-									aria-label={
-										! featuredImageId
-											? null
-											: __(
-													'Edit or replace the featured image'
-											  )
-									}
-									aria-describedby={
-										! featuredImageId
-											? null
-											: `editor-post-featured-image-${ featuredImageId }-describedby`
-									}
-									aria-haspopup="dialog"
-									disabled={ isLoading }
-									accessibleWhenDisabled
-								>
-									{ !! featuredImageId && media && (
-										<img
-											className="editor-post-featured-image__preview-image"
-											src={ mediaSourceUrl }
-											alt={ getImageDescription( media ) }
-										/>
-									) }
-									{ isLoading && <Spinner /> }
-									{ ! featuredImageId &&
-										! isLoading &&
-										( postType?.labels
-											?.set_featured_image ||
-											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
-								</Button>
+								{ noImageData ? (
+									<p>
+										{ __(
+											'Could not retrieve the featured image data.'
+										) }
+									</p>
+								) : (
+									<Button
+										__next40pxDefaultSize
+										ref={ toggleRef }
+										className={
+											! featuredImageId
+												? 'editor-post-featured-image__toggle'
+												: 'editor-post-featured-image__preview'
+										}
+										onClick={ open }
+										aria-label={
+											! featuredImageId
+												? null
+												: __(
+														'Edit or replace the featured image'
+												  )
+										}
+										aria-describedby={
+											! featuredImageId
+												? null
+												: `editor-post-featured-image-${ featuredImageId }-describedby`
+										}
+										aria-haspopup="dialog"
+										disabled={ isLoading }
+										accessibleWhenDisabled
+									>
+										{ !! featuredImageId && media && (
+											<img
+												className="editor-post-featured-image__preview-image"
+												src={ mediaSourceUrl }
+												alt={ getImageDescription(
+													media
+												) }
+											/>
+										) }
+										{ ( isLoading ||
+											isRequestingFeaturedImageMedia ) && (
+											<Spinner />
+										) }
+										{ ! featuredImageId &&
+											! isLoading &&
+											( postType?.labels
+												?.set_featured_image ||
+												DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
+									</Button>
+								) }
 								{ !! featuredImageId && (
-									<HStack className="editor-post-featured-image__actions">
+									<HStack
+										className={ clsx(
+											'editor-post-featured-image__actions',
+											{
+												'editor-post-featured-image__actions-missing-image':
+													noImageData,
+												'editor-post-featured-image__actions-is-requesting-image':
+													isRequestingFeaturedImageMedia,
+											}
+										) }
+									>
 										<Button
 											__next40pxDefaultSize
 											className="editor-post-featured-image__action"
 											onClick={ open }
 											aria-haspopup="dialog"
+											variant={
+												noImageData
+													? 'secondary'
+													: undefined
+											}
 										>
 											{ __( 'Replace' ) }
 										</Button>
@@ -230,6 +282,12 @@ function PostFeaturedImage( {
 												onRemoveImage();
 												toggleRef.current.focus();
 											} }
+											variant={
+												noImageData
+													? 'secondary'
+													: undefined
+											}
+											isDestructive={ noImageData }
 										>
 											{ __( 'Remove' ) }
 										</Button>

diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
@@ -16,11 +16,15 @@
 	&:hover,
 	&:focus,
 	&:focus-within {
-		.editor-post-featured-image__actions {
+		.editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image) {
 			opacity: 1;
 		}
 	}
 
+	.editor-post-featured-image__actions.editor-post-featured-image__actions-missing-image {
+		opacity: 1;
+	}
+
 	.components-drop-zone__content {
 		border-radius: $radius-small;
 	}
@@ -72,17 +76,22 @@
 }
 
 .editor-post-featured-image__actions {
-	@include reduce-motion("transition");
-	bottom: 0;
-	opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
-	padding: $grid-unit-10;
-	position: absolute;
-	transition: opacity 50ms ease-out;
-}
+	&:not(.editor-post-featured-image__actions-missing-image) {
+		@include reduce-motion("transition");
+		bottom: 0;
+		opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
+		padding: $grid-unit-10;
+		position: absolute;
+		transition: opacity 50ms ease-out;
 
-.editor-post-featured-image__action {
-	backdrop-filter: blur(16px) saturate(180%);
-	background: rgba(255, 255, 255, 0.75);
-	flex-grow: 1;
-	justify-content: center;
+		.editor-post-featured-image__action {
+			backdrop-filter: blur(16px) saturate(180%);
+			background: rgba(255, 255, 255, 0.75);
+		}
+	}
+
+	.editor-post-featured-image__action {
+		flex-grow: 1;
+		justify-content: center;
+	}
 }