Replace featured image text isn't visible.

[afercia]

Description

See related #62743 and #65747

Reported on Trac by Necarie.

I'm using a fresh install of WordPress with no additional themes or plugins installed. I'm using the Twenty Twenty-Four theme and the latest version of Firefox.

I imported an xml file to restore posts from another WordPress. There were media files referenced in it that failed to upload, which was fine as I intended to replace the images manually. When I edited the posts to replace the featured images, the featured images option seemed to be missing.

I eventually figured out the option was there, but I couldn't see it because the text on the buttons was the same color as the background. This only happens when there is a reference to a missing image - once I added a valid image, the button appeared as black text on a light background.

It may not seem like a big deal, but it took me a long time to figure out because I'm not familiar with this version of WordPress or where the button was supposed to be. I hope that by reporting it I can spare someone else the frustration I felt - it seems like something easy to fix.

Step-by-step reproduction instructions

• Import an XML file with posts that have featured images set.
• Do not copy over the actual images to the wp-content/uploads directory so that the images are actually missing but the posts meta data still refers to them.
• Edit a post with a featured image set.
• Observe the Featured Image UI in the Post summary panel.

Screenshots, screen recording, code snippet

This shows the button where "Replace Image" should be visible, but it isn't.

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[afercia]

I can reproduce the same issue in a slightly different case e.g. deleting from the filesystem an image that was already set as featured image. The UI behaves slightly differently but it is still very unclear as it doesn't take into account missing or broken images.

First of all I'd like to point out that browsers behave differently when the path to an image is broken. The different behavior depends on various factors e.g. the presence of an alt text, the size applied to the <img /> element and such.

Basically, when there's no alt text, Chrome tends to display a sort of 'broken image placeholder', while Firefox doesn't. Screenshot:

• On the left: Chrome
• On the right: Firefox

Worth noting Necarie reported to use Firefox.

In my test the UI behavior is slightly different because the image placeholder is bigger. I guess because my image was actually already uploaded to the Media Library and I deleted it after it was set. Instead, in the reporter case, the image placeholder is way smaller and appears to be in the 'loading' stage.

Regardless, in both cases the placeholder doesn't show anything:

• The featured image alt is forced to and empty string. This should be reconsidered, as one of the purposes of the alt text is, well, to allow browsers to show the alt text when the image is missing. That's why it is called alternative text.
• The Replace and Remove buttons appear only on hover or focus, which is extremely confusing when the image is missing. See related Avoid custom styling for any Button in the editor UI #62743 and Use standard button variations for the Post featured image UI. #65747

It's important to note that a missing image was problematic also with the previous featured image UI in WordPress 6.5. Screenshot:

Only the UI in WordPress 6.3 was still clearly operable with a missing image. The Replace and Remove controls where always visible, thus making the UI clearer and always operable. Screenshot:

Proposal

While the featured image UI provides meaningful labeling and description of the image on the placeholder button, the forced empty alt text doesn't seem ideal. I'd like to propose to use the same description of the button for the image alt text so that when an image is missing the alt text would work as intended. Screenshot:

On top of that, I think the Replace and Remove buttons should always be visible as proposed in #62743 and #65747

[afercia]

Part of this issue has been addressed in #66189

[afercia]

I was able to reproduce the originally reported issue by importing an xml file with a post containing a featured image and then skipping the 'Download and import file attachments. Basically, the UI doesn't take into account the case when the attachment ID is saved in the database but there's no media` object containing the image meta data.

In this case, the UI does render the placeholder button but it does not render the image element. The placeholder button is empty:

gutenberg/packages/editor/src/components/post-featured-image/index.js

Lines 202 to 208 in f3e8f4a

	{ !! featuredImageId && media && (
	<img
	className="editor-post-featured-image__preview-image"
	src={ mediaSourceUrl }
	alt={ getImageDescription( media ) }
	/>
	) }

As such, there is no alt attribute to use to provide some message. The button itself should contain some meaningful message.

Animated GIF to illustrate the UI state when this occurs: