From 9e3698e9240dc378be1adc0977b001a8b9a20303 Mon Sep 17 00:00:00 2001
From: Jude Agboola <marvinjudehk@gmail.com>
Date: Tue, 7 Feb 2023 17:17:56 +0100
Subject: [PATCH] chore(docs): Docs for `wrapRootElement` + `Head` (#37519)

Co-authored-by: pieh <misiek.piechowiak@gmail.com>
---
 docs/docs/reference/built-in-components/gatsby-head.md | 2 +-
 packages/gatsby/cache-dir/api-ssr-docs.js              | 4 ++--
 packages/gatsby/src/utils/api-browser-docs.ts          | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/docs/reference/built-in-components/gatsby-head.md b/docs/docs/reference/built-in-components/gatsby-head.md
index 7471683d278a2..1d94761bc3b8e 100644
--- a/docs/docs/reference/built-in-components/gatsby-head.md
+++ b/docs/docs/reference/built-in-components/gatsby-head.md
@@ -111,7 +111,7 @@ You'll need to be aware of these things when using Gatsby Head:
 - Valid tags inside the `Head` function are: `link`, `meta`, `style`, `title`, `base`, `script`, and `noscript`.
 - `html` and `body` tags defined in `Head` overwrite the attributes defined in [`onRenderBody`](/docs/reference/config-files/gatsby-ssr/#onRenderBody) (`setHtmlAttributes` and `setBodyAttributes`).
 - Data block `<script>` tags such as `<script type="application/ld+json">` can go in the `Head` function, but dynamic scripts are better loaded with the [Gatsby Script Component](/docs/reference/built-in-components/gatsby-script/) in your pages or components.
-- As of now, `Head` can't access [React Context](https://reactjs.org/docs/context.html) that you defined in the [`wrapRootElement` API](/docs/reference/config-files/gatsby-browser/#wrapRootElement).
+- As of `gatsby@5.6.0`, `Head` can access [React Context](https://reactjs.org/docs/context.html) that you defined in the [`wrapRootElement` API](/docs/reference/config-files/gatsby-browser/#wrapRootElement). It's important to note that `wrapRootElement` should only be used to set up context providers. UI components should be defined in [`wrapPageElement` API](/docs/reference/config-files/gatsby-browser/#wrapPageElement).
 
 ## Properties
 
diff --git a/packages/gatsby/cache-dir/api-ssr-docs.js b/packages/gatsby/cache-dir/api-ssr-docs.js
index e77aa8aa2e296..eebe408cc4cab 100644
--- a/packages/gatsby/cache-dir/api-ssr-docs.js
+++ b/packages/gatsby/cache-dir/api-ssr-docs.js
@@ -151,7 +151,7 @@ exports.onPreRenderHTML = true
  * Allow a plugin to wrap the page element.
  *
  * This is useful for setting wrapper components around pages that won't get
- * unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement).
+ * unmounted on page changes. For setting context providers, use [wrapRootElement](#wrapRootElement).
  *
  * _Note:_
  * There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapPageElement).
@@ -177,7 +177,7 @@ exports.wrapPageElement = true
 /**
  * Allow a plugin to wrap the root element.
  *
- * This is useful to set up any Provider components that will wrap your application.
+ * This is useful to set up any context providers that will wrap your application.
  * For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement).
  *
  * _Note:_
diff --git a/packages/gatsby/src/utils/api-browser-docs.ts b/packages/gatsby/src/utils/api-browser-docs.ts
index 502f6c04f5b67..16dab553ed4bc 100644
--- a/packages/gatsby/src/utils/api-browser-docs.ts
+++ b/packages/gatsby/src/utils/api-browser-docs.ts
@@ -118,7 +118,7 @@ export const registerServiceWorker = true
  * Can be used to wrap each page element.
  *
  * This is useful for setting wrapper components around pages that won't get
- * unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement).
+ * unmounted on page changes. For setting context providers, use [wrapRootElement](#wrapRootElement).
  *
  * _Note:_
  * There is an equivalent hook in Gatsby's [SSR API](/docs/ssr-apis/#wrapPageElement).
@@ -144,7 +144,7 @@ export const wrapPageElement = true
 /**
  * Can be used to the wrap the root element.
  *
- * This is useful to set up any Provider components that will wrap your application.
+ * This is useful to set up any context providers that will wrap your application.
  * For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement).
  *
  * _Note:_