feat(gatsby-source-wordpress): use image cdn for non-resizable images in html (svgs/gifs mainly)

integration-tests/gatsby-source-wordpress/__tests__/__snapshots__/index.js.snap

@@ -66,6 +66,10 @@ Array [
     "id": "cG9zdDoxMDYyNw==",
     "mediaItemUrl": "http://localhost:8001/wp-content/uploads/2020/10/giphy.mp4",
   },
+  Object {
+    "id": "cG9zdDoxMTgzNg==",
+    "mediaItemUrl": "http://localhost:8001/wp-content/uploads/2022/04/gaussian2.svg",
+  },
   Object {
     "id": "cG9zdDozNjI=",
     "mediaItemUrl": "http://localhost:8001/wp-content/uploads/2020/03/84-1000x1000-1.jpg",
@@ -399,6 +403,21 @@ Object {
             "nodes": Array [],
           },
         },
+        Object {
+          "acfPageFields": Object {
+            "fieldGroupName": "acfPageFields",
+          },
+          "author": Object {
+            "node": Object {
+              "name": "admin",
+            },
+          },
+          "title": "Inline SVG image CDN test",
+          "uri": "/inline-svg-image-cdn-test/",
+          "wpChildren": Object {
+            "nodes": Array [],
+          },
+        },
       ],
     },
     "testPage": Object {
@@ -489,6 +508,21 @@ Object {
             "nodes": Array [],
           },
         },
+        Object {
+          "acfPageFields": Object {
+            "fieldGroupName": "acfPageFields",
+          },
+          "author": Object {
+            "node": Object {
+              "name": "admin",
+            },
+          },
+          "title": "Inline SVG image CDN test",
+          "uri": "/inline-svg-image-cdn-test/",
+          "wpChildren": Object {
+            "nodes": Array [],
+          },
+        },
       ],
     },
     "testPage": Object {
@@ -726,6 +760,9 @@ Object {
           "name": "admin",
           "pages": Object {
             "nodes": Array [
+              Object {
+                "title": "Inline SVG image CDN test",
+              },
               Object {
                 "title": "Featured Image Too Big",
               },
@@ -783,6 +820,9 @@ Object {
           "name": "admin",
           "pages": Object {
             "nodes": Array [
+              Object {
+                "title": "Inline SVG image CDN test",
+              },
               Object {
                 "title": "Featured Image Too Big",
               },

integration-tests/gatsby-source-wordpress/docker/wordpress/plugins/wp-gatsby-test-plugin/wp-gatsby-test-plugin.php

@@ -1,6 +1,14 @@
 <?php
 // Plugin Name: WPGatsby Test Plugin (for tests only)
 
+function allow_svg_upload($mimes) {
+  $mimes['svg'] = 'image/svg+xml';
+  return $mimes;
+}
+
+add_filter('upload_mimes', 'allow_svg_upload');
+
+
 add_action( 'graphql_register_types', 'add_test_mutations' );
 
 function add_test_mutations() {

integration-tests/gatsby-source-wordpress/test-fns/data-resolution.js

@@ -32,11 +32,11 @@ describe(`data resolution`, () => {
 
     expect(data[`allWpMediaItem`].nodes).toBeTruthy()
     expect(data[`allWpMediaItem`].nodes).toMatchSnapshot()
-    expect(data[`allWpMediaItem`].totalCount).toBe(17)
+    expect(data[`allWpMediaItem`].totalCount).toBe(18)
 
     expect(data[`allWpTag`].totalCount).toBe(5)
     expect(data[`allWpUser`].totalCount).toBe(1)
-    expect(data[`allWpPage`].totalCount).toBe(5)
+    expect(data[`allWpPage`].totalCount).toBe(6)
     expect(data[`allWpPost`].totalCount).toBe(5)
     expect(data[`allWpComment`].totalCount).toBe(1)
     expect(data[`allWpTaxonomy`].totalCount).toBe(3)
@@ -88,8 +88,8 @@ describe(`data resolution`, () => {
 
     expect(gatsbyResult.data.allWpContentNode.nodes.length).toBe(
       // we add a media item node before running our warm cache build.
-      // so 30 before 31 after
-      isWarmCache ? 31 : 30
+      // so 32 before 33 after
+      isWarmCache ? 33 : 32
     )
   })
 

integration-tests/gatsby-source-wordpress/test-fns/gatsby-image.js

@@ -6,11 +6,13 @@ const execall = require("execall")
 
 const countGatsbyImgs = string =>
   execall(/[^-]gatsby-image-wrapper[^-]/gim, string).length
+const countGatsbyFiles = string =>
+  execall(/[^-]_gatsby\/file[^-]/gim, string).length
 
 describe(`Gatsby image processing`, () => {
   it(`transforms inline-html images properly`, async () => {
     const {
-      data: { acfPage },
+      data: { acfPage, inlineSvgImageInHtmlFieldPage },
     } = await fetchGraphql({
       url: `http://localhost:8000/__graphql`,
       query: /* GraphQL */ `
@@ -20,10 +22,16 @@ describe(`Gatsby image processing`, () => {
               wysiwygEditorField
             }
           }
+          inlineSvgImageInHtmlFieldPage: wpPage(databaseId: { eq: 11834 }) {
+            content
+          }
         }
       `,
     })
     expect(acfPage.acfPageFields.wysiwygEditorField).toBeTruthy()
     expect(countGatsbyImgs(acfPage.acfPageFields.wysiwygEditorField)).toBe(2)
+
+    expect(inlineSvgImageInHtmlFieldPage?.content).toBeTruthy()
+    expect(countGatsbyFiles(inlineSvgImageInHtmlFieldPage?.content)).toBe(1)
   })
 })

packages/gatsby-source-wordpress/__tests__/fixtures/media.js

@@ -73,5 +73,18 @@ export const referencedMediaItems = [
     "internal": {
       "contentDigest": `5fa24d43c7fc603f9016933ad6bb3ee4`,
     }
+  },
+  {
+    "id": "cG9zdDoxMTgzNg==",
+    "mediaDetails": null,
+    "mediaItemUrl": "http://wpgatsby.local/wp-content/uploads/2022/04/gaussian2.svg",
+    "mediaType": "image",
+    "mimeType": "image/svg+xml",
+    "sourceUrl": "http://wpgatsby.local/wp-content/uploads/2022/04/gaussian2.svg",
+    "srcSet": null,
+    "fileSize": 801,
+    "internal": {
+      "contentDigest": `5fa24d43c7fc603f9016933ad6bb3ee42`,
+    }
   }
 ]

packages/gatsby-source-wordpress/__tests__/process-node.test.js

@@ -83,14 +83,14 @@ jest.mock(`../dist/steps/source-nodes/fetch-nodes/fetch-referenced-media-items.j
 
 test(`Gatsby Image service works in html fields via replaceNodeHtmlImages`, async () => {
   const node = {
-    content: `\n<p>Welcome to WordPress. This is your first post. Edit or deleteit, then start writing!</p>\n\n\n\n<p></p>\n\n\n\n<figureclass="wp-block-image size-large"><img loading="lazy" width="1024" height="768" src="http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1024x768.jpg" alt=""class="wp-image-115" srcset="http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1024x768.jpg 1024w,http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-300x225.jpg 300w, http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-768x576.jpg 768w,http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1536x1152.jpg 1536w, http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-2048x1536.jpg 2048w"sizes="(max-width: 1024px) 100vw, 1024px" /></figure>\n`,
+    content: `\n<p>Welcome to WordPress. This is your first post. Edit or deleteit, then start writing!</p>\n\n\n\n<p></p>\n\n\n\n<figureclass="wp-block-image size-large"><img loading="lazy" width="1024" height="768" src="http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1024x768.jpg" alt=""class="wp-image-115" srcset="http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1024x768.jpg 1024w,http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-300x225.jpg 300w, http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-768x576.jpg 768w,http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1536x1152.jpg 1536w, http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-2048x1536.jpg 2048w"sizes="(max-width: 1024px) 100vw, 1024px" /></figure>\n<figure class="wp-block-image size-large"><img src="http://wpgatsby.local/wp-content/uploads/2022/04/gaussian2.svg" alt="" class="wp-image-11836"/></figure>`,
     id: `cG9zdDox`,
     modifiedGmt: `2022-02-18T23:18:00`,
     __typename: `Post`
   }
 
-  const gatsbyImageUrl = `/_gatsby/image`
-
+  const gatsbyImageUrlPart = `/_gatsby/image`
+  const gatsbyFileUrlPart = `/_gatsby/file`
   const nodeString = JSON.stringify(node)
 
   const updatedNodeString = await replaceNodeHtmlImages({
@@ -102,17 +102,21 @@ test(`Gatsby Image service works in html fields via replaceNodeHtmlImages`, asyn
     wpUrl: `http://wpgatsby.local/`,
     pluginOptions: {
       html: {
-        useGatsbyImage: true
+        useGatsbyImage: true,
       }
     }
   })
 
-  expect(updatedNodeString).toInclude(gatsbyImageUrl)
   expect(updatedNodeString).not.toEqual(nodeString)
+  expect(updatedNodeString).toInclude(gatsbyImageUrlPart)
+  expect(updatedNodeString).toInclude(gatsbyFileUrlPart)
 
   const imageMatches = execall(/\/_gatsby\/image/gm, updatedNodeString)
   expect(imageMatches.length).toBe(15)
 
+  const fileMatches = execall(/\/_gatsby\/file/gm, updatedNodeString)
+  expect(fileMatches.length).toBe(1)
+
 
   const transformedNodeStringNoHtmlImages = await replaceNodeHtmlImages({
     nodeString,
@@ -134,5 +138,6 @@ test(`Gatsby Image service works in html fields via replaceNodeHtmlImages`, asyn
 
   expect(noImageMatches.length).toBe(0)
 
-  expect(transformedNodeStringNoHtmlImages).not.toInclude(gatsbyImageUrl)
+  expect(transformedNodeStringNoHtmlImages).not.toInclude(gatsbyImageUrlPart)
+  expect(transformedNodeStringNoHtmlImages).not.toInclude(gatsbyFileUrlPart)
 })