Gatsy 4.10.1 - Gatsby-soure-wp 6.10.0 inline svg's are not given static url yet are rendered with source urls

[garryburch]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Inline svg's are not given static url yet are rendered with source urls

Reproduction Link

https://gatsby.dev/reproduction - tyler said I could skip this

Steps to Reproduce

1. Update gatsby and all image source plugins to required version
2. Gatsby Build - Gatsby Serve
   ...

Expected Result

Inline source svg's should be given static/hash urls

Actual Result

Inline source svg's are kept with source url from gatsby-source-wordpress

Environment

System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v14.19.0/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.82
    Firefox: 98.0.1
  npmPackages:
  "gatsby": "^4.10.1",
  "gatsby-background-image": "^1.6.0",
  "gatsby-cli": "^4.9.0",
  "gatsby-image": "^3.11.0",
  "gatsby-plugin-algolia": "^0.25.0",
  "gatsby-plugin-breadcrumb": "^12.1.1",
  "gatsby-plugin-canonical-urls": "^4.4.0",
  "gatsby-plugin-csp": "^1.1.3",
  "gatsby-plugin-feed": "^4.4.0",
  "gatsby-plugin-gatsby-cloud": "^4.5.2",
  "gatsby-plugin-google-tagmanager": "^4.4.0",
  "gatsby-plugin-image": "^2.10.0",
  "gatsby-plugin-manifest": "^4.4.0",
  "gatsby-plugin-postcss": "^5.4.0",
  "gatsby-plugin-react-helmet": "^5.4.0",
  "gatsby-plugin-react-svg": "^3.1.0",
  "gatsby-plugin-remove-serviceworker": "^1.0.0",
  "gatsby-plugin-robots-txt": "^1.5.5",
  "gatsby-plugin-sass": "^5.4.0",
  "gatsby-plugin-sharp": "^4.10.1",
  "gatsby-plugin-sitemap": "^5.7.0",
  "gatsby-plugin-styled-components": "^5.4.0",
  "gatsby-source-atom": "^0.3.0",
  "gatsby-source-filesystem": "^4.4.0",
  "gatsby-source-wordpress": "^6.10.0",
  "gatsby-transformer-sharp": "^4.10.0",

Config Flags

FAST_DEV: true,

[LekoArts]

Hi!

Please give a minimal reproduction and/or a way more detailed explanation of your issue including code snippets, your setup, etc. Because as it stands I don't have a clue what your issue is. Thanks!

[garryburch]

With updated gatsby and gatsby-wordpress all WYSIWYG that have svg's are being rendered with the wordpress source url not the gatsby static url - png and other images are fine. This was not an issue with gatsby 4.9 and gatsby-source-wordpress: 6.4.0

As for the minimal reproduction I can in private setting allow you access to the source url with creds - We have been with gatsby-wordpress since the start.

I do not understand how my description is not enough to understand that when the updated WP gatsby plugin build out svg inside/inline WYSIWYG it does not give it the proper static url yet keeps the source url of the wordpress

The return should NOT be - https://pozer-qa.mrkelly.ninja/wp-content/uploads/2021/12/404.svg
The return SHOULD be https://gatsbysiteurl/static/c45b406effc3ceaad8ae7a90ed337d6f/404.svg

https://pozer-qa.mrkelly.ninja is the WP
https://gatsbysiteurl/ is my gatsby site url I am using as an example for you

Thanks for all your hard-work and help!

The below are all things Gatsby that work as it should

    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v14.19.0/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.82
    Firefox: 98.0.2
  npmPackages:
    gatsby: ^4.4.0 => 4.9.0
    gatsby-background-image: ^1.6.0 => 1.6.0
    gatsby-cli: ^4.9.0 => 4.9.0
    gatsby-image: ^3.11.0 => 3.11.0
    gatsby-plugin-algolia: ^0.25.0 => 0.25.0
    gatsby-plugin-breadcrumb: ^12.1.1 => 12.3.1
    gatsby-plugin-canonical-urls: ^4.4.0 => 4.9.0
    gatsby-plugin-csp: ^1.1.3 => 1.1.3
    gatsby-plugin-feed: ^4.4.0 => 4.9.0
    gatsby-plugin-gatsby-cloud: ^4.5.2 => 4.9.0
    gatsby-plugin-google-tagmanager: ^4.4.0 => 4.9.0
    gatsby-plugin-image: ^2.4.0 => 2.9.0
    gatsby-plugin-manifest: ^4.4.0 => 4.9.0
    gatsby-plugin-netlify: ^4.0.0-next.0 => 4.1.0
    gatsby-plugin-postcss: ^5.4.0 => 5.9.0
    gatsby-plugin-react-helmet: ^5.4.0 => 5.9.0
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
    gatsby-plugin-robots-txt: ^1.5.5 => 1.7.0
    gatsby-plugin-sass: ^5.4.0 => 5.9.0
    gatsby-plugin-sharp: ^4.4.0 => 4.9.0
    gatsby-plugin-sitemap: ^5.7.0 => 5.9.0
    gatsby-plugin-styled-components: ^5.4.0 => 5.9.0
    gatsby-source-atom: ^0.3.0 => 0.3.0
    gatsby-source-filesystem: ^4.4.0 => 4.9.0
    gatsby-source-wordpress: 6.4.0 => 6.4.0
    gatsby-transformer-sharp: ^4.4.0 => 4.9.0
  npmGlobalPackages:
    gatsby-cli: 4.10.1 

[garryburch]

The below are when this issue occurred after updating to the newest Gatsby and gatsby-wordpress and all required gatsby-image plugins for the new CDN on Gatsby cloud

    System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v14.19.0/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.82
    Firefox: 98.0.1
  npmPackages:
  "gatsby": "^4.10.1",
  "gatsby-background-image": "^1.6.0",
  "gatsby-cli": "^4.9.0",
  "gatsby-image": "^3.11.0",
  "gatsby-plugin-algolia": "^0.25.0",
  "gatsby-plugin-breadcrumb": "^12.1.1",
  "gatsby-plugin-canonical-urls": "^4.4.0",
  "gatsby-plugin-csp": "^1.1.3",
  "gatsby-plugin-feed": "^4.4.0",
  "gatsby-plugin-gatsby-cloud": "^4.5.2",
  "gatsby-plugin-google-tagmanager": "^4.4.0",
  "gatsby-plugin-image": "^2.10.0",
  "gatsby-plugin-manifest": "^4.4.0",
  "gatsby-plugin-postcss": "^5.4.0",
  "gatsby-plugin-react-helmet": "^5.4.0",
  "gatsby-plugin-react-svg": "^3.1.0",
  "gatsby-plugin-remove-serviceworker": "^1.0.0",
  "gatsby-plugin-robots-txt": "^1.5.5",
  "gatsby-plugin-sass": "^5.4.0",
  "gatsby-plugin-sharp": "^4.10.1",
  "gatsby-plugin-sitemap": "^5.7.0",
  "gatsby-plugin-styled-components": "^5.4.0",
  "gatsby-source-atom": "^0.3.0",
  "gatsby-source-filesystem": "^4.4.0",
  "gatsby-source-wordpress": "^6.10.0",
  "gatsby-transformer-sharp": "^4.10.0",

[LekoArts]

So is this happening only when you use Image CDN or on all occasions?

[garryburch]

Yes with and without the Image CDN - local builds and on the cloud - svg's are given wp-source urls instead of gatsby site static url when used in inline WYSIWYG fields