fix(gatsby-source-wordpress): Set empty default alt tag for inline images

[LekoArts]

Description

WordPress seems to set undefined for the alt tag of an image if it's empty. gatsby-plugin-image requires an alt tag so this PR uses nullish coalescing to set an empty string as a default.

Tests

No tests added

Related Issues

Fixes #38259

[TylerBarnes]

Thanks Lennart! 🙌

[therealgilles]

Thank you for the fix!!

To satisfy my own curiosity, how does gatsby-source-wordpress get the alt image prop when querying images from WordPress? I know GraphQL exposes the prop as altText but I could not find any assignment from altText to alt anywhere (maybe that's another bug...?).

[pieh]

@therealgilles I think altText is provided by wp-graphql ( https://github.com/wp-graphql/wp-graphql/blob/b0d78131d63424501d19f5ffda61cb93a3595dd1/src/Model/Post.php#L809-L810 ) and that field is preserved as-is when querying for media items via Gatsby's Graphql

This PR was addressing handling of images embeded in html content (for example in a post main content) to create responsive variants of it, so while both are dealing with images - those are 2 different/separate things. We do get content as html "snippet" and we parse that html to find images, so that's why we deal with actual html attributes (alt) here and not the graphql field name.

[therealgilles]

@pieh Oh interesting! The warning seemed to occur from a MediaItem query so I assumed it was from wp-graphql. If you are parsing HTML directly, then all the more reasons not to assume that the alt prop won't necessarily be there. And I confirm that WP does not bother adding the tag if empty. A WP bug I guess.

Declaring the prop as mandatory is a bit of joke though, considering how HTML has been working for years, i.e. images still display without it. The official directive that it has to be there but can be empty is non-sensical in my book. I'm all for accessibility but it has to start with the tools.

Anyway, thanks again for fixing this and for taking the time to explain.

[pieh]

I don't know all the details on how things are connected here in this change as wordpress is not really my area in Gatsby context. I just tried doing few quick greps/code searches for altText to maybe provide some explanations (as shallow as they were). I noticed cheerioImg naming which I remembered being used to parse html snippets (https://www.npmjs.com/package/cheerio) as same library is used for finding <img> tags in our markdown handling + some (probably outdated) information about wordpress that I had from the past. You very well may be on to something, but I can't currently dive any deeper into the topic

[therealgilles]

@pieh I appreciate the honesty and it all sounds logical. I'll finish with it'd be helpful if Gatsby (really gatsby-source-wordpress) was a bit more verbose about what it does internally. Something like Parsing ... html to get image data for ... would probably have helped root cause the issue a bit quicker. Thanks for all the work :)