[gatsby-source-wordpress] parsed content images are not being replaced properly

[joperron]

Description

Some very funky stuff is happening with the image URLs gatsby replaces, it seems only some of them are getting picked up. Attached are some screenshots & the generated markup

<img loading="lazy" width="1024" height="512" src="https://wp.streetdreams.app/wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1024x512.jpg" alt="" class="wp-image-198" srcset="/wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1024x512.jpg 1024w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-300x150.jpg 300w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-768x384.jpg 768w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1600x800.jpg 1600w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1536x768.jpg 1536w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004.jpg 2000w" sizes="(max-width: 1024px) 100vw, 1024px">

As you can see in the code above the urls are not consistent and the image is not being replaced with a gatsby-image instance and as you can see from the screenshot, the image above this broken one works fine.

Steps to reproduce

I have provided @TylerBarnes with the URL to the graphql API & staging site where this is happening

Expected result

The images should be replaced with gatsby-image & a static/ url

Actual result

Doesn't replace all images

Environment

System:
OS: macOS 11.2
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.18.4 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 88.0.4324.182
Safari: 14.0.3
npmPackages:
gatsby: ^2.32.3 => 2.32.3
gatsby-image: ^2.11.0 => 2.11.0
gatsby-plugin-google-analytics: ^2.11.0 => 2.11.0
gatsby-plugin-manifest: ^2.12.0 => 2.12.0
gatsby-plugin-offline: ^3.10.0 => 3.10.0
gatsby-plugin-postcss: ^3.7.0 => 3.7.0
gatsby-plugin-purgecss: ^5.0.0 => 5.0.0
gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
gatsby-plugin-sass: ^3.2.0 => 3.2.0
gatsby-plugin-sharp: ^2.14.1 => 2.14.1
gatsby-plugin-sitemap: ^2.12.0 => 2.12.0
gatsby-source-filesystem: ^2.11.0 => 2.11.0
gatsby-source-shopify: ^3.10.0 => 3.10.0
gatsby-source-wordpress: ^4.0.1 => 4.0.1
gatsby-source-wordpress-experimental: ^7.0.6 => 7.0.6
gatsby-transformer-sharp: ^2.12.0 => 2.12.0
npmGlobalPackages:
gatsby-cli: 2.12.111

Notes

• This happens on gatsby cloud also, not just locally
• Only happens since upgrading to v4 from experimental
• I tried useGatsbyImage: false and this still happens, is the flag broken?

Thanks!

[CloudBop]

I seem to be having a very similar issue.

I've tried fiddling in Gutenberg to see if I could find a way around it, such as changing the Image source, using GB to edit size or adding extra attributes.

Interestingly, I have had moments where it half works. In that some of the data is generated as static content. But unfortunately the image still doesn't load.

I've had a look via media-assistant plugin to see if I could see anything untoward with the media item itself, unfortunately nothing obvious stands out.

[joperron]

So I rolled back to the last versions of wp-gatsby, wp-graphql and gatsby-source-wordpress-experimental that I had working (that was about 6 months ago, mind you) and I'm sad to report it's even more broken now - none of the images have full URLs or are being parsed. This is with html.useGatsbyImage and without.

Doing some investigating I found that the domain is being stripped from the url of the images in between wp-graphql and gatsby.

wp-graphql response:

gatsby response:

After noticing that, I rolled back both my global gatsby-cli and gatsby versions to what I had 6 months ago as well and it's still happening.

Hope this helps

[CloudBop]

Hmm, that's interesting to know @joperron. I tried flushing the permalinks @ the WP source but that doesn't seem to have worked.

[TylerBarnes]

Hey all 👋 I found the issue and have a PR with a fix here: #29778

I'll let you know when it's published 👍

[TylerBarnes]

For anyone who needs this asap, I published a canary here gatsby-source-wordpress@5.0.0-alpha-wordpress.13+bf3c6f85af

[CloudBop]

Doesn't seem to have fixed the image on this page, perhaps I am having a different issue?

https://www.colinr.tech/thoughts/updating-a-gatsby-theme-yarn-workspace-packages/

It looked to be because of illegal characters confusing the Regex, I think in my case this was an "@" in the alt tag. But I may be wrong.

<figure class="wp-block-image size-full"><img loading="lazy" width="2286" height="960" src="/static/93d9f8e2b476b77be1ae646e73c3ce6d/picture-yarn-cli.jpg" alt="Image of the Yarn CLI at upgrade" class="wp-image-3249" srcset="/static/93d9f8e2b476b77be1ae646e73c3ce6d/picture-yarn-cli.jpg 2286w, /wp-content/uploads/2021/02/picture-yarn-cli-300x126.jpg 300w, /wp-content/uploads/2021/02/picture-yarn-cli-1024x430.jpg 1024w, /wp-content/uploads/2021/02/picture-yarn-cli-768x323.jpg 768w, /wp-content/uploads/2021/02/picture-yarn-cli-1536x645.jpg 1536w, /wp-content/uploads/2021/02/picture-yarn-cli-2048x860.jpg 2048w, /wp-content/uploads/2021/02/picture-yarn-cli-1200x504.jpg 1200w" sizes="(max-width: 2286px) 100vw, 2286px"><figcaption>Yarn upgrade CLI</figcaption></figure>

Thanks for all the hard work @TylerBarnes, after Gatsby Conf I'm hoping to be able to try and be of more help with debugging/contributing.

[joperron]

For anyone else reading this another canary was released by @TylerBarnes here: gatsby-source-wordpress@5.1.0-alpha-wordpress.9+1a61ee71c5

[TylerBarnes]

Thanks @joperron !

@CloudBop in that second canary Jo pasted above I changed the regex to account for non-url-safe characters - so I believe it will fix your issue. If it doesn't fix it then there's likely another issue here 😱 this part of the codebase is the trickiest part since html has so many variations.

[CloudBop]

Sorry I should have left a version number. I was at 4.0.3. On my local version the issue is fixed. Rebuilding live version now....

😱 this part of the codebase is the trickiest part since html has so many variations.

I can only begin to imagine! I tried removing the reserved character but once they've been flagged I guess that's that...

It's still giving me so much joy!

... and I can confirm that the issue is fixed in the latest canary, thanks again @TylerBarnes + @joperron for all the help

[TylerBarnes]

Woo :D glad to hear it's fixed for you!

[joperron]

Hello again!

re: useGatsbyImage: false

It doesn't seem to work? Some images are still getting parsed, kind of. Luckily, the image shows up fine, but nothing should be parsed at all, no?

<img loading="lazy" width="1500" height="1800" src="/static/cb54bddc578e036aa69bfd5364f483ff/MD_Product-019.jpg" alt="" class="wp-image-4607" srcset="/static/cb54bddc578e036aa69bfd5364f483ff/MD_Product-019.jpg 1500w, https://wp.streetdreams.co/wp-content/uploads/2021/03/MD_Product-019-768x922.jpg 768w, https://wp.streetdreams.co/wp-content/uploads/2021/03/MD_Product-019-1280x1536.jpg 1280w" sizes="(max-width: 1500px) 100vw, 1500px">

[TylerBarnes]

@joperron and I talked about this on slack and got this resolved - thanks for your patience here everyone!