Gatsby-source-wordpress-experimental: Wordpress V5.5^ does not run gatsby-image proccess for images inside WYSIWYG/ACF fields

Created on 21 Sep 2020 · 2Comments · Source: gatsbyjs/gatsby-source-wordpress-experimental

I have all of our sites sitting back on WP 5.4^
The reason I have not updated them to 5.5^ was due to when I first saw the release and tried it on a temp project I noticed the gatsby-image feature that was working inside WYSIWYG/ACF no longer brings back this

<div class="aligncenter wp-image-16194 size-full gatsby-image-wrapper" data-reactroot="" style="position: relative; overflow: hidden; max-width: 100%; width: 2370px;"><div aria-hidden="true" style="width: 100%; padding-bottom: 57.6728%;"></div><img aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAAB0klEQVQoz5VTa2/UMBDMT6JFcBdUtcCH8on/L7iWQ+rd5XJ5OQ/Hdh437Gw4pFYUCUsr25vx7M7YiW7e3SD+8Bnr1S3eXseI4zuZ17h6s8b1Vazz67HC6v0t4vUdPn38gvv7r4geHh6x3f7EKT0hzwvkWY7jMUWSHJGmKcqiXPL/iKJYgutonCa8HG3bomlq5EUF6wb8z4hO0hHD2l4T4zjK2gthQFEaHJITutbKvlEMo++dRK/YeZ6fRZRnGcqygHM9QggK4oGnp73mzwIKfoTz7q8dnc/nZxGlxwKMLCuFyCMMIwY7Yr/Z4dvmO5ID/Sk1rLVadPpt00sylVxkDlUR0DYDZsE5H+Aaj/RHis3jVjpNpFiOuu5UZtd1GKToa91GYQiXrXoQwoCyMuprVdWwQmK7Xjxs1cu27XRNnJduvfdq0zhOsg6I2s6iFgCrsulpmoXIiH9GgQTxIo5phkZun9KTJIUxNXb7RPaV4jvhIS7iW6uq6o8H9IdkuRwkIfOsbupGv9cyk2wYBrAZjka6ZmGVbIzRd0e5F0JKMnWthJccpXPwBbCTRaLXnHNuUUjCi6E8NE6LRPq32x9UIvM8yL+ABSiPsknMomyE8+Vd/gIUF3T7qcLYwAAAAABJRU5ErkJggg==" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition-delay: 500ms;"><picture><source srcset="/static/a8e5db03032aa9fce1fb07fe56453568/d3601/Screen-Shot-2020-09-01-at-3.51.44-PM.png 593w,
/static/a8e5db03032aa9fce1fb07fe56453568/fb77c/Screen-Shot-2020-09-01-at-3.51.44-PM.png 1185w,
/static/a8e5db03032aa9fce1fb07fe56453568/4ca50/Screen-Shot-2020-09-01-at-3.51.44-PM.png 2370w" sizes="(max-width: 2370px) 100vw, 2370px"><img sizes="(max-width: 2370px) 100vw, 2370px" srcset="/static/a8e5db03032aa9fce1fb07fe56453568/d3601/Screen-Shot-2020-09-01-at-3.51.44-PM.png 593w,
/static/a8e5db03032aa9fce1fb07fe56453568/fb77c/Screen-Shot-2020-09-01-at-3.51.44-PM.png 1185w,
/static/a8e5db03032aa9fce1fb07fe56453568/4ca50/Screen-Shot-2020-09-01-at-3.51.44-PM.png 2370w" src="/static/a8e5db03032aa9fce1fb07fe56453568/4ca50/Screen-Shot-2020-09-01-at-3.51.44-PM.png" alt="Demonstrating how saved SQL queries reduce data preparation" loading="eager" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"></picture><noscript>

with WP - 5.5^ we get this

<p><img class="aligncenter wp-image-16194 size-full" src="https://brobot-dev.mrkelly.ninja/wp-content/uploads/2020/09/Screen-Shot-2020-09-01-at-3.51.44-PM.png" alt="Demonstrating how saved SQL queries reduce data preparation" width="2370" height="1368" srcset="https://brobot-dev.mrkelly.ninja/wp-content/uploads/2020/09/Screen-Shot-2020-09-01-at-3.51.44-PM.png 2370w, https://brobot-dev.mrkelly.ninja/wp-content/uploads/2020/09/Screen-Shot-2020-09-01-at-3.51.44-PM-300x173.png 300w, https://brobot-dev.mrkelly.ninja/wp-content/uploads/2020/09/Screen-Shot-2020-09-01-at-3.51.44-PM-1024x591.png 1024w, https://brobot-dev.mrkelly.ninja/wp-content/uploads/2020/09/Screen-Shot-2020-09-01-at-3.51.44-PM-1536x887.png 1536w, https://brobot-dev.mrkelly.ninja/wp-content/uploads/2020/09/Screen-Shot-2020-09-01-at-3.51.44-PM-2048x1182.png 2048w" sizes="(max-width: 2370px) 100vw, 2370px"></p>

Gatsby Info:

  System:
    OS: Linux 5.4 KDE neon 5.19
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 10.22.0 - ~/.nvm/versions/node/v10.22.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.22.0/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v10.22.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.102
    Firefox: 80.0.1
  npmPackages:
    gatsby: ^2.15.34 => 2.24.12
    gatsby-background-image: ^0.8.15 => 0.8.19
    gatsby-cli: ^2.12.65 => 2.12.67
    gatsby-image: ^2.2.25 => 2.4.13
    gatsby-plugin-canonical-urls: ^2.3.6 => 2.3.10
    gatsby-plugin-csp: ^1.1.3 => 1.1.3
    gatsby-plugin-feed: ^2.5.11 => 2.5.11
    gatsby-plugin-google-tagmanager: ^2.1.13 => 2.3.11
    gatsby-plugin-layout: ^1.1.11 => 1.3.10
    gatsby-plugin-manifest: ^2.2.21 => 2.4.21
    gatsby-plugin-netlify: ^2.3.13 => 2.3.13
    gatsby-plugin-offline: ^3.2.21 => 3.2.21
    gatsby-plugin-postcss: ^2.1.11 => 2.3.11
    gatsby-plugin-react-helmet: ^3.1.11 => 3.3.10
    gatsby-plugin-react-svg: ^2.1.2 => 2.1.2
    gatsby-plugin-sass: ^2.1.18 => 2.3.12
    gatsby-plugin-sharp: ^2.2.32 => 2.6.23
    gatsby-plugin-sitemap: ^2.2.17 => 2.4.11
    gatsby-source-filesystem: ^2.1.31 => 2.3.23
    gatsby-source-wordpress-experimental: ^1.2.6 => 1.3.9
    gatsby-transformer-sharp: ^2.2.21 => 2.5.11
  npmGlobalPackages:
    gatsby-cli: 2.12.99

address before stable release images

Source