[pull] master from gatsbyjs:master

docs/docs/conceptual/gatsby-core-philosophy.md

@@ -21,7 +21,7 @@ Today's building blocks for the web are components of HTML, CSS, and JavaScript.
 
 We believe that in 5 or 10 years, we'll look back at many of these blocks like we look back at machine code or assembly language today; low-level languages that are great compile targets for higher-level languages that are easier to write in.
 
-Using abstractions like React components, `gatsby-image`, and `gatsby-link`, we've begun to craft this higher-level language. But we're just getting started. Gatsby is a playground for discovering new building blocks for the web.
+Using abstractions like React components, `gatsby-plugin-image`, and `gatsby-link`, we've begun to craft this higher-level language. But we're just getting started. Gatsby is a playground for discovering new building blocks for the web.
 
 To [quote Alan Kay](https://www.youtube.com/watch?v=NdSD07U5uBs):
 
@@ -97,7 +97,7 @@ If you were designing a user interface, you might move advanced or rarely-used f
 
 Progressive disclosure simplifies the experience for most people without limiting the abilities of more advanced users.
 
-We progressively disclose complexity by making features such as modifying webpack / Babel config, `gatsby-image`, and `gatsby-link` opt-in, simple one-off configuration choices. We avoid all-or-nothing "ejection" scenarios where to add further customization you have to leave the tool behind and manage all complexity (e.g. dependencies) yourself.
+We progressively disclose complexity by making features such as modifying webpack / Babel config, `gatsby-plugin-image`, and `gatsby-link` opt-in, simple one-off configuration choices. We avoid all-or-nothing "ejection" scenarios where to add further customization you have to leave the tool behind and manage all complexity (e.g. dependencies) yourself.
 
 [Read more here](https://lengstorf.com/progressive-disclosure-of-complexity/).
 

docs/docs/glossary/headless-wordpress.md

@@ -7,7 +7,7 @@ Learn what <q>headless WordPress</q> means, how it differs from other ways of us
 
 ## What is Headless WordPress?
 
-_Headless WordPress_ is the practice of using WordPress as a [headless CMS](/docs/how-to/sourcing-data/headless-cms/) for your [JAMstack](/docs/glossary/jamstack/) site. Headless WordPress takes advantage of the WordPress REST API to separate its content from the frontend that displays it.
+A _headless WordPress_ site is one that uses WordPress for managing content and some other custom frontend stack to display that content. Headless WordPress enables content writers to use a familiar interface while giving web developers the flexibility to use any frontend technology stack.
 
 > Note: WordPress has two products: an open source, self-hosted package that you can [download](https://wordpress.org/) from WordPress.org; and a hosted service, [WordPress.com](https://wordpress.com/). This article applies to both.
 
@@ -21,12 +21,12 @@ Gatsby [supports WordPress](/docs/how-to/sourcing-data/sourcing-from-wordpress/)
 npm install gatsby-source-wordpress
 ```
 
-The `gatsby-source-wordpress` plugin works with self-hosted WordPress sites, and those hosted by WordPress.com. Be aware, however, that the WordPress.com API supports a smaller set of features than that of self-hosted WordPress sites. It's also compatible with the [Advanced Custom Fields](https://www.advancedcustomfields.com/) plugin.
+The `gatsby-source-wordpress` plugin works with self-hosted WordPress sites and those hosted by WordPress.com. Be aware, however, that the WordPress.com API supports a smaller set of features than that of self-hosted WordPress sites.
 
-Headless WordPress lets your content team use an interface they're familiar with, while giving you the flexibility to use any frontend you'd like.
+Headless WordPress enables content writers to use a familiar interface while giving web developers the flexibility to use any frontend technology stack.
 
 ## Learn More
 
-- [REST API Resources](https://developer.wordpress.com/docs/api/) from WordPress.com
-- [WordPress REST API](https://developer.wordpress.org/rest-api/) for self-hosted WordPress
-- [<q>How To Build A Blog with WordPress and Gatsby.js</q>](/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/) from the Gatsby blog
+- [Gatsby's WordPress intergation](/plugins/gatsby-source-wordpress/) for headless WordPress projects
+- [GraphQL for WordPress](https://www.wpgraphql.com/) open-source plugin
+- [Why Gatsby chose WordPress](/blog/gatsby-blog-wordpress/) - a case study

docs/docs/how-to/testing/unit-testing.md

@@ -242,6 +242,36 @@ const babelOptions = {
 
 Once this is changed, you can write your tests in TypeScript using the `.ts` or `.tsx` extensions.
 
+### Using tsconfig paths
+
+If you are using [tsconfig paths](https://www.typescriptlang.org/tsconfig#paths) there is a single change to your config.
+
+1. Add [ts-jest](https://github.com/kulshekhar/ts-jest)
+
+```shell
+npm install --save-dev ts-jest
+```
+
+2. Update `jest.config.js` to import and map `tsconfig.json` paths
+
+```js:title=jest.config.js
+const { compilerOptions } = require("./tsconfig.json")
+const { pathsToModuleNameMapper } = require("ts-jest/utils")
+const paths = pathsToModuleNameMapper(compilerOptions.paths, {
+  prefix: "<rootDir>/",
+})
+```
+
+3. Add paths to `jest.config.js` moduleNameMapper
+
+```js:title=jest.config.js
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/tests/file-mock.js`,
+    ...paths,
+  },
+```
+
 ## Other resources
 
 If you need to make changes to your Babel config, you can edit the config in

docs/docs/images-and-files.md

@@ -2,7 +2,7 @@
 title: Images, Files & Video in Gatsby
 ---
 
-Gatsby provides multiple solutions for adding images, video, and files to your projects. And a pro tip: you don't necessarily have to use GraphQL! From [imports](/docs/how-to/images-and-media/importing-assets-into-files/) and use of the [static folder](/docs/how-to/images-and-media/static-folder/) to dynamic queries with [Gatsby Image](/docs/how-to/images-and-media/using-gatsby-image/) to prevent image bloat, you've got options.
+Gatsby provides multiple solutions for adding images, video, and files to your projects. And a pro tip: you don't necessarily have to use GraphQL! From [imports](/docs/how-to/images-and-media/importing-assets-into-files/) and use of the [static folder](/docs/how-to/images-and-media/static-folder/) to dynamic queries with [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image/) to prevent image bloat, you've got options.
 
 This section will walk you through several common patterns for handling media with Gatsby, where you can learn about the pros and cons of each method.
 

docs/docs/plugins.md

@@ -4,7 +4,7 @@ title: Plugins
 
 Gatsby plugins are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific plugins.
 
-There are many types of Gatsby plugins, including [data sourcing](/plugins/?=gatsby-source), [SEO](/plugins/?=seo), [responsive images](/plugins/gatsby-image/?=gatsby-image), [offline support](/plugins/gatsby-plugin-offline/), [Sass support](/plugins/gatsby-plugin-sass/), [sitemaps](/plugins/gatsby-plugin-sitemap/), [RSS feeds](/plugins/gatsby-plugin-feed/), [TypeScript](/plugins/gatsby-plugin-typescript/), [Google Analytics](/plugins/gatsby-plugin-google-analytics/), and more. You can also [make your own plugins](/docs/creating-plugins/)!
+There are many types of Gatsby plugins, including [data sourcing](/plugins/?=gatsby-source), [SEO](/plugins/?=seo), [responsive images](/plugins/gatsby-plugin-image/?=gatsby-plugin-image), [offline support](/plugins/gatsby-plugin-offline/), [Sass support](/plugins/gatsby-plugin-sass/), [sitemaps](/plugins/gatsby-plugin-sitemap/), [RSS feeds](/plugins/gatsby-plugin-feed/), [TypeScript](/plugins/gatsby-plugin-typescript/), [Google Analytics](/plugins/gatsby-plugin-google-analytics/), and more. You can also [make your own plugins](/docs/creating-plugins/)!
 
 Gatsby themes are a type of plugin that include a `gatsby-config.js` file and add **pre-configured** functionality, data sourcing, and/or UI code to Gatsby sites. To learn more about theme use cases and APIs, check out the [themes section of the docs](/docs/themes/). To learn about how plugins differ from themes and starters refer to the [Plugins, Themes, & Starters conceptual guide](/docs/conceptual/plugins-themes-and-starters/).
 

docs/docs/porting-an-html-site-to-gatsby.md

@@ -560,7 +560,7 @@ website-domain
 
 ## Next steps
 
-Gatsby can handle images through direct imports to page and component files too! The [asset import documentation](/docs/how-to/images-and-media/importing-assets-into-files/) covers this. There is also the [Gatsby Image](/docs/reference/built-in-components/gatsby-image/) component for even deeper optimizations. Once assets are handled through Gatsby, plugins can be used to optimize their processing and delivery.
+Gatsby can handle images through direct imports to page and component files too! The [asset import documentation](/docs/how-to/images-and-media/importing-assets-into-files/) covers this. There is also [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image) component for even deeper optimizations. Once assets are handled through Gatsby, plugins can be used to optimize their processing and delivery.
 
 The [building with components doc](/docs/conceptual/building-with-components/) has information about why Gatsby uses React component architecture and how it fits into a Gatsby application.
 

docs/docs/porting-from-create-react-app-to-gatsby.md

@@ -19,7 +19,7 @@ _Both_ Create React App and Gatsby use React and allow users to build apps more
 Gatsby enables some useful performance optimizations for you, by default. Route-based code splitting and pre-loading of the _next_ resources make your application lightning fast, without any additional effort! Further still, the following optimizations and techniques are also available to you:
 
 - `gatsby-link` uses an [intersection observer to preload linked pages](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/#intersectionobserver) when they appear in the viewport, making them feel like they load _instantly_
-- `gatsby-image` will create optimized versions of your images in different sizes, loading a smaller, optimized version of an image and replacing it with a higher resolution version when loading has finished. It also uses an intersection observer to cheaply lazy load images. Check out [the demo](https://using-gatsby-image.gatsbyjs.org/) to see for yourself
+- `gatsby-plugin-image` will create optimized versions of your images in different sizes, loading a smaller, optimized version of an image and replacing it with a higher resolution version when loading has finished. It also uses an intersection observer to cheaply lazy load images. Check out [the demo](https://using-gatsby-image.gatsbyjs.org/) to see for yourself
 
 These features and more work together to make your Gatsby site fast by default. If you'd like a deep dive on these and other performance optimizations, check out [this blog post](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/)
 

docs/docs/reference/built-in-components/gatsby-image.md

@@ -2,6 +2,8 @@
 title: Gatsby Image API
 ---
 
+_This document talks about the deprecated image plugin. Please check out how to work with the new [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image)_
+
 Part of what makes Gatsby sites so fast is its recommended approach to handling images. `gatsby-image` is a React component designed to work seamlessly with Gatsby’s [native image processing](https://image-processing.gatsbyjs.org/) capabilities powered by GraphQL and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) to easily and completely optimize image loading for your sites.
 
 > _Note: gatsby-image is **not** a drop-in replacement for `<img />`. It’s optimized for responsive fixed width/height images and images that stretch the full-width of a container. There are also other ways to [work with images](/docs/images-and-files/) in Gatsby that don't require GraphQL._

docs/docs/tutorial/part-seven/index.md

@@ -394,7 +394,7 @@ In this part of the tutorial, you've learned the foundations of building with Ga
 
 Now that you've built a Gatsby site, where do you go next?
 
-- Share your Gatsby site on Twitter and see what other people have created by searching for #gatsbytutorial! Make sure to mention @gatsbyjs in your Tweet and include the hashtag #gatsbytutorial :)
+- Share your Gatsby site on Twitter and see what other people have created by searching for [#gatsbytutorial](https://twitter.com/search?q=%23gatsbytutorial)! Make sure to mention [@GatsbyJS](https://twitter.com/gatsbyjs) in your tweet and include the hashtag `#gatsbytutorial` :)
 - You could take a look at some [example sites](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)
 - Explore more [plugins](/docs/plugins/)
 - See what [other people are building with Gatsby](/showcase/)

docs/docs/working-with-images.md

@@ -2,6 +2,8 @@
 title: Working with Images in Gatsby
 ---
 
+_This document uses the deprecated image plugin. Please check out how to work with the new [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image)._
+
 Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily, Gatsby has several useful [plugins](/docs/plugins/) that work together to do that for images on [page components](/docs/conceptual/building-with-components/#page-components).
 
 The recommended approach is to use [GraphQL queries](/docs/conceptual/graphql-concepts/) to get images of the optimal size or resolution, then, display them with the [`gatsby-image`](/plugins/gatsby-image/) component.

packages/gatsby-plugin-gatsby-cloud/package.json

@@ -29,7 +29,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": "^3.0.0"
+    "gatsby": "^3.0.0-next.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-plugin-image/package.json

@@ -65,9 +65,8 @@
   },
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-image": "*",
-    "gatsby-plugin-sharp": "*",
-    "gatsby-source-filesystem": "*",
+    "gatsby-plugin-sharp": "^3.0.0-next.0",
+    "gatsby-source-filesystem": "^3.0.0-next.0",
     "react": "^16.9.0 || ^17.0.0",
     "react-dom": "^16.9.0 || ^17.0.0"
   },

packages/gatsby-plugin-sharp/package.json

@@ -47,7 +47,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": ">2.0.15"
+    "gatsby": "^3.0.0-next.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-remark-embed-snippet/package.json

@@ -27,7 +27,7 @@
   ],
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-remark-prismjs": "^3.0.0"
+    "gatsby-remark-prismjs": "^3.0.0-next.0"
   },
   "license": "MIT",
   "main": "index.js",

packages/gatsby-remark-images/package.json

@@ -41,7 +41,7 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-plugin-sharp": "^2.0.0-beta.5"
+    "gatsby-plugin-sharp": "^3.0.0-next.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-source-contentful/package.json

@@ -45,7 +45,7 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sharp": "^3.0.0-next.0",
     "sharp": "^0.26.0"
   },
   "repository": {

packages/gatsby-source-wordpress/package.json

@@ -73,8 +73,8 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-plugin-sharp": "^2.6.8",
-    "gatsby-transformer-sharp": "^2.5.10"
+    "gatsby-plugin-sharp": "^3.0.0-next.0",
+    "gatsby-transformer-sharp": "^3.0.0-next.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-source-wordpress/src/steps/create-schema-customization/transform-fields/transform-object.js

@@ -54,7 +54,7 @@ export const buildGatsbyNodeObjectResolver = ({ field, fieldName }) => async (
     schema: { typePrefix: prefix },
   } = getPluginOptions()
 
-  if (!existingNode.__typename.startsWith(prefix)) {
+  if (existingNode?.__typename && !existingNode.__typename.startsWith(prefix)) {
     existingNode.__typename = buildTypeName(existingNode.__typename)
   }
 

packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-file-node/index.js

@@ -8,7 +8,6 @@ const { isWebUri } = require(`valid-url`)
 const Queue = require(`better-queue`)
 const readChunk = require(`read-chunk`)
 const fileType = require(`file-type`)
-const { createProgress } = require(`gatsby-source-filesystem/utils`)
 
 const { createFileNode } = require(`gatsby-source-filesystem/create-file-node`)
 const {
@@ -431,7 +430,7 @@ module.exports = ({
   }
 
   if (totalJobs === 0) {
-    bar = createProgress(`Downloading remote files`, reporter)
+    bar = reporter.createProgress(`Downloading remote files`)
     bar.start()
   }
 

packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-media-item-node.js

@@ -138,6 +138,9 @@ export const errorPanicker = ({
       )
     )
     reporter.panic(error)
+  } else {
+    console.error(error)
+    reporter.panic()
   }
 }
 

packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/process-node.js

@@ -827,7 +827,11 @@ const replaceNodeHtmlLinks = ({ wpUrl, nodeString, node }) => {
           const normalizedPath = path.replace(/\\/g, ``)
 
           // replace normalized match with relative path
-          const thisMatchRegex = new RegExp(normalizedMatch, `g`)
+          const thisMatchRegex = new RegExp(
+            normalizedMatch + `(?!/?wp-content|/?wp-admin|/?wp-includes)`,
+            `g`
+          )
+
           nodeString = nodeString.replace(thisMatchRegex, normalizedPath)
         } catch (e) {
           console.error(e)

packages/gatsby-transformer-javascript-frontmatter/package.json

@@ -24,7 +24,7 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-source-filesystem": "^2.0.3"
+    "gatsby-source-filesystem": "^3.0.0-next.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-transformer-sharp/package.json

@@ -33,7 +33,7 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-plugin-sharp": "^2.0.0-beta.3"
+    "gatsby-plugin-sharp": "^3.0.0-next.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-transformer-sharp/src/customize-schema.js

@@ -465,7 +465,6 @@ const imageNodeType = ({
         not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying
         both PNG and JPG is not supported and will be ignored.
         `,
-        defaultValue: [``, `webp`],
       },
       outputPixelDensities: {
         type: GraphQLList(GraphQLFloat),

packages/gatsby-transformer-sqip/package.json

@@ -24,8 +24,8 @@
   },
   "peerDependencies": {
     "gatsby": "^3.0.0-next.0",
-    "gatsby-source-contentful": "^2.0.0",
-    "gatsby-transformer-sharp": "^2.0.0"
+    "gatsby-source-contentful": "^5.0.0-next.0",
+    "gatsby-transformer-sharp": "^3.0.0-next.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sqip#readme",
   "keywords": [

packages/gatsby/cache-dir/app.js

@@ -120,14 +120,13 @@ apiRunnerAsync(`onClientEntry`).then(() => {
 
   const rootElement = document.getElementById(`___gatsby`)
 
+  const focusEl = document.getElementById(`gatsby-focus-wrapper`)
   const renderer = apiRunner(
     `replaceHydrateFunction`,
     undefined,
     // Client only pages have any empty body so we just do a normal
     // render to avoid React complaining about hydration mis-matches.
-    document.getElementById(`___gatsby`).children.length === 0
-      ? ReactDOM.render
-      : ReactDOM.hydrate
+    focusEl && focusEl.children.length > 0 ? ReactDOM.hydrate : ReactDOM.render
   )[0]
 
   let dismissLoadingIndicator

packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js

@@ -59,7 +59,9 @@ function WrappedAccordionItem({ error, open }) {
 }
 
 export function GraphqlErrors({ errors, dismiss }) {
-  const deduplicatedErrors = React.useMemo(() => [...new Set(errors)], [errors])
+  const deduplicatedErrors = React.useMemo(() => Array.from(new Set(errors)), [
+    errors,
+  ])
   const hasMultipleErrors = deduplicatedErrors.length > 1
   return (
     <Overlay>

packages/gatsby/cache-dir/fast-refresh-overlay/components/runtime-errors.js

@@ -53,7 +53,9 @@ function WrappedAccordionItem({ error, open }) {
 }
 
 export function RuntimeErrors({ errors, dismiss }) {
-  const deduplicatedErrors = React.useMemo(() => [...new Set(errors)], [errors])
+  const deduplicatedErrors = React.useMemo(() => Array.from(new Set(errors)), [
+    errors,
+  ])
   const hasMultipleErrors = deduplicatedErrors.length > 1
 
   return (