From 0a3e92296ad1da1f1358d5f8909cdba5b3370b9b Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 1 Mar 2021 14:30:41 +0100 Subject: [PATCH 01/11] chore: update peerdeps to latest major versions (#29857) --- packages/gatsby-plugin-gatsby-cloud/package.json | 2 +- packages/gatsby-plugin-sharp/package.json | 2 +- packages/gatsby-remark-embed-snippet/package.json | 2 +- packages/gatsby-remark-images/package.json | 2 +- packages/gatsby-source-contentful/package.json | 2 +- packages/gatsby-source-wordpress/package.json | 4 ++-- .../gatsby-transformer-javascript-frontmatter/package.json | 2 +- packages/gatsby-transformer-sharp/package.json | 2 +- packages/gatsby-transformer-sqip/package.json | 4 ++-- 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/gatsby-plugin-gatsby-cloud/package.json b/packages/gatsby-plugin-gatsby-cloud/package.json index 0d60cb18fe7d1..2c9f5582b7739 100644 --- a/packages/gatsby-plugin-gatsby-cloud/package.json +++ b/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", diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json index f15b1036315e0..5746cb7e2d5e7 100644 --- a/packages/gatsby-plugin-sharp/package.json +++ b/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", diff --git a/packages/gatsby-remark-embed-snippet/package.json b/packages/gatsby-remark-embed-snippet/package.json index 8b06cbfec80c6..4b3e78ef8768f 100644 --- a/packages/gatsby-remark-embed-snippet/package.json +++ b/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", diff --git a/packages/gatsby-remark-images/package.json b/packages/gatsby-remark-images/package.json index 3de97d76e43e0..7e662b50f7f72 100644 --- a/packages/gatsby-remark-images/package.json +++ b/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", diff --git a/packages/gatsby-source-contentful/package.json b/packages/gatsby-source-contentful/package.json index 085b8b69bb044..c5f95b173dccf 100644 --- a/packages/gatsby-source-contentful/package.json +++ b/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": { diff --git a/packages/gatsby-source-wordpress/package.json b/packages/gatsby-source-wordpress/package.json index cfa74e1a4d5df..e6ecb2840c94d 100644 --- a/packages/gatsby-source-wordpress/package.json +++ b/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", diff --git a/packages/gatsby-transformer-javascript-frontmatter/package.json b/packages/gatsby-transformer-javascript-frontmatter/package.json index 267db454939a5..572b8e0bda86b 100644 --- a/packages/gatsby-transformer-javascript-frontmatter/package.json +++ b/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", diff --git a/packages/gatsby-transformer-sharp/package.json b/packages/gatsby-transformer-sharp/package.json index 272270e31b435..491e7a52676c4 100644 --- a/packages/gatsby-transformer-sharp/package.json +++ b/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", diff --git a/packages/gatsby-transformer-sqip/package.json b/packages/gatsby-transformer-sqip/package.json index 0cc906f78aaf4..38320a204a944 100644 --- a/packages/gatsby-transformer-sqip/package.json +++ b/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": [ From 114e006c5866c15c8448904746d968e4ef904f83 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 1 Mar 2021 05:44:08 -0800 Subject: [PATCH 02/11] fix(gatsby): Fix various small DEV_SSR bugs exposed in development_runtime tests (#29720) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * the dev server now returns 404s which would otherwise fail the tests * Correctly detect if there's any SSRed HTML as ___gatsby always has the focus wrapper child * Handle unicode paths like /안녕 * Properly escape paths with special characters in it * Enable DEV_SSR for everyone * Fix status in test * Revert to 20% rollout * revert changes for 100% rollout * test this --- packages/gatsby/cache-dir/app.js | 5 ++--- packages/gatsby/src/utils/dev-ssr/develop-html-route.ts | 6 +++--- packages/gatsby/src/utils/dev-ssr/render-dev-html.ts | 7 ++++++- packages/gatsby/src/utils/develop-preload-headers.ts | 2 +- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js index 569cdb9d751e3..fbb679a72af07 100644 --- a/packages/gatsby/cache-dir/app.js +++ b/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 diff --git a/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts b/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts index 9953f1627892e..4a3b8f2596673 100644 --- a/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts +++ b/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts @@ -10,13 +10,13 @@ export const route = ({ app, program, store }): any => app.get(`*`, async (req, res, next) => { trackFeatureIsUsed(`GATSBY_EXPERIMENTAL_DEV_SSR`) - const pathObj = findPageByPath(store.getState(), req.path) + const pathObj = findPageByPath(store.getState(), decodeURI(req.path)) if (!pathObj) { return next() } - await appendPreloadHeaders(req.path, res) + await appendPreloadHeaders(pathObj.path, res) const htmlActivity = report.phantomActivity(`building HTML for path`, {}) htmlActivity.start() @@ -152,7 +152,7 @@ export const route = ({ app, program, store }): any => node.js, it errored.

error

diff --git a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts index 5621e1ac5f5d0..28aef6ee541fa 100644 --- a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts +++ b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts @@ -59,8 +59,13 @@ export const restartWorker = (htmlComponentRendererPath): void => { const searchFileForString = (substring, filePath): Promise => new Promise(resolve => { + const escapedSubString = substring.replace(/[.*+?^${}()|[\]\\]/g, `\\$&`) + // See if the chunk is in the newComponents array (not the notVisited). - const chunkRegex = RegExp(`exports.ssrComponents.*${substring}.*}`, `gs`) + const chunkRegex = RegExp( + `exports.ssrComponents.*${escapedSubString}.*}`, + `gs` + ) const stream = fs.createReadStream(filePath) let found = false stream.on(`data`, function (d) { diff --git a/packages/gatsby/src/utils/develop-preload-headers.ts b/packages/gatsby/src/utils/develop-preload-headers.ts index 4673eee215612..24682100a78bb 100644 --- a/packages/gatsby/src/utils/develop-preload-headers.ts +++ b/packages/gatsby/src/utils/develop-preload-headers.ts @@ -43,7 +43,7 @@ export async function appendPreloadHeaders( `Link`, `; rel=preload; as=fetch ; crossorigin` ) From a579266f98b8bf8385c0e90da2fc576674eaf066 Mon Sep 17 00:00:00 2001 From: LB Date: Mon, 1 Mar 2021 09:32:51 -0500 Subject: [PATCH 03/11] some docs quick wins (#29859) --- docs/docs/conceptual/gatsby-core-philosophy.md | 4 ++-- docs/docs/images-and-files.md | 2 +- docs/docs/plugins.md | 2 +- docs/docs/porting-an-html-site-to-gatsby.md | 2 +- docs/docs/porting-from-create-react-app-to-gatsby.md | 2 +- docs/docs/reference/built-in-components/gatsby-image.md | 2 ++ docs/docs/working-with-images.md | 2 ++ 7 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/docs/conceptual/gatsby-core-philosophy.md b/docs/docs/conceptual/gatsby-core-philosophy.md index 3119969b1617c..a08d427a3618f 100644 --- a/docs/docs/conceptual/gatsby-core-philosophy.md +++ b/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/). diff --git a/docs/docs/images-and-files.md b/docs/docs/images-and-files.md index e2f8d7622dd41..c3216a9274ad6 100644 --- a/docs/docs/images-and-files.md +++ b/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. diff --git a/docs/docs/plugins.md b/docs/docs/plugins.md index 3770df857703f..6403d259b9d46 100644 --- a/docs/docs/plugins.md +++ b/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/). diff --git a/docs/docs/porting-an-html-site-to-gatsby.md b/docs/docs/porting-an-html-site-to-gatsby.md index 8e252321aa6f3..9e929d933b3c6 100644 --- a/docs/docs/porting-an-html-site-to-gatsby.md +++ b/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. diff --git a/docs/docs/porting-from-create-react-app-to-gatsby.md b/docs/docs/porting-from-create-react-app-to-gatsby.md index 73d1cefde9129..b3bf33a4e1cf7 100644 --- a/docs/docs/porting-from-create-react-app-to-gatsby.md +++ b/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/) diff --git a/docs/docs/reference/built-in-components/gatsby-image.md b/docs/docs/reference/built-in-components/gatsby-image.md index d53ce8d3ac75d..4bd4afb3982e8 100644 --- a/docs/docs/reference/built-in-components/gatsby-image.md +++ b/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 ``. 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._ diff --git a/docs/docs/working-with-images.md b/docs/docs/working-with-images.md index a17fe8bf4e1c5..67f1ac060c897 100644 --- a/docs/docs/working-with-images.md +++ b/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. From ac77db4328c56d9c96ca1a839b30daf776a3853c Mon Sep 17 00:00:00 2001 From: Tal Ohana Date: Mon, 1 Mar 2021 16:36:37 +0200 Subject: [PATCH 04/11] chore(docs): add paths to unit-testing using typescript (#28029) --- docs/docs/how-to/testing/unit-testing.md | 30 ++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/docs/how-to/testing/unit-testing.md b/docs/docs/how-to/testing/unit-testing.md index 626573afeaa6a..68d1b97a6c6a6 100644 --- a/docs/docs/how-to/testing/unit-testing.md +++ b/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: "/", +}) +``` + +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)$': `/tests/file-mock.js`, + ...paths, + }, +``` + ## Other resources If you need to make changes to your Babel config, you can edit the config in From 44f5e2d921f461403bff729486425c76330a487c Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Mon, 1 Mar 2021 09:39:35 -0500 Subject: [PATCH 05/11] chore(docs): Update headless WordPress article (#29402) Co-authored-by: Megan Sullivan Co-authored-by: gatsbybot --- docs/docs/glossary/headless-wordpress.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/docs/glossary/headless-wordpress.md b/docs/docs/glossary/headless-wordpress.md index 0f588b1c5af9d..b64e014d01f15 100644 --- a/docs/docs/glossary/headless-wordpress.md +++ b/docs/docs/glossary/headless-wordpress.md @@ -7,7 +7,7 @@ Learn what headless WordPress 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 -- [How To Build A Blog with WordPress and Gatsby.js](/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 From d65dad13ec4e128eb15603e9fe59bd96227138f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Loren=20=E2=98=BA=EF=B8=8F?= <251288+lorensr@users.noreply.github.com> Date: Mon, 1 Mar 2021 09:40:29 -0500 Subject: [PATCH 06/11] chore(docs): Add twitter links to tutorial (#29696) Co-authored-by: Lennart --- docs/docs/tutorial/part-seven/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/tutorial/part-seven/index.md b/docs/docs/tutorial/part-seven/index.md index fbfdfdbf92f09..ea4eb17f27723 100644 --- a/docs/docs/tutorial/part-seven/index.md +++ b/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/) From 39721fd2f3f4a997c6a954c60ae81bb93712c0b1 Mon Sep 17 00:00:00 2001 From: Lennart Date: Mon, 1 Mar 2021 15:41:32 +0100 Subject: [PATCH 07/11] fix(gatsby): Remove `react-hot-loader` deps & other unused deps (#29864) --- packages/gatsby/package.json | 8 ++---- yarn.lock | 51 ++++++++++-------------------------- 2 files changed, 16 insertions(+), 43 deletions(-) diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 506c8ea281228..28ee1c9f384e4 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -46,7 +46,6 @@ "chokidar": "^3.4.2", "common-tags": "^1.8.0", "compression": "^1.7.4", - "convert-hrtime": "^3.0.0", "copyfiles": "^2.3.0", "core-js": "^3.9.0", "cors": "^2.8.5", @@ -129,9 +128,7 @@ "prop-types": "^15.7.2", "query-string": "^6.13.1", "raw-loader": "^4.0.2", - "react-dev-utils": "^11.0.1", - "react-error-overlay": "^3.0.0", - "react-hot-loader": "^4.13.0", + "react-dev-utils": "^11.0.3", "react-refresh": "^0.9.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0", @@ -181,7 +178,6 @@ "cross-env": "^7.0.3", "documentation": "^13.1.0", "enhanced-resolve": "^4.2.0", - "eslint-plugin-jsx-a11y": "^6.3.1", "react": "^16.12.0", "react-dom": "^16.12.0", "rimraf": "^3.0.2", @@ -259,4 +255,4 @@ "yargs": { "boolean-negation": false } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index 302fb250dbac1..bcd37af67c6c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14996,10 +14996,10 @@ immediate@~3.2.3: resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.2.3.tgz#d140fa8f614659bd6541233097ddaac25cdd991c" integrity sha1-0UD6j2FGWb1lQSMwl92qwlzdmRw= -immer@7.0.9: - version "7.0.9" - resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e" - integrity sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A== +immer@8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656" + integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA== immer@^4.0.0: version "4.0.2" @@ -21939,10 +21939,10 @@ react-clientside-effect@^1.2.2: dependencies: "@babel/runtime" "^7.0.0" -react-dev-utils@^11.0.1: - version "11.0.1" - resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.1.tgz#30106c2055acfd6b047d2dc478a85c356e66fe45" - integrity sha512-rlgpCupaW6qQqvu0hvv2FDv40QG427fjghV56XyPcP5aKtOAPzNAhQ7bHqk1YdS2vpW1W7aSV3JobedxuPlBAA== +react-dev-utils@^11.0.3: + version "11.0.3" + resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.3.tgz#b61ed499c7d74f447d4faddcc547e5e671e97c08" + integrity sha512-4lEA5gF4OHrcJLMUV1t+4XbNDiJbsAWCH5Z2uqlTqW6dD7Cf5nEASkeXrCI/Mz83sI2o527oBIFKVMXtRf1Vtg== dependencies: "@babel/code-frame" "7.10.4" address "1.1.2" @@ -21957,13 +21957,13 @@ react-dev-utils@^11.0.1: global-modules "2.0.0" globby "11.0.1" gzip-size "5.1.1" - immer "7.0.9" + immer "8.0.1" is-root "2.1.0" loader-utils "2.0.0" open "^7.0.2" pkg-up "3.1.0" prompts "2.4.0" - react-error-overlay "^6.0.8" + react-error-overlay "^6.0.9" recursive-readdir "2.2.2" shell-quote "1.7.2" strip-ansi "6.0.0" @@ -22008,14 +22008,10 @@ react-error-boundary@^3.1.0: dependencies: "@babel/runtime" "^7.12.5" -react-error-overlay@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" - -react-error-overlay@^6.0.8: - version "6.0.8" - resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de" - integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw== +react-error-overlay@^6.0.9: + version "6.0.9" + resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" + integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== react-fast-compare@^2.0.1: version "2.0.4" @@ -22049,20 +22045,6 @@ react-helmet@^6.1.0: react-fast-compare "^3.1.1" react-side-effect "^2.1.0" -react-hot-loader@^4.13.0: - version "4.13.0" - resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202" - integrity sha512-JrLlvUPqh6wIkrK2hZDfOyq/Uh/WeVEr8nc7hkn2/3Ul0sx1Kr5y4kOGNacNRoj7RhwLNcQ3Udf1KJXrqc0ZtA== - dependencies: - fast-levenshtein "^2.0.6" - global "^4.3.0" - hoist-non-react-statics "^3.3.0" - loader-utils "^1.1.0" - prop-types "^15.6.1" - react-lifecycles-compat "^3.0.4" - shallowequal "^1.1.0" - source-map "^0.7.3" - react-icons@^3.11.0: version "3.11.0" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254" @@ -24594,11 +24576,6 @@ shallow-copy@~0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170" -shallowequal@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" - integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== - sharp@^0.27.0: version "0.27.0" resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.27.0.tgz#523fba913ba674985dcc688a6a5237384079d80f" From 28124dd74b87902f9fa8cf3895ff8b4d54bc0fd6 Mon Sep 17 00:00:00 2001 From: Tyler Barnes Date: Mon, 1 Mar 2021 07:46:51 -0800 Subject: [PATCH 08/11] fix(gatsby-source-wordpress): image fixes (#29813) Co-authored-by: Ward Peeters --- .../transform-fields/transform-object.js | 2 +- .../create-nodes/create-remote-file-node/index.js | 3 +-- .../create-nodes/create-remote-media-item-node.js | 3 +++ .../src/steps/source-nodes/create-nodes/process-node.js | 6 +++++- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-source-wordpress/src/steps/create-schema-customization/transform-fields/transform-object.js b/packages/gatsby-source-wordpress/src/steps/create-schema-customization/transform-fields/transform-object.js index cc33a60d30d3e..d3940964e6d26 100644 --- a/packages/gatsby-source-wordpress/src/steps/create-schema-customization/transform-fields/transform-object.js +++ b/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) } diff --git a/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-file-node/index.js b/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-file-node/index.js index 9272667adaba5..ee0b995c14b02 100644 --- a/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-file-node/index.js +++ b/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() } diff --git a/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-media-item-node.js b/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-media-item-node.js index 598f339bb194e..2da0f5418b408 100644 --- a/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/create-remote-media-item-node.js +++ b/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() } } diff --git a/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/process-node.js b/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/process-node.js index 5b6fe72416be1..d23ea62a2d4cb 100644 --- a/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/process-node.js +++ b/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) From d14cdc5b7bd9e4b52815ecae15dfaf50674967d5 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Mon, 1 Mar 2021 18:17:28 +0000 Subject: [PATCH 09/11] fix(gatsby-plugin-image): Update peerdeps (#29880) --- packages/gatsby-plugin-image/package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/gatsby-plugin-image/package.json b/packages/gatsby-plugin-image/package.json index a1d7847751282..c4609ed8c7987 100644 --- a/packages/gatsby-plugin-image/package.json +++ b/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" }, From 5d312fe5433dbafb9a6b7eeba6abb563dba27ef2 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Mon, 1 Mar 2021 19:17:51 +0100 Subject: [PATCH 10/11] fix(gatsby): with some custom babel configs array spreading with Set is not safe (#29885) --- .../fast-refresh-overlay/components/graphql-errors.js | 4 +++- .../fast-refresh-overlay/components/runtime-errors.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js index dedd8a7667a2e..d534de7068549 100644 --- a/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js +++ b/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 ( diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/runtime-errors.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/runtime-errors.js index 125767e4fb483..d9e76e97c1091 100644 --- a/packages/gatsby/cache-dir/fast-refresh-overlay/components/runtime-errors.js +++ b/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 ( From 57c131db9d43e526e6228df4502119b8296ebfb6 Mon Sep 17 00:00:00 2001 From: LB Date: Mon, 1 Mar 2021 15:24:33 -0500 Subject: [PATCH 11/11] will git stop being weird (#29897) --- packages/gatsby-transformer-sharp/src/customize-schema.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby-transformer-sharp/src/customize-schema.js b/packages/gatsby-transformer-sharp/src/customize-schema.js index 262e5c8a04385..14baeed0fa9db 100644 --- a/packages/gatsby-transformer-sharp/src/customize-schema.js +++ b/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),